From bc0cf3ab92ced7d15dd8db720bb7f2934afa0492 Mon Sep 17 00:00:00 2001 From: darius Date: Sat, 18 May 2024 18:20:37 +0200 Subject: [PATCH] sass added --- .gitignore | 2 + web/assets/css/sass/_index.scss | 10 + web/assets/css/sass/base/_index.scss | 6 + web/assets/css/sass/base/animations.scss | 15 + web/assets/css/sass/base/generic.scss | 239 + web/assets/css/sass/base/minireset.scss | 92 + web/assets/css/sass/base/skeleton.scss | 126 + web/assets/css/sass/components/_index.scss | 13 + .../css/sass/components/breadcrumb.scss | 139 + web/assets/css/sass/components/card.scss | 162 + web/assets/css/sass/components/dropdown.scss | 188 + web/assets/css/sass/components/menu.scss | 165 + web/assets/css/sass/components/message.scss | 183 + web/assets/css/sass/components/modal.scss | 164 + web/assets/css/sass/components/navbar.scss | 788 + .../css/sass/components/pagination.scss | 379 + web/assets/css/sass/components/panel.scss | 218 + web/assets/css/sass/components/tabs.scss | 273 + web/assets/css/sass/elements/_index.scss | 16 + web/assets/css/sass/elements/block.scss | 6 + web/assets/css/sass/elements/box.scss | 59 + web/assets/css/sass/elements/button.scss | 640 + web/assets/css/sass/elements/content.scss | 283 + web/assets/css/sass/elements/delete.scss | 6 + web/assets/css/sass/elements/icon.scss | 67 + web/assets/css/sass/elements/image.scss | 62 + web/assets/css/sass/elements/loader.scss | 15 + .../css/sass/elements/notification.scss | 105 + web/assets/css/sass/elements/progress.scss | 115 + web/assets/css/sass/elements/table.scss | 261 + web/assets/css/sass/elements/tag.scss | 219 + web/assets/css/sass/elements/title.scss | 128 + web/assets/css/sass/form/_index.scss | 9 + web/assets/css/sass/form/checkbox-radio.scss | 32 + web/assets/css/sass/form/file.scss | 330 + web/assets/css/sass/form/input-textarea.scss | 123 + web/assets/css/sass/form/select.scss | 143 + web/assets/css/sass/form/shared.scss | 172 + web/assets/css/sass/form/tools.scss | 341 + web/assets/css/sass/grid/_index.scss | 5 + web/assets/css/sass/grid/columns-v2.scss | 957 + web/assets/css/sass/grid/columns.scss | 877 + web/assets/css/sass/grid/grid.scss | 209 + web/assets/css/sass/helpers/_index.scss | 15 + web/assets/css/sass/helpers/aspect-ratio.scss | 10 + web/assets/css/sass/helpers/border.scss | 15 + web/assets/css/sass/helpers/color.scss | 364 + web/assets/css/sass/helpers/flexbox.scss | 62 + web/assets/css/sass/helpers/float.scss | 28 + web/assets/css/sass/helpers/gap.scss | 24 + web/assets/css/sass/helpers/other.scss | 19 + web/assets/css/sass/helpers/overflow.scss | 21 + web/assets/css/sass/helpers/position.scss | 19 + web/assets/css/sass/helpers/spacing.scss | 64 + web/assets/css/sass/helpers/typography.scss | 168 + web/assets/css/sass/helpers/visibility.scss | 221 + web/assets/css/sass/layout/_index.scss | 9 + web/assets/css/sass/layout/container.scss | 51 + web/assets/css/sass/layout/footer.scss | 23 + web/assets/css/sass/layout/hero.scss | 270 + web/assets/css/sass/layout/level.scss | 107 + web/assets/css/sass/layout/media.scss | 106 + web/assets/css/sass/layout/section.scss | 34 + web/assets/css/sass/themes/_index.scss | 35 + web/assets/css/sass/themes/dark.scss | 56 + web/assets/css/sass/themes/light.scss | 145 + web/assets/css/sass/themes/setup.scss | 174 + web/assets/css/sass/utilities/_index.scss | 7 + web/assets/css/sass/utilities/controls.scss | 85 + .../css/sass/utilities/css-variables.scss | 425 + .../css/sass/utilities/derived-variables.scss | 112 + web/assets/css/sass/utilities/extends.scss | 34 + web/assets/css/sass/utilities/functions.scss | 258 + .../css/sass/utilities/initial-variables.scss | 155 + web/assets/css/sass/utilities/mixins.scss | 460 + web/assets/css/style.css | 22437 ++++++++++++++++ web/assets/css/style.scss | 15 + web/handlers/homePageHandler.go | 4 + web/handlers/pageTemplates.go | 14 +- web/handlers/projectPageHandler.go | 9 +- 80 files changed, 34390 insertions(+), 7 deletions(-) create mode 100644 web/assets/css/sass/_index.scss create mode 100644 web/assets/css/sass/base/_index.scss create mode 100644 web/assets/css/sass/base/animations.scss create mode 100644 web/assets/css/sass/base/generic.scss create mode 100644 web/assets/css/sass/base/minireset.scss create mode 100644 web/assets/css/sass/base/skeleton.scss create mode 100644 web/assets/css/sass/components/_index.scss create mode 100644 web/assets/css/sass/components/breadcrumb.scss create mode 100644 web/assets/css/sass/components/card.scss create mode 100644 web/assets/css/sass/components/dropdown.scss create mode 100644 web/assets/css/sass/components/menu.scss create mode 100644 web/assets/css/sass/components/message.scss create mode 100644 web/assets/css/sass/components/modal.scss create mode 100644 web/assets/css/sass/components/navbar.scss create mode 100644 web/assets/css/sass/components/pagination.scss create mode 100644 web/assets/css/sass/components/panel.scss create mode 100644 web/assets/css/sass/components/tabs.scss create mode 100644 web/assets/css/sass/elements/_index.scss create mode 100644 web/assets/css/sass/elements/block.scss create mode 100644 web/assets/css/sass/elements/box.scss create mode 100644 web/assets/css/sass/elements/button.scss create mode 100644 web/assets/css/sass/elements/content.scss create mode 100644 web/assets/css/sass/elements/delete.scss create mode 100644 web/assets/css/sass/elements/icon.scss create mode 100644 web/assets/css/sass/elements/image.scss create mode 100644 web/assets/css/sass/elements/loader.scss create mode 100644 web/assets/css/sass/elements/notification.scss create mode 100644 web/assets/css/sass/elements/progress.scss create mode 100644 web/assets/css/sass/elements/table.scss create mode 100644 web/assets/css/sass/elements/tag.scss create mode 100644 web/assets/css/sass/elements/title.scss create mode 100644 web/assets/css/sass/form/_index.scss create mode 100644 web/assets/css/sass/form/checkbox-radio.scss create mode 100644 web/assets/css/sass/form/file.scss create mode 100644 web/assets/css/sass/form/input-textarea.scss create mode 100644 web/assets/css/sass/form/select.scss create mode 100644 web/assets/css/sass/form/shared.scss create mode 100644 web/assets/css/sass/form/tools.scss create mode 100644 web/assets/css/sass/grid/_index.scss create mode 100644 web/assets/css/sass/grid/columns-v2.scss create mode 100644 web/assets/css/sass/grid/columns.scss create mode 100644 web/assets/css/sass/grid/grid.scss create mode 100644 web/assets/css/sass/helpers/_index.scss create mode 100644 web/assets/css/sass/helpers/aspect-ratio.scss create mode 100644 web/assets/css/sass/helpers/border.scss create mode 100644 web/assets/css/sass/helpers/color.scss create mode 100644 web/assets/css/sass/helpers/flexbox.scss create mode 100644 web/assets/css/sass/helpers/float.scss create mode 100644 web/assets/css/sass/helpers/gap.scss create mode 100644 web/assets/css/sass/helpers/other.scss create mode 100644 web/assets/css/sass/helpers/overflow.scss create mode 100644 web/assets/css/sass/helpers/position.scss create mode 100644 web/assets/css/sass/helpers/spacing.scss create mode 100644 web/assets/css/sass/helpers/typography.scss create mode 100644 web/assets/css/sass/helpers/visibility.scss create mode 100644 web/assets/css/sass/layout/_index.scss create mode 100644 web/assets/css/sass/layout/container.scss create mode 100644 web/assets/css/sass/layout/footer.scss create mode 100644 web/assets/css/sass/layout/hero.scss create mode 100644 web/assets/css/sass/layout/level.scss create mode 100644 web/assets/css/sass/layout/media.scss create mode 100644 web/assets/css/sass/layout/section.scss create mode 100644 web/assets/css/sass/themes/_index.scss create mode 100644 web/assets/css/sass/themes/dark.scss create mode 100644 web/assets/css/sass/themes/light.scss create mode 100644 web/assets/css/sass/themes/setup.scss create mode 100644 web/assets/css/sass/utilities/_index.scss create mode 100644 web/assets/css/sass/utilities/controls.scss create mode 100644 web/assets/css/sass/utilities/css-variables.scss create mode 100644 web/assets/css/sass/utilities/derived-variables.scss create mode 100644 web/assets/css/sass/utilities/extends.scss create mode 100644 web/assets/css/sass/utilities/functions.scss create mode 100644 web/assets/css/sass/utilities/initial-variables.scss create mode 100644 web/assets/css/sass/utilities/mixins.scss create mode 100644 web/assets/css/style.css create mode 100644 web/assets/css/style.scss diff --git a/.gitignore b/.gitignore index 20c8a1d..8541d20 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ **.env /.idea/ +**/css/ +!**/css/style.css diff --git a/web/assets/css/sass/_index.scss b/web/assets/css/sass/_index.scss new file mode 100644 index 0000000..82310cb --- /dev/null +++ b/web/assets/css/sass/_index.scss @@ -0,0 +1,10 @@ +@forward "utilities"; +@forward "themes"; +@forward "base"; +@forward "elements"; +@forward "form"; +@forward "components"; +@forward "grid"; +@forward "layout"; +@forward "base/skeleton"; +@forward "helpers"; diff --git a/web/assets/css/sass/base/_index.scss b/web/assets/css/sass/base/_index.scss new file mode 100644 index 0000000..4416b1f --- /dev/null +++ b/web/assets/css/sass/base/_index.scss @@ -0,0 +1,6 @@ +/* Bulma Base */ +@charset "utf-8"; + +@forward "minireset"; +@forward "generic"; +@forward "animations"; diff --git a/web/assets/css/sass/base/animations.scss b/web/assets/css/sass/base/animations.scss new file mode 100644 index 0000000..667124c --- /dev/null +++ b/web/assets/css/sass/base/animations.scss @@ -0,0 +1,15 @@ +@keyframes spinAround { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(359deg); + } +} + +@keyframes pulsate { + 50% { + opacity: 0.5; + } +} diff --git a/web/assets/css/sass/base/generic.scss b/web/assets/css/sass/base/generic.scss new file mode 100644 index 0000000..b7ee0cc --- /dev/null +++ b/web/assets/css/sass/base/generic.scss @@ -0,0 +1,239 @@ +@use "../utilities/css-variables.scss" as cv; +@use "../utilities/mixins" as mx; + +$body-background-color: cv.getVar("scheme-main") !default; +$body-size: 1em !default; +$body-min-width: 300px !default; +$body-rendering: optimizeLegibility !default; +$body-family: cv.getVar("family-primary") !default; +$body-overflow-x: hidden !default; +$body-overflow-y: scroll !default; + +$body-color: cv.getVar("text") !default; +$body-font-size: 1em !default; +$body-weight: cv.getVar("weight-normal") !default; +$body-line-height: 1.5 !default; + +$code-family: cv.getVar("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: cv.getVar("background") !default; +$hr-height: 2px !default; +$hr-margin: 1.5rem 0 !default; + +$strong-color: cv.getVar("text-strong") !default; +$strong-weight: cv.getVar("weight-semibold") !default; + +$pre-font-size: 0.875em !default; +$pre-padding: 1.25rem 1.5rem !default; +$pre-code-font-size: 1em !default; + +:root { + @include cv.register-vars( + ( + "body-background-color": #{$body-background-color}, + "body-size": #{$body-size}, + "body-min-width": #{$body-min-width}, + "body-rendering": #{$body-rendering}, + "body-family": #{$body-family}, + "body-overflow-x": #{$body-overflow-x}, + "body-overflow-y": #{$body-overflow-y}, + "body-color": #{$body-color}, + "body-font-size": #{$body-font-size}, + "body-weight": #{$body-weight}, + "body-line-height": #{$body-line-height}, + "code-family": #{$code-family}, + "code-padding": #{$code-padding}, + "code-weight": #{$code-weight}, + "code-size": #{$code-size}, + "small-font-size": #{$small-font-size}, + "hr-background-color": #{$hr-background-color}, + "hr-height": #{$hr-height}, + "hr-margin": #{$hr-margin}, + "strong-color": #{$strong-color}, + "strong-weight": #{$strong-weight}, + "pre-font-size": #{$pre-font-size}, + "pre-padding": #{$pre-padding}, + "pre-code-font-size": #{$pre-code-font-size}, + ) + ); +} + +html { + background-color: cv.getVar("body-background-color"); + font-size: cv.getVar("body-size"); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: cv.getVar("body-min-width"); + overflow-x: cv.getVar("body-overflow-x"); + overflow-y: cv.getVar("body-overflow-y"); + text-rendering: cv.getVar("body-rendering"); + text-size-adjust: 100%; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +body, +button, +input, +optgroup, +select, +textarea { + font-family: cv.getVar("body-family"); +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: cv.getVar("code-family"); +} + +body { + color: cv.getVar("body-color"); + font-size: cv.getVar("body-font-size"); + font-weight: cv.getVar("body-weight"); + line-height: cv.getVar("body-line-height"); +} + +// Inline + +a, +button { + cursor: pointer; + + &:focus-visible { + outline-color: hsl( + cv.getVar("focus-h"), + cv.getVar("focus-s"), + cv.getVar("focus-l") + ); + outline-offset: cv.getVar("focus-offset"); + outline-style: cv.getVar("focus-style"); + outline-width: cv.getVar("focus-width"); + + &:active { + outline-width: 1px; + } + } + + &:active { + outline-width: 1px; + } +} + +a { + color: cv.getVar("link-text"); + cursor: pointer; + text-decoration: none; + transition-duration: cv.getVar("duration"); + transition-property: background-color, border-color, color; + + strong { + color: currentColor; + } +} + +button { + @include mx.reset; + transition-duration: cv.getVar("duration"); + transition-property: background-color, border-color, color; +} + +code { + background-color: cv.getVar("code-background"); + border-radius: 0.5em; + color: cv.getVar("code"); + font-size: cv.getVar("code-size"); + font-weight: cv.getVar("code-weight"); + padding: cv.getVar("code-padding"); +} + +hr { + background-color: cv.getVar("hr-background-color"); + border: none; + display: block; + height: cv.getVar("hr-height"); + margin: cv.getVar("hr-margin"); +} + +img { + height: auto; + max-width: 100%; +} + +input[type="checkbox"], +input[type="radio"] { + vertical-align: baseline; +} + +small { + font-size: cv.getVar("small-font-size"); +} + +span { + font-style: inherit; + font-weight: inherit; +} + +strong { + color: cv.getVar("strong-color"); + font-weight: cv.getVar("strong-weight"); +} + +svg { + height: auto; + width: auto; +} + +// Block + +fieldset { + border: none; +} + +pre { + @include mx.overflow-touch; + + background-color: cv.getVar("pre-background"); + color: cv.getVar("pre"); + font-size: cv.getVar("pre-font-size"); + overflow-x: auto; + padding: cv.getVar("pre-padding"); + white-space: pre; + word-wrap: normal; + + code { + background-color: transparent; + color: currentColor; + font-size: cv.getVar("pre-code-font-size"); + padding: 0; + } +} + +table { + td, + th { + vertical-align: top; + + &:not([align]) { + text-align: inherit; + } + } + + th { + color: cv.getVar("text-strong"); + } +} diff --git a/web/assets/css/sass/base/minireset.scss b/web/assets/css/sass/base/minireset.scss new file mode 100644 index 0000000..5b09693 --- /dev/null +++ b/web/assets/css/sass/base/minireset.scss @@ -0,0 +1,92 @@ +/*! 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/web/assets/css/sass/base/skeleton.scss b/web/assets/css/sass/base/skeleton.scss new file mode 100644 index 0000000..792e2ce --- /dev/null +++ b/web/assets/css/sass/base/skeleton.scss @@ -0,0 +1,126 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; +@use "../utilities/extends"; + +$skeleton-background: cv.getVar("border") !default; +$skeleton-radius: cv.getVar("radius-small") !default; +$skeleton-block-min-height: 4.5em !default; +$skeleton-lines-gap: 0.75em !default; +$skeleton-line-height: 0.75em !default; + +:root { + @include cv.register-vars( + ( + "skeleton-background": #{$skeleton-background}, + "skeleton-radius": #{$skeleton-radius}, + "skeleton-block-min-height": #{$skeleton-block-min-height}, + "skeleton-lines-gap": #{$skeleton-lines-gap}, + "skeleton-line-height": #{$skeleton-line-height}, + ) + ); +} + +%skeleton-pulsation { + animation-duration: 2s; + animation-iteration-count: infinite; + animation-name: pulsate; + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + background-color: cv.getVar("skeleton-background"); + border-radius: cv.getVar("skeleton-radius"); + box-shadow: none; + pointer-events: none; +} + +.#{iv.$class-prefix}is-skeleton { + @extend %skeleton-pulsation; + color: transparent !important; + + em, + strong { + color: inherit; + } + + img { + visibility: hidden; + } + + &.#{iv.$class-prefix}checkbox { + input { + opacity: 0; + } + } + + &.#{iv.$class-prefix}delete { + border-radius: cv.getVar("radius-rounded"); + + &::before, + &::after { + display: none; + } + } +} + +input.#{iv.$class-prefix}is-skeleton, +textarea.#{iv.$class-prefix}is-skeleton { + resize: none; + + @include mx.placeholder { + color: transparent !important; + } +} + +.#{iv.$class-prefix}has-skeleton { + color: transparent !important; + position: relative; + + &::after { + @extend %skeleton-pulsation; + content: ""; + display: block; + height: 100%; + left: 0; + max-width: 100%; + min-width: 10%; + position: absolute; + top: 0; + width: 7em; + } +} + +.#{iv.$class-prefix}skeleton-block { + @extend %block; + @extend %skeleton-pulsation; + color: transparent !important; + min-height: cv.getVar("skeleton-block-min-height"); +} + +.#{iv.$class-prefix}skeleton-lines { + color: transparent !important; + display: flex; + flex-direction: column; + gap: cv.getVar("skeleton-lines-gap"); + position: relative; + + > div { + @extend %skeleton-pulsation; + height: cv.getVar("skeleton-line-height"); + + &:last-child { + min-width: 4em; + width: 30%; + } + } +} + +.#{iv.$class-prefix}skeleton { + background-image: linear-gradient( + 0deg, + transparent 0%, + transparent 50%, + #f60 50%, + #f60 100% + ); + background-position: top left; + background-size: 1.5em; +} diff --git a/web/assets/css/sass/components/_index.scss b/web/assets/css/sass/components/_index.scss new file mode 100644 index 0000000..2decd67 --- /dev/null +++ b/web/assets/css/sass/components/_index.scss @@ -0,0 +1,13 @@ +/* Bulma Components */ +@charset "utf-8"; + +@forward "breadcrumb"; +@forward "card"; +@forward "dropdown"; +@forward "menu"; +@forward "message"; +@forward "modal"; +@forward "navbar"; +@forward "pagination"; +@forward "panel"; +@forward "tabs"; diff --git a/web/assets/css/sass/components/breadcrumb.scss b/web/assets/css/sass/components/breadcrumb.scss new file mode 100644 index 0000000..bd261fb --- /dev/null +++ b/web/assets/css/sass/components/breadcrumb.scss @@ -0,0 +1,139 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins"; + +$breadcrumb-item-color: cv.getVar("link-text") !default; +$breadcrumb-item-hover-color: cv.getVar("link-text-hover") !default; +$breadcrumb-item-active-color: cv.getVar("link-text-active") !default; + +$breadcrumb-item-padding-vertical: 0 !default; +$breadcrumb-item-padding-horizontal: 0.75em !default; + +$breadcrumb-item-separator-color: cv.getVar("border") !default; + +.#{iv.$class-prefix}breadcrumb { + @include cv.register-vars( + ( + "breadcrumb-item-color": #{$breadcrumb-item-color}, + "breadcrumb-item-hover-color": #{$breadcrumb-item-hover-color}, + "breadcrumb-item-active-color": #{$breadcrumb-item-active-color}, + "breadcrumb-item-padding-vertical": #{$breadcrumb-item-padding-vertical}, + "breadcrumb-item-padding-horizontal": #{$breadcrumb-item-padding-horizontal}, + "breadcrumb-item-separator-color": #{$breadcrumb-item-separator-color}, + ) + ); +} + +.#{iv.$class-prefix}breadcrumb { + @extend %block; + @extend %unselectable; + font-size: cv.getVar("size-normal"); + white-space: nowrap; + + a { + align-items: center; + color: cv.getVar("breadcrumb-item-color"); + display: flex; + justify-content: center; + padding: cv.getVar("breadcrumb-item-padding-vertical") + cv.getVar("breadcrumb-item-padding-horizontal"); + + &:hover { + color: cv.getVar("breadcrumb-item-hover-color"); + } + } + + li { + align-items: center; + display: flex; + + &:first-child a { + padding-inline-start: 0; + } + + &.#{iv.$class-prefix}is-active { + a { + color: cv.getVar("breadcrumb-item-active-color"); + cursor: default; + pointer-events: none; + } + } + + & + li::before { + color: cv.getVar("breadcrumb-item-separator-color"); + content: "/"; + } + } + + ul, + ol { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + } + + .#{iv.$class-prefix}icon { + &:first-child { + margin-inline-end: 0.5em; + } + + &:last-child { + margin-inline-start: 0.5em; + } + } + + // Alignment + &.#{iv.$class-prefix}is-centered { + ol, + ul { + justify-content: center; + } + } + + &.#{iv.$class-prefix}is-right { + ol, + ul { + justify-content: flex-end; + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } + + // Styles + &.#{iv.$class-prefix}has-arrow-separator { + li + li::before { + content: "→"; + } + } + + &.#{iv.$class-prefix}has-bullet-separator { + li + li::before { + content: "•"; + } + } + + &.#{iv.$class-prefix}has-dot-separator { + li + li::before { + content: "·"; + } + } + + &.#{iv.$class-prefix}has-succeeds-separator { + li + li::before { + content: "≻"; + } + } +} diff --git a/web/assets/css/sass/components/card.scss b/web/assets/css/sass/components/card.scss new file mode 100644 index 0000000..0b3b2c5 --- /dev/null +++ b/web/assets/css/sass/components/card.scss @@ -0,0 +1,162 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$card-color: cv.getVar("text") !default; +$card-background-color: cv.getVar("scheme-main") !default; +$card-shadow: cv.getVar("shadow") !default; +$card-radius: 0.75rem !default; + +$card-header-background-color: transparent !default; +$card-header-color: cv.getVar("text-strong") !default; +$card-header-padding: 0.75rem 1rem !default; +$card-header-shadow: 0 0.125em 0.25em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.1 + ) !default; +$card-header-weight: cv.getVar("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 cv.getVar("border-weak") !default; +$card-footer-padding: 0.75rem !default; + +$card-media-margin: cv.getVar("block-spacing") !default; + +.#{iv.$class-prefix}card { + @include cv.register-vars( + ( + "card-color": #{$card-color}, + "card-background-color": #{$card-background-color}, + "card-shadow": #{$card-shadow}, + "card-radius": #{$card-radius}, + "card-header-background-color": #{$card-header-background-color}, + "card-header-color": #{$card-header-color}, + "card-header-padding": #{$card-header-padding}, + "card-header-shadow": #{$card-header-shadow}, + "card-header-weight": #{$card-header-weight}, + "card-content-background-color": #{$card-content-background-color}, + "card-content-padding": #{$card-content-padding}, + "card-footer-background-color": #{$card-footer-background-color}, + "card-footer-border-top": #{$card-footer-border-top}, + "card-footer-padding": #{$card-footer-padding}, + "card-media-margin": #{$card-media-margin}, + ) + ); +} + +.#{iv.$class-prefix}card { + @extend %block; + background-color: cv.getVar("card-background-color"); + border-radius: cv.getVar("card-radius"); + box-shadow: cv.getVar("card-shadow"); + color: cv.getVar("card-color"); + max-width: 100%; + position: relative; +} + +%card-item { + &:first-child { + border-start-start-radius: cv.getVar("card-radius"); + border-start-end-radius: cv.getVar("card-radius"); + } + + &:last-child { + border-end-start-radius: cv.getVar("card-radius"); + border-end-end-radius: cv.getVar("card-radius"); + } +} + +.#{iv.$class-prefix}card-header { + @extend %card-item; + background-color: cv.getVar("card-header-background-color"); + align-items: stretch; + box-shadow: cv.getVar("card-header-shadow"); + display: flex; +} + +.#{iv.$class-prefix}card-header-title { + align-items: center; + color: cv.getVar("card-header-color"); + display: flex; + flex-grow: 1; + font-weight: cv.getVar("card-header-weight"); + padding: cv.getVar("card-header-padding"); + + &.#{iv.$class-prefix}is-centered { + justify-content: center; + } +} + +.#{iv.$class-prefix}card-header-icon { + @include mx.reset; + + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: cv.getVar("card-header-padding"); +} + +.#{iv.$class-prefix}card-image { + display: block; + position: relative; + + &:first-child { + img { + border-start-start-radius: cv.getVar("card-radius"); + border-start-end-radius: cv.getVar("card-radius"); + } + } + + &:last-child { + img { + border-end-start-radius: cv.getVar("card-radius"); + border-end-end-radius: cv.getVar("card-radius"); + } + } +} + +.#{iv.$class-prefix}card-content { + @extend %card-item; + + background-color: cv.getVar("card-content-background-color"); + padding: cv.getVar("card-content-padding"); +} + +.#{iv.$class-prefix}card-footer { + @extend %card-item; + + background-color: cv.getVar("card-footer-background-color"); + border-top: cv.getVar("card-footer-border-top"); + align-items: stretch; + display: flex; +} + +.#{iv.$class-prefix}card-footer-item { + align-items: center; + display: flex; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + justify-content: center; + padding: cv.getVar("card-footer-padding"); + + &:not(:last-child) { + border-inline-end: cv.getVar("card-footer-border-top"); + } +} + +// Combinations + +.#{iv.$class-prefix}card { + .#{iv.$class-prefix}media:not(:last-child) { + margin-bottom: cv.getVar("card-media-margin"); + } +} diff --git a/web/assets/css/sass/components/dropdown.scss b/web/assets/css/sass/components/dropdown.scss new file mode 100644 index 0000000..415728b --- /dev/null +++ b/web/assets/css/sass/components/dropdown.scss @@ -0,0 +1,188 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$dropdown-menu-min-width: 12rem !default; + +$dropdown-content-background-color: cv.getVar("scheme-main") !default; +$dropdown-content-offset: 0.25rem !default; +$dropdown-content-padding-bottom: 0.5rem !default; +$dropdown-content-padding-top: 0.5rem !default; +$dropdown-content-radius: cv.getVar("radius") !default; +$dropdown-content-shadow: cv.getVar("shadow") !default; +$dropdown-content-z: 20 !default; + +$dropdown-item-h: cv.getVar("scheme-h"); +$dropdown-item-s: cv.getVar("scheme-s"); +$dropdown-item-l: cv.getVar("scheme-main-l"); +$dropdown-item-background-l: cv.getVar("scheme-main-l"); +$dropdown-item-background-l-delta: 0%; +$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); +$dropdown-item-active-background-l-delta: cv.getVar( + "active-background-l-delta" +); +$dropdown-item-color-l: cv.getVar("text-strong-l"); +$dropdown-item-selected-h: cv.getVar("link-h"); +$dropdown-item-selected-s: cv.getVar("link-s"); +$dropdown-item-selected-l: cv.getVar("link-l"); +$dropdown-item-selected-background-l: cv.getVar("link-l"); +$dropdown-item-selected-color-l: cv.getVar("link-invert-l"); + +$dropdown-divider-background-color: cv.getVar("border-weak") !default; + +.#{iv.$class-prefix}dropdown { + // prettier-ignore-start + @include cv.register-vars( + ( + "dropdown-menu-min-width": #{$dropdown-menu-min-width}, + "dropdown-content-background-color": #{$dropdown-content-background-color}, + "dropdown-content-offset": #{$dropdown-content-offset}, + "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom}, + "dropdown-content-padding-top": #{$dropdown-content-padding-top}, + "dropdown-content-radius": #{$dropdown-content-radius}, + "dropdown-content-shadow": #{$dropdown-content-shadow}, + "dropdown-content-z": #{$dropdown-content-z}, + "dropdown-item-h": #{$dropdown-item-h}, + "dropdown-item-s": #{$dropdown-item-s}, + "dropdown-item-l": #{$dropdown-item-l}, + "dropdown-item-background-l": #{$dropdown-item-background-l}, + "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta}, + "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta}, + "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta}, + "dropdown-item-color-l": #{$dropdown-item-color-l}, + "dropdown-item-selected-h": #{$dropdown-item-selected-h}, + "dropdown-item-selected-s": #{$dropdown-item-selected-s}, + "dropdown-item-selected-l": #{$dropdown-item-selected-l}, + "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l}, + "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l}, + "dropdown-divider-background-color": #{$dropdown-divider-background-color}, + ) + ); + // prettier-ignore-end +} + +.#{iv.$class-prefix}dropdown { + display: inline-flex; + position: relative; + vertical-align: top; + + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-hoverable:hover { + .#{iv.$class-prefix}dropdown-menu { + display: block; + } + } + + &.#{iv.$class-prefix}is-right { + .#{iv.$class-prefix}dropdown-menu { + left: auto; + right: 0; + } + } + + &.#{iv.$class-prefix}is-up { + .#{iv.$class-prefix}dropdown-menu { + bottom: 100%; + padding-bottom: cv.getVar("dropdown-content-offset"); + padding-top: initial; + top: auto; + } + } +} + +.#{iv.$class-prefix}dropdown-menu { + display: none; + @include mx.ltr-position(0, false); + min-width: cv.getVar("dropdown-menu-min-width"); + padding-top: cv.getVar("dropdown-content-offset"); + position: absolute; + top: 100%; + z-index: cv.getVar("dropdown-content-z"); +} + +.#{iv.$class-prefix}dropdown-content { + background-color: cv.getVar("dropdown-content-background-color"); + border-radius: cv.getVar("dropdown-content-radius"); + box-shadow: cv.getVar("dropdown-content-shadow"); + padding-bottom: cv.getVar("dropdown-content-padding-bottom"); + padding-top: cv.getVar("dropdown-content-padding-top"); +} + +.#{iv.$class-prefix}dropdown-item { + color: hsl( + #{cv.getVar("dropdown-item-h")}, + #{cv.getVar("dropdown-item-s")}, + #{cv.getVar("dropdown-item-color-l")} + ); + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; +} + +a.#{iv.$class-prefix}dropdown-item, +button.#{iv.$class-prefix}dropdown-item { + background-color: hsl( + #{cv.getVar("dropdown-item-h")}, + #{cv.getVar("dropdown-item-s")}, + calc( + #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar( + "dropdown-item-background-l-delta" + )} + ) + ); + padding-inline-end: 3rem; + text-align: inherit; + white-space: nowrap; + width: 100%; + + &:hover { + @include cv.register-vars( + ( + "dropdown-item-background-l-delta": #{cv.getVar( + "dropdown-item-hover-background-l-delta" + )}, + "dropdown-item-border-l-delta": #{cv.getVar( + "dropdown-item-hover-border-l-delta" + )}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "dropdown-item-background-l-delta": #{cv.getVar( + "dropdown-item-active-background-l-delta" + )}, + "dropdown-item-border-l-delta": #{cv.getVar( + "dropdown-item-active-border-l-delta" + )}, + ) + ); + } + + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-selected { + @include cv.register-vars( + ( + "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")}, + "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")}, + "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")}, + "dropdown-item-background-l": #{cv.getVar( + "dropdown-item-selected-background-l" + )}, + "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")}, + ) + ); + } +} + +.#{iv.$class-prefix}dropdown-divider { + background-color: cv.getVar("dropdown-divider-background-color"); + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; +} diff --git a/web/assets/css/sass/components/menu.scss b/web/assets/css/sass/components/menu.scss new file mode 100644 index 0000000..2bee7d5 --- /dev/null +++ b/web/assets/css/sass/components/menu.scss @@ -0,0 +1,165 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$menu-item-h: cv.getVar("scheme-h"); +$menu-item-s: cv.getVar("scheme-s"); +$menu-item-l: cv.getVar("scheme-main-l"); +$menu-item-background-l: cv.getVar("scheme-main-l"); +$menu-item-background-l-delta: 0%; +$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); +$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta"); +$menu-item-color-l: cv.getVar("text-l"); +$menu-item-radius: cv.getVar("radius-small") !default; +$menu-item-selected-h: cv.getVar("link-h"); +$menu-item-selected-s: cv.getVar("link-s"); +$menu-item-selected-l: cv.getVar("link-l"); +$menu-item-selected-background-l: cv.getVar("link-l"); +$menu-item-selected-color-l: cv.getVar("link-invert-l"); + +$menu-list-border-left: 1px solid cv.getVar("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: cv.getVar("text-weak") !default; +$menu-label-font-size: 0.75em !default; +$menu-label-letter-spacing: 0.1em !default; +$menu-label-spacing: 1em !default; + +.#{iv.$class-prefix}menu { + @include cv.register-vars( + ( + "menu-item-h": #{$menu-item-h}, + "menu-item-s": #{$menu-item-s}, + "menu-item-l": #{$menu-item-l}, + "menu-item-background-l": #{$menu-item-background-l}, + "menu-item-background-l-delta": #{$menu-item-background-l-delta}, + "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta}, + "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta}, + "menu-item-color-l": #{$menu-item-color-l}, + "menu-item-radius": #{$menu-item-radius}, + "menu-item-selected-h": #{$menu-item-selected-h}, + "menu-item-selected-s": #{$menu-item-selected-s}, + "menu-item-selected-l": #{$menu-item-selected-l}, + "menu-item-selected-background-l": #{$menu-item-selected-background-l}, + "menu-item-selected-color-l": #{$menu-item-selected-color-l}, + "menu-list-border-left": #{$menu-list-border-left}, + "menu-list-line-height": #{$menu-list-line-height}, + "menu-list-link-padding": #{$menu-list-link-padding}, + "menu-nested-list-margin": #{$menu-nested-list-margin}, + "menu-nested-list-padding-left": #{$menu-nested-list-padding-left}, + "menu-label-color": #{$menu-label-color}, + "menu-label-font-size": #{$menu-label-font-size}, + "menu-label-letter-spacing": #{$menu-label-letter-spacing}, + "menu-label-spacing": #{$menu-label-spacing}, + ) + ); +} + +.#{iv.$class-prefix}menu { + font-size: cv.getVar("size-normal"); + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } +} + +.#{iv.$class-prefix}menu-list { + line-height: cv.getVar("menu-list-line-height"); + + a, + button, + .#{iv.$class-prefix}menu-item { + @extend %reset; + background-color: hsl( + #{cv.getVar("menu-item-h")}, + #{cv.getVar("menu-item-s")}, + calc( + #{cv.getVar("menu-item-background-l")} + #{cv.getVar( + "menu-item-background-l-delta" + )} + ) + ); + border-radius: cv.getVar("menu-item-radius"); + color: hsl( + #{cv.getVar("menu-item-h")}, + #{cv.getVar("menu-item-s")}, + #{cv.getVar("menu-item-color-l")} + ); + display: block; + padding: cv.getVar("menu-list-link-padding"); + text-align: left; + width: 100%; + + &:hover { + @include cv.register-vars( + ( + "menu-item-background-l-delta": #{cv.getVar( + "menu-item-hover-background-l-delta" + )}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "menu-item-background-l-delta": #{cv.getVar( + "menu-item-active-background-l-delta" + )}, + ) + ); + } + + // Modifiers + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-selected { + @include cv.register-vars( + ( + "menu-item-h": #{cv.getVar("menu-item-selected-h")}, + "menu-item-s": #{cv.getVar("menu-item-selected-s")}, + "menu-item-l": #{cv.getVar("menu-item-selected-l")}, + "menu-item-background-l": #{cv.getVar( + "menu-item-selected-background-l" + )}, + "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")}, + ) + ); + } + } + + li { + ul { + border-inline-start: cv.getVar("menu-list-border-left"); + margin: cv.getVar("menu-nested-list-margin"); + padding-inline-start: cv.getVar("menu-nested-list-padding-left"); + } + } +} + +.#{iv.$class-prefix}menu-label { + color: cv.getVar("menu-label-color"); + font-size: cv.getVar("menu-label-font-size"); + letter-spacing: cv.getVar("menu-label-letter-spacing"); + text-transform: uppercase; + + &:not(:first-child) { + margin-top: cv.getVar("menu-label-spacing"); + } + + &:not(:last-child) { + margin-bottom: cv.getVar("menu-label-spacing"); + } +} diff --git a/web/assets/css/sass/components/message.scss b/web/assets/css/sass/components/message.scss new file mode 100644 index 0000000..03196fe --- /dev/null +++ b/web/assets/css/sass/components/message.scss @@ -0,0 +1,183 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$message-h: cv.getVar("scheme-h"); +$message-s: cv.getVar("scheme-s"); +$message-background-l: cv.getVar("background-l"); +$message-border-l: cv.getVar("border-l"); +$message-border-l-delta: -20% !default; +$message-border-style: solid; +$message-border-width: 0.25em; +$message-color-l: cv.getVar("text-l"); +$message-header-background-l: cv.getVar("dark-l"); +$message-header-color-l: cv.getVar("text-dark-invert-l"); +$message-radius: cv.getVar("radius") !default; + +$message-header-weight: cv.getVar("weight-semibold") !default; +$message-header-padding: 1em 1.25em !default; +$message-header-radius: cv.getVar("radius") !default; + +$message-body-border-width: 0 0 0 4px !default; +$message-body-color: cv.getVar("text") !default; +$message-body-padding: 1.25em 1.5em !default; +$message-body-radius: cv.getVar("radius-small") !default; + +$message-body-pre-code-background-color: transparent !default; + +$message-header-body-border-width: 0 !default; +$message-colors: dv.$colors !default; + +.#{iv.$class-prefix}message { + @include cv.register-vars( + ( + "message-border-l-delta": #{$message-border-l-delta}, + "message-radius": #{$message-radius}, + "message-header-weight": #{$message-header-weight}, + "message-header-padding": #{$message-header-padding}, + "message-header-radius": #{$message-header-radius}, + "message-body-border-width": #{$message-body-border-width}, + "message-body-color": #{$message-body-color}, + "message-body-padding": #{$message-body-padding}, + "message-body-radius": #{$message-body-radius}, + "message-body-pre-code-background-color": #{$message-body-pre-code-background-color}, + "message-header-body-border-width": #{$message-header-body-border-width}, + "message-h": #{$message-h}, + "message-s": #{$message-s}, + "message-background-l": #{$message-background-l}, + "message-border-l": #{$message-border-l}, + "message-border-style": #{$message-border-style}, + "message-border-width": #{$message-border-width}, + "message-color-l": #{$message-color-l}, + "message-header-background-l": #{$message-header-background-l}, + "message-header-color-l": #{$message-header-color-l}, + ) + ); +} + +.#{iv.$class-prefix}message { + @extend %block; + border-radius: cv.getVar("message-radius"); + color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-color-l")} + ); + font-size: cv.getVar("size-normal"); + + strong { + color: currentColor; + } + + a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not( + .#{iv.$class-prefix}dropdown-item + ) { + color: currentColor; + text-decoration: underline; + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } + + // Colors + @each $name, $components in $message-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "message-h": #{cv.getVar($name, "", "-h")}, + "message-s": #{cv.getVar($name, "", "-s")}, + "message-border-l": + calc( + #{cv.getVar($name, "", "-l")} + #{cv.getVar( + "message-border-l-delta" + )} + ), + "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")}, + "message-header-background-l": #{cv.getVar($name, "", "-l")}, + "message-header-color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + } + } +} + +.#{iv.$class-prefix}message-header { + align-items: center; + background-color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-header-background-l")} + ); + border-start-start-radius: cv.getVar("message-header-radius"); + border-start-end-radius: cv.getVar("message-header-radius"); + color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-header-color-l")} + ); + display: flex; + font-weight: cv.getVar("message-header-weight"); + justify-content: space-between; + line-height: 1.25; + padding: cv.getVar("message-header-padding"); + position: relative; + + .#{iv.$class-prefix}delete { + flex-grow: 0; + flex-shrink: 0; + margin-inline-start: 0.75em; + } + + & + .#{iv.$class-prefix}message-body { + border-width: cv.getVar("message-header-body-border-width"); + border-start-start-radius: 0; + border-start-end-radius: 0; + } +} + +.#{iv.$class-prefix}message-body { + background-color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-background-l")} + ); + border-inline-start-color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-border-l")} + ); + border-inline-start-style: #{cv.getVar("message-border-style")}; + border-inline-start-width: #{cv.getVar("message-border-width")}; + border-radius: cv.getVar("message-body-radius"); + padding: cv.getVar("message-body-padding"); + + code, + pre { + background-color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-header-color-l")} + ); + color: hsl( + #{cv.getVar("message-h")}, + #{cv.getVar("message-s")}, + #{cv.getVar("message-header-background-l")} + ); + } + + pre code { + background-color: cv.getVar("message-body-pre-code-background-color"); + } +} diff --git a/web/assets/css/sass/components/modal.scss b/web/assets/css/sass/components/modal.scss new file mode 100644 index 0000000..0a0aa59 --- /dev/null +++ b/web/assets/css/sass/components/modal.scss @@ -0,0 +1,164 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$modal-z: 40 !default; + +$modal-background-background-color: hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.86 +) !default; + +$modal-content-width: 40rem !default; +$modal-content-margin-mobile: 1.25rem !default; +$modal-content-spacing-mobile: 10rem !default; +$modal-content-spacing-tablet: 2.5rem !default; + +$modal-close-dimensions: 2.5rem !default; +$modal-close-right: 1.25rem !default; +$modal-close-top: 1.25rem !default; + +$modal-card-spacing: 2.5rem !default; + +$modal-card-head-background-color: cv.getVar("scheme-main") !default; +$modal-card-head-padding: 2rem !default; +$modal-card-head-radius: cv.getVar("radius-large") !default; + +$modal-card-title-color: cv.getVar("text-strong") !default; +$modal-card-title-line-height: 1 !default; +$modal-card-title-size: cv.getVar("size-4") !default; + +$modal-card-foot-background-color: cv.getVar("scheme-main-bis") !default; +$modal-card-foot-radius: cv.getVar("radius-large") !default; + +$modal-card-body-background-color: cv.getVar("scheme-main") !default; +$modal-card-body-padding: 2rem !default; + +$modal-breakpoint: iv.$tablet !default; + +.#{iv.$class-prefix}modal { + @include cv.register-vars( + ( + "modal-z": #{$modal-z}, + "modal-background-background-color": #{$modal-background-background-color}, + "modal-content-width": #{$modal-content-width}, + "modal-content-margin-mobile": #{$modal-content-margin-mobile}, + "modal-content-spacing-mobile": #{$modal-content-spacing-mobile}, + "modal-content-spacing-tablet": #{$modal-content-spacing-tablet}, + "modal-close-dimensions": #{$modal-close-dimensions}, + "modal-close-right": #{$modal-close-right}, + "modal-close-top": #{$modal-close-top}, + "modal-card-spacing": #{$modal-card-spacing}, + "modal-card-head-background-color": #{$modal-card-head-background-color}, + "modal-card-head-padding": #{$modal-card-head-padding}, + "modal-card-head-radius": #{$modal-card-head-radius}, + "modal-card-title-color": #{$modal-card-title-color}, + "modal-card-title-line-height": #{$modal-card-title-line-height}, + "modal-card-title-size": #{$modal-card-title-size}, + "modal-card-foot-background-color": #{$modal-card-foot-background-color}, + "modal-card-foot-radius": #{$modal-card-foot-radius}, + "modal-card-body-background-color": #{$modal-card-body-background-color}, + "modal-card-body-padding": #{$modal-card-body-padding}, + ) + ); +} + +.#{iv.$class-prefix}modal { + @extend %overlay; + + align-items: center; + display: none; + flex-direction: column; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: cv.getVar("modal-z"); + + // Modifiers + &.#{iv.$class-prefix}is-active { + display: flex; + } +} + +.#{iv.$class-prefix}modal-background { + @extend %overlay; + background-color: cv.getVar("modal-background-background-color"); +} + +.#{iv.$class-prefix}modal-content, +.#{iv.$class-prefix}modal-card { + margin: 0 cv.getVar("modal-content-margin-mobile"); + max-height: calc(100vh - #{cv.getVar("modal-content-spacing-mobile")}); + overflow: auto; + position: relative; + width: 100%; + + // Responsiveness + @include mx.from($modal-breakpoint) { + margin: 0 auto; + max-height: calc(100vh - #{cv.getVar("modal-content-spacing-tablet")}); + width: cv.getVar("modal-content-width"); + } +} + +.#{iv.$class-prefix}modal-close { + @extend %delete; + background: none; + height: cv.getVar("modal-close-dimensions"); + inset-inline-end: cv.getVar("modal-close-right"); + position: fixed; + top: cv.getVar("modal-close-top"); + width: cv.getVar("modal-close-dimensions"); +} + +.#{iv.$class-prefix}modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - #{cv.getVar("modal-card-spacing")}); + overflow: hidden; + overflow-y: visible; +} + +.#{iv.$class-prefix}modal-card-head, +.#{iv.$class-prefix}modal-card-foot { + align-items: center; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: cv.getVar("modal-card-head-padding"); + position: relative; +} + +.#{iv.$class-prefix}modal-card-head { + background-color: cv.getVar("modal-card-head-background-color"); + border-start-start-radius: cv.getVar("modal-card-head-radius"); + border-start-end-radius: cv.getVar("modal-card-head-radius"); + box-shadow: cv.getVar("shadow"); +} + +.#{iv.$class-prefix}modal-card-title { + color: cv.getVar("modal-card-title-color"); + flex-grow: 1; + flex-shrink: 0; + font-size: cv.getVar("modal-card-title-size"); + line-height: cv.getVar("modal-card-title-line-height"); +} + +.#{iv.$class-prefix}modal-card-foot { + background-color: cv.getVar("modal-card-foot-background-color"); + border-end-start-radius: cv.getVar("modal-card-foot-radius"); + border-end-end-radius: cv.getVar("modal-card-foot-radius"); +} + +.#{iv.$class-prefix}modal-card-body { + @include mx.overflow-touch; + background-color: cv.getVar("modal-card-body-background-color"); + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: cv.getVar("modal-card-body-padding"); +} diff --git a/web/assets/css/sass/components/navbar.scss b/web/assets/css/sass/components/navbar.scss new file mode 100644 index 0000000..c755aff --- /dev/null +++ b/web/assets/css/sass/components/navbar.scss @@ -0,0 +1,788 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$navbar-h: cv.getVar("scheme-h"); +$navbar-s: cv.getVar("scheme-s"); +$navbar-l: cv.getVar("scheme-main-l"); +$navbar-background-color: cv.getVar("scheme-main") !default; +$navbar-box-shadow-size: 0 0.125em 0 0 !default; +$navbar-box-shadow-color: cv.getVar("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-background-a: 0; +$navbar-item-background-l: cv.getVar("scheme-main-l"); +$navbar-item-background-l-delta: 0%; +$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta"); +$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta"); +$navbar-item-color-l: cv.getVar("text-l"); +$navbar-item-selected-h: cv.getVar("link-h"); +$navbar-item-selected-s: cv.getVar("link-s"); +$navbar-item-selected-l: cv.getVar("link-l"); +$navbar-item-selected-background-l: cv.getVar("link-l"); +$navbar-item-selected-color-l: cv.getVar("link-invert-l"); +$navbar-item-img-max-height: 1.75rem !default; + +$navbar-dropdown-item-h: cv.getVar("scheme-h"); +$navbar-dropdown-item-s: cv.getVar("scheme-s"); +$navbar-dropdown-item-l: cv.getVar("scheme-main-l"); +$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l"); +$navbar-dropdown-item-color-l: cv.getVar("text-l"); + +$navbar-burger-color: cv.getVar("navbar-item-color") !default; + +$navbar-tab-hover-background-color: transparent !default; +$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default; +$navbar-tab-active-color: cv.getVar("link") !default; +$navbar-tab-active-background-color: transparent !default; +$navbar-tab-active-border-bottom-color: cv.getVar("link") !default; +$navbar-tab-active-border-bottom-style: solid !default; +$navbar-tab-active-border-bottom-width: 0.1875em !default; + +$navbar-dropdown-background-color: cv.getVar("scheme-main") !default; +$navbar-dropdown-border-l: cv.getVar("border-l") !default; +$navbar-dropdown-border-color: hsl( + cv.getVar("navbar-h"), + cv.getVar("navbar-s"), + cv.getVar("navbar-dropdown-border-l") +) !default; +$navbar-dropdown-border-style: solid !default; +$navbar-dropdown-border-width: 0.125em !default; +$navbar-dropdown-offset: -0.25em !default; +$navbar-dropdown-arrow: cv.getVar("link") !default; +$navbar-dropdown-radius: cv.getVar("radius-large") !default; +$navbar-dropdown-z: 20 !default; + +$navbar-dropdown-boxed-radius: cv.getVar("radius-large") !default; +$navbar-dropdown-boxed-shadow: + 0 0.5em 0.5em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.1 + ), + 0 0 0 1px + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.1 + ) !default; + +$navbar-divider-background-l: cv.getVar("background-l") !default; +$navbar-divider-height: 0.125em !default; + +$navbar-bottom-box-shadow-size: 0 -0.125em 0 0 !default; + +$navbar-breakpoint: iv.$desktop !default; + +$navbar-colors: dv.$colors !default; + +@mixin navbar-fixed { + left: 0; + position: fixed; + right: 0; + z-index: cv.getVar("navbar-fixed-z"); +} + +:root { + @include cv.register-vars( + ( + "navbar-height": #{$navbar-height}, + ) + ); +} + +.#{iv.$class-prefix}navbar { + @include cv.register-vars( + ( + "navbar-h": #{$navbar-h}, + "navbar-s": #{$navbar-s}, + "navbar-l": #{$navbar-l}, + "navbar-background-color": #{$navbar-background-color}, + "navbar-box-shadow-size": #{$navbar-box-shadow-size}, + "navbar-box-shadow-color": #{$navbar-box-shadow-color}, + "navbar-padding-vertical": #{$navbar-padding-vertical}, + "navbar-padding-horizontal": #{$navbar-padding-horizontal}, + "navbar-z": #{$navbar-z}, + "navbar-fixed-z": #{$navbar-fixed-z}, + "navbar-item-background-a": #{$navbar-item-background-a}, + "navbar-item-background-l": #{$navbar-item-background-l}, + "navbar-item-background-l-delta": #{$navbar-item-background-l-delta}, + "navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta}, + "navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta}, + "navbar-item-color-l": #{$navbar-item-color-l}, + "navbar-item-selected-h": #{$navbar-item-selected-h}, + "navbar-item-selected-s": #{$navbar-item-selected-s}, + "navbar-item-selected-l": #{$navbar-item-selected-l}, + "navbar-item-selected-background-l": #{$navbar-item-selected-background-l}, + "navbar-item-selected-color-l": #{$navbar-item-selected-color-l}, + "navbar-item-img-max-height": #{$navbar-item-img-max-height}, + "navbar-burger-color": #{$navbar-burger-color}, + "navbar-tab-hover-background-color": #{$navbar-tab-hover-background-color}, + "navbar-tab-hover-border-bottom-color": #{$navbar-tab-hover-border-bottom-color}, + "navbar-tab-active-color": #{$navbar-tab-active-color}, + "navbar-tab-active-background-color": #{$navbar-tab-active-background-color}, + "navbar-tab-active-border-bottom-color": #{$navbar-tab-active-border-bottom-color}, + "navbar-tab-active-border-bottom-style": #{$navbar-tab-active-border-bottom-style}, + "navbar-tab-active-border-bottom-width": #{$navbar-tab-active-border-bottom-width}, + "navbar-dropdown-background-color": #{$navbar-dropdown-background-color}, + "navbar-dropdown-border-l": #{$navbar-dropdown-border-l}, + "navbar-dropdown-border-color": #{$navbar-dropdown-border-color}, + "navbar-dropdown-border-style": #{$navbar-dropdown-border-style}, + "navbar-dropdown-border-width": #{$navbar-dropdown-border-width}, + "navbar-dropdown-offset": #{$navbar-dropdown-offset}, + "navbar-dropdown-arrow": #{$navbar-dropdown-arrow}, + "navbar-dropdown-radius": #{$navbar-dropdown-radius}, + "navbar-dropdown-z": #{$navbar-dropdown-z}, + "navbar-dropdown-boxed-radius": #{$navbar-dropdown-boxed-radius}, + "navbar-dropdown-boxed-shadow": #{$navbar-dropdown-boxed-shadow}, + "navbar-dropdown-item-h": #{$navbar-dropdown-item-h}, + "navbar-dropdown-item-s": #{$navbar-dropdown-item-s}, + "navbar-dropdown-item-l": #{$navbar-dropdown-item-l}, + "navbar-dropdown-item-background-l": #{$navbar-dropdown-item-background-l}, + "navbar-dropdown-item-color-l": #{$navbar-dropdown-item-color-l}, + "navbar-divider-background-l": #{$navbar-divider-background-l}, + "navbar-divider-height": #{$navbar-divider-height}, + "navbar-bottom-box-shadow-size": #{$navbar-bottom-box-shadow-size}, + ) + ); +} + +.#{iv.$class-prefix}navbar { + background-color: cv.getVar("navbar-background-color"); + min-height: cv.getVar("navbar-height"); + position: relative; + z-index: cv.getVar("navbar-z"); + + @each $name, $pair in $navbar-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "navbar-h": #{cv.getVar($name, "", "-h")}, + "navbar-s": #{cv.getVar($name, "", "-s")}, + "navbar-l": #{cv.getVar($name, "", "-l")}, + "burger-h": #{cv.getVar($name, "", "-h")}, + "burger-s": #{cv.getVar($name, "", "-s")}, + "burger-l": #{cv.getVar($name, "", "-invert-l")}, + "navbar-background-color": #{cv.getVar($name)}, + "navbar-item-background-l": #{cv.getVar($name, "", "-l")}, + "navbar-item-color-l": #{cv.getVar($name, "", "-invert-l")}, + "navbar-item-selected-h": #{cv.getVar($name, "", "-h")}, + "navbar-item-selected-s": #{cv.getVar($name, "", "-s")}, + "navbar-item-selected-l": #{cv.getVar($name, "", "-l")}, + "navbar-item-selected-background-l": #{cv.getVar($name, "", "-l")}, + "navbar-item-selected-color-l": #{cv.getVar($name, "", "-invert-l")}, + "navbar-dropdown-arrow": #{cv.getVar($name, "", "-invert-l")}, + "navbar-dropdown-background-color": + hsl( + #{cv.getVar($name, "", "-h")}, + #{cv.getVar($name, "", "-s")}, + #{cv.getVar("navbar-dropdown-item-background-l")} + ), + "navbar-dropdown-item-h": #{cv.getVar($name, "", "-h")}, + "navbar-dropdown-item-s": #{cv.getVar($name, "", "-s")}, + ) + ); + } + } + + & > .#{iv.$class-prefix}container { + align-items: stretch; + display: flex; + min-height: cv.getVar("navbar-height"); + width: 100%; + } + + &.#{iv.$class-prefix}has-shadow { + box-shadow: cv.getVar("navbar-box-shadow-size") + cv.getVar("navbar-box-shadow-color"); + } + + &.#{iv.$class-prefix}is-fixed-bottom, + &.#{iv.$class-prefix}is-fixed-top { + @include navbar-fixed; + } + + &.#{iv.$class-prefix}is-fixed-bottom { + bottom: 0; + + &.#{iv.$class-prefix}has-shadow { + box-shadow: cv.getVar("navbar-bottom-box-shadow-size") + cv.getVar("navbar-box-shadow-color"); + } + } + + &.#{iv.$class-prefix}is-fixed-top { + top: 0; + } +} + +html, +body { + &.#{iv.$class-prefix}has-navbar-fixed-top { + padding-top: cv.getVar("navbar-height"); + } + + &.#{iv.$class-prefix}has-navbar-fixed-bottom { + padding-bottom: cv.getVar("navbar-height"); + } +} + +.#{iv.$class-prefix}navbar-brand, +.#{iv.$class-prefix}navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: cv.getVar("navbar-height"); +} + +.#{iv.$class-prefix}navbar-tabs { + @include mx.overflow-touch; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; +} + +.#{iv.$class-prefix}navbar-burger { + @extend %reset; + @include mx.burger(2.5rem); + align-self: center; + margin-inline-start: auto; + margin-inline-end: 0.375rem; +} + +.#{iv.$class-prefix}navbar-menu { + display: none; +} + +.#{iv.$class-prefix}navbar-item, +.#{iv.$class-prefix}navbar-link { + color: hsl( + #{cv.getVar("navbar-h")}, + #{cv.getVar("navbar-s")}, + #{cv.getVar("navbar-item-color-l")} + ); + display: block; + line-height: 1.5; + padding: 0.5rem 0.75rem; + position: relative; + + .#{iv.$class-prefix}icon { + &:only-child { + margin-left: -0.25rem; + margin-right: -0.25rem; + } + } +} + +a.#{iv.$class-prefix}navbar-item, +.#{iv.$class-prefix}navbar-link { + background-color: hsla( + #{cv.getVar("navbar-h")}, + #{cv.getVar("navbar-s")}, + calc( + #{cv.getVar("navbar-item-background-l")} + #{cv.getVar( + "navbar-item-background-l-delta" + )} + ), + #{cv.getVar("navbar-item-background-a")} + ); + cursor: pointer; + + &:focus, + &:focus-within, + &:hover { + @include cv.register-vars( + ( + "navbar-item-background-l-delta": #{cv.getVar( + "navbar-item-hover-background-l-delta" + )}, + "navbar-item-background-a": 1, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "navbar-item-background-l-delta": #{cv.getVar( + "navbar-item-active-background-l-delta" + )}, + "navbar-item-background-a": 1, + ) + ); + } + + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-selected { + @include cv.register-vars( + ( + "navbar-h": #{cv.getVar("navbar-item-selected-h")}, + "navbar-s": #{cv.getVar("navbar-item-selected-s")}, + "navbar-l": #{cv.getVar("navbar-item-selected-l")}, + "navbar-item-background-l": #{cv.getVar( + "navbar-item-selected-background-l" + )}, + "navbar-item-background-a": 1, + "navbar-item-color-l": #{cv.getVar("navbar-item-selected-color-l")}, + ) + ); + } +} + +.#{iv.$class-prefix}navbar-item { + flex-grow: 0; + flex-shrink: 0; + + img, + svg { + max-height: cv.getVar("navbar-item-img-max-height"); + } + + &.#{iv.$class-prefix}has-dropdown { + padding: 0; + } + + &.#{iv.$class-prefix}is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + + &.#{iv.$class-prefix}is-tab { + border-bottom: 1px solid transparent; + min-height: cv.getVar("navbar-height"); + padding-bottom: calc(0.5rem - 1px); + + &:focus, + &:hover { + background-color: cv.getVar("navbar-tab-hover-background-color"); + border-bottom-color: cv.getVar("navbar-tab-hover-border-bottom-color"); + } + + &.#{iv.$class-prefix}is-active { + background-color: cv.getVar("navbar-tab-active-background-color"); + border-bottom-color: cv.getVar("navbar-tab-active-border-bottom-color"); + border-bottom-style: cv.getVar("navbar-tab-active-border-bottom-style"); + border-bottom-width: cv.getVar("navbar-tab-active-border-bottom-width"); + color: cv.getVar("navbar-tab-active-color"); + padding-bottom: calc( + 0.5rem - #{cv.getVar("navbar-tab-active-border-bottom-width")} + ); + } + } +} + +.#{iv.$class-prefix}navbar-content { + flex-grow: 1; + flex-shrink: 1; +} + +.#{iv.$class-prefix}navbar-link:not(.#{iv.$class-prefix}is-arrowless) { + padding-inline-end: 2.5em; + + &::after { + @extend %arrow; + border-color: cv.getVar("navbar-dropdown-arrow"); + margin-top: -0.375em; + inset-inline-end: 1.125em; + } +} + +.#{iv.$class-prefix}navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.75rem; + padding-top: 0.5rem; + + .#{iv.$class-prefix}navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; + + &:not(.is-active, .is-selected) { + background-color: hsl( + #{cv.getVar("navbar-dropdown-item-h")}, + #{cv.getVar("navbar-dropdown-item-s")}, + calc( + #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar( + "navbar-item-background-l-delta" + )} + ) + ); + color: hsl( + #{cv.getVar("navbar-dropdown-item-h")}, + #{cv.getVar("navbar-dropdown-item-s")}, + #{cv.getVar("navbar-dropdown-item-color-l")} + ); + } + } +} + +.#{iv.$class-prefix}navbar-divider { + background-color: hsl( + #{cv.getVar("navbar-h")}, + #{cv.getVar("navbar-s")}, + #{cv.getVar("navbar-divider-background-l")} + ); + border: none; + display: none; + height: cv.getVar("navbar-divider-height"); + margin: 0.5rem 0; +} + +@include mx.until($navbar-breakpoint) { + .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container { + display: block; + } + + .#{iv.$class-prefix}navbar-brand, + .#{iv.$class-prefix}navbar-tabs { + .#{iv.$class-prefix}navbar-item { + align-items: center; + display: flex; + } + } + + .#{iv.$class-prefix}navbar-link { + &::after { + display: none; + } + } + + .#{iv.$class-prefix}navbar-menu { + background-color: cv.getVar("navbar-background-color"); + box-shadow: 0 0.5em 1em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.1 + ); + padding: 0.5rem 0; + + &.#{iv.$class-prefix}is-active { + display: block; + } + } + + // Fixed navbar + .#{iv.$class-prefix}navbar { + &.#{iv.$class-prefix}is-fixed-bottom-touch, + &.#{iv.$class-prefix}is-fixed-top-touch { + @include navbar-fixed; + } + + &.#{iv.$class-prefix}is-fixed-bottom-touch { + bottom: 0; + + &.#{iv.$class-prefix}has-shadow { + box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( + "scheme-s" + )}, #{cv.getVar("scheme-invert-l")}, 0.1); + } + } + + &.#{iv.$class-prefix}is-fixed-top-touch { + top: 0; + } + + &.#{iv.$class-prefix}is-fixed-top, + &.#{iv.$class-prefix}is-fixed-top-touch { + .#{iv.$class-prefix}navbar-menu { + @include mx.overflow-touch; + max-height: calc(100vh - #{cv.getVar("navbar-height")}); + overflow: auto; + } + } + } + + html, + body { + &.#{iv.$class-prefix}has-navbar-fixed-top-touch { + padding-top: cv.getVar("navbar-height"); + } + + &.#{iv.$class-prefix}has-navbar-fixed-bottom-touch { + padding-bottom: cv.getVar("navbar-height"); + } + } +} + +@include mx.from($navbar-breakpoint) { + .#{iv.$class-prefix}navbar, + .#{iv.$class-prefix}navbar-menu, + .#{iv.$class-prefix}navbar-start, + .#{iv.$class-prefix}navbar-end { + align-items: stretch; + display: flex; + } + + .#{iv.$class-prefix}navbar { + min-height: cv.getVar("navbar-height"); + + &.#{iv.$class-prefix}is-spaced { + padding: cv.getVar("navbar-padding-vertical") + cv.getVar("navbar-padding-horizontal"); + + .#{iv.$class-prefix}navbar-start, + .#{iv.$class-prefix}navbar-end { + align-items: center; + } + + a.#{iv.$class-prefix}navbar-item, + .#{iv.$class-prefix}navbar-link { + border-radius: cv.getVar("radius"); + } + } + + &.#{iv.$class-prefix}is-transparent { + @include cv.register-vars( + ( + "navbar-item-background-a": 0, + ) + ); + + .#{iv.$class-prefix}navbar-dropdown { + a.#{iv.$class-prefix}navbar-item { + background-color: hsl( + #{cv.getVar("navbar-h")}, + #{cv.getVar("navbar-s")}, + calc( + #{cv.getVar("navbar-item-background-l")} + #{cv.getVar( + "navbar-item-background-l-delta" + )} + ) + ); + + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-selected { + @include cv.register-vars( + ( + "navbar-h": #{cv.getVar("navbar-item-selected-h")}, + "navbar-s": #{cv.getVar("navbar-item-selected-s")}, + "navbar-l": #{cv.getVar("navbar-item-selected-l")}, + "navbar-item-background-l": #{cv.getVar( + "navbar-item-selected-background-l" + )}, + "navbar-item-color-l": #{cv.getVar( + "navbar-item-selected-color-l" + )}, + ) + ); + } + } + } + } + } + + .#{iv.$class-prefix}navbar-burger { + display: none; + } + + .#{iv.$class-prefix}navbar-item, + .#{iv.$class-prefix}navbar-link { + align-items: center; + display: flex; + } + + .#{iv.$class-prefix}navbar-item { + &.#{iv.$class-prefix}has-dropdown { + align-items: stretch; + } + + &.#{iv.$class-prefix}has-dropdown-up { + .#{iv.$class-prefix}navbar-link::after { + transform: rotate(135deg) translate(0.25em, -0.25em); + } + + .#{iv.$class-prefix}navbar-dropdown { + border-bottom-color: cv.getVar("navbar-dropdown-border-color"); + border-bottom-style: cv.getVar("navbar-dropdown-border-style"); + border-bottom-width: cv.getVar("navbar-dropdown-border-width"); + border-radius: cv.getVar("navbar-dropdown-radius") + cv.getVar("navbar-dropdown-radius") 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -0.5em 0.5em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( + "scheme-s" + )}, #{cv.getVar("scheme-invert-l")}, 0.1); + top: auto; + } + } + + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-hoverable:focus, + &.#{iv.$class-prefix}is-hoverable:focus-within, + &.#{iv.$class-prefix}is-hoverable:hover { + .#{iv.$class-prefix}navbar-dropdown { + display: block; + + .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &, + &.#{iv.$class-prefix}is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + } + } + } + + .#{iv.$class-prefix}navbar-menu { + flex-grow: 1; + flex-shrink: 0; + } + + .#{iv.$class-prefix}navbar-start { + justify-content: flex-start; + margin-inline-end: auto; + } + + .#{iv.$class-prefix}navbar-end { + justify-content: flex-end; + margin-inline-start: auto; + } + + .#{iv.$class-prefix}navbar-dropdown { + background-color: cv.getVar("navbar-dropdown-background-color"); + border-bottom-left-radius: cv.getVar("navbar-dropdown-radius"); + border-bottom-right-radius: cv.getVar("navbar-dropdown-radius"); + border-top-color: cv.getVar("navbar-dropdown-border-color"); + border-top-style: cv.getVar("navbar-dropdown-border-style"); + border-top-width: cv.getVar("navbar-dropdown-border-width"); + box-shadow: 0 0.5em 0.5em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.1 + ); + display: none; + font-size: 0.875rem; + inset-inline-start: 0; + min-width: 100%; + position: absolute; + top: 100%; + z-index: cv.getVar("navbar-dropdown-z"); + + .#{iv.$class-prefix}navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + + a.#{iv.$class-prefix}navbar-item { + padding-inline-end: 3rem; + + &:not(.is-active, .is-selected) { + background-color: hsl( + #{cv.getVar("navbar-dropdown-item-h")}, + #{cv.getVar("navbar-dropdown-item-s")}, + calc( + #{cv.getVar("navbar-dropdown-item-background-l")} + #{cv.getVar( + "navbar-item-background-l-delta" + )} + ) + ); + color: hsl( + #{cv.getVar("navbar-dropdown-item-h")}, + #{cv.getVar("navbar-dropdown-item-s")}, + #{cv.getVar("navbar-dropdown-item-color-l")} + ); + } + } + + .#{iv.$class-prefix}navbar.#{iv.$class-prefix}is-spaced &, + &.#{iv.$class-prefix}is-boxed { + border-radius: cv.getVar("navbar-dropdown-boxed-radius"); + border-top: none; + box-shadow: cv.getVar("navbar-dropdown-boxed-shadow"); + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (#{cv.getVar("navbar-dropdown-offset")})); + transform: translateY(-5px); + transition-duration: cv.getVar("duration"); + transition-property: opacity, transform; + } + + &.#{iv.$class-prefix}is-right { + left: auto; + right: 0; + } + } + + .#{iv.$class-prefix}navbar-divider { + display: block; + } + + .#{iv.$class-prefix}navbar > .#{iv.$class-prefix}container, + .#{iv.$class-prefix}container > .#{iv.$class-prefix}navbar { + .#{iv.$class-prefix}navbar-brand { + margin-inline-start: -0.75rem; + } + + .#{iv.$class-prefix}navbar-menu { + margin-inline-end: -0.75rem; + } + } + + // Fixed navbar + .#{iv.$class-prefix}navbar { + &.#{iv.$class-prefix}is-fixed-bottom-desktop, + &.#{iv.$class-prefix}is-fixed-top-desktop { + @include navbar-fixed; + } + + &.#{iv.$class-prefix}is-fixed-bottom-desktop { + bottom: 0; + + &.#{iv.$class-prefix}has-shadow { + box-shadow: 0 -0.125em 0.1875em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar( + "scheme-s" + )}, #{cv.getVar("scheme-invert-l")}, 0.1); + } + } + + &.#{iv.$class-prefix}is-fixed-top-desktop { + top: 0; + } + } + + html, + body { + &.#{iv.$class-prefix}has-navbar-fixed-top-desktop { + padding-top: cv.getVar("navbar-height"); + } + + &.#{iv.$class-prefix}has-navbar-fixed-bottom-desktop { + padding-bottom: cv.getVar("navbar-height"); + } + + &.#{iv.$class-prefix}has-spaced-navbar-fixed-top { + padding-top: calc( + #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} * + 2 + ); + } + + &.#{iv.$class-prefix}has-spaced-navbar-fixed-bottom { + padding-bottom: calc( + #{cv.getVar("navbar-height")} + #{cv.getVar("navbar-padding-vertical")} * + 2 + ); + } + } +} + +// Combination + +.#{iv.$class-prefix}hero { + &.#{iv.$class-prefix}is-fullheight-with-navbar { + min-height: calc(100vh - #{cv.getVar("navbar-height")}); + } +} diff --git a/web/assets/css/sass/components/pagination.scss b/web/assets/css/sass/components/pagination.scss new file mode 100644 index 0000000..0634653 --- /dev/null +++ b/web/assets/css/sass/components/pagination.scss @@ -0,0 +1,379 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$pagination-margin: -0.25rem !default; +$pagination-min-width: cv.getVar("control-height") !default; + +$pagination-item-h: cv.getVar("scheme-h"); +$pagination-item-s: cv.getVar("scheme-s"); +$pagination-item-l: cv.getVar("scheme-main-l"); +$pagination-item-background-l-delta: 0%; +$pagination-item-hover-background-l-delta: cv.getVar( + "hover-background-l-delta" +); +$pagination-item-active-background-l-delta: cv.getVar( + "active-background-l-delta" +); +$pagination-item-border-l: cv.getVar("border-l"); +$pagination-item-border-l-delta: 0%; +$pagination-item-border-style: solid !default; +$pagination-item-border-width: cv.getVar("control-border-width") !default; +$pagination-item-hover-border-l-delta: cv.getVar("hover-border-l-delta"); +$pagination-item-active-border-l-delta: cv.getVar("active-border-l-delta"); +$pagination-item-focus-border-l-delta: cv.getVar("focus-border-l-delta"); +$pagination-item-color-l: cv.getVar("text-strong-l"); +$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-item-outer-shadow-h: 0; +$pagination-item-outer-shadow-s: 0%; +$pagination-item-outer-shadow-l: 20%; +$pagination-item-outer-shadow-a: 0.05; + +$pagination-selected-item-h: cv.getVar("link-h"); +$pagination-selected-item-s: cv.getVar("link-s"); +$pagination-selected-item-l: cv.getVar("link-l"); +$pagination-selected-item-background-l: cv.getVar("link-l"); +$pagination-selected-item-border-l: cv.getVar("link-l"); +$pagination-selected-item-color-l: cv.getVar("link-invert-l"); + +$pagination-nav-padding-left: 0.75em !default; +$pagination-nav-padding-right: 0.75em !default; + +$pagination-disabled-color: cv.getVar("text-weak") !default; +$pagination-disabled-background-color: cv.getVar("border") !default; +$pagination-disabled-border-color: cv.getVar("border") !default; + +$pagination-current-color: cv.getVar("link-invert") !default; +$pagination-current-background-color: cv.getVar("link") !default; +$pagination-current-border-color: cv.getVar("link") !default; + +$pagination-ellipsis-color: cv.getVar("text-weak") !default; + +$pagination-shadow-inset: inset 0 0.0625em 0.125em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.2 + ) !default; + +.#{iv.$class-prefix}pagination { + @include cv.register-vars( + ( + "pagination-margin": #{$pagination-margin}, + "pagination-min-width": #{$pagination-min-width}, + "pagination-item-h": #{$pagination-item-h}, + "pagination-item-s": #{$pagination-item-s}, + "pagination-item-l": #{$pagination-item-l}, + "pagination-item-background-l-delta": #{$pagination-item-background-l-delta}, + "pagination-item-hover-background-l-delta": #{$pagination-item-hover-background-l-delta}, + "pagination-item-active-background-l-delta": #{$pagination-item-active-background-l-delta}, + "pagination-item-border-style": #{$pagination-item-border-style}, + "pagination-item-border-width": #{$pagination-item-border-width}, + "pagination-item-border-l": #{$pagination-item-border-l}, + "pagination-item-border-l-delta": #{$pagination-item-border-l-delta}, + "pagination-item-hover-border-l-delta": #{$pagination-item-hover-border-l-delta}, + "pagination-item-active-border-l-delta": #{$pagination-item-active-border-l-delta}, + "pagination-item-focus-border-l-delta": #{$pagination-item-focus-border-l-delta}, + "pagination-item-color-l": #{$pagination-item-color-l}, + "pagination-item-font-size": #{$pagination-item-font-size}, + "pagination-item-margin": #{$pagination-item-margin}, + "pagination-item-padding-left": #{$pagination-item-padding-left}, + "pagination-item-padding-right": #{$pagination-item-padding-right}, + "pagination-item-outer-shadow-h": #{$pagination-item-outer-shadow-h}, + "pagination-item-outer-shadow-s": #{$pagination-item-outer-shadow-s}, + "pagination-item-outer-shadow-l": #{$pagination-item-outer-shadow-l}, + "pagination-item-outer-shadow-a": #{$pagination-item-outer-shadow-a}, + "pagination-nav-padding-left": #{$pagination-nav-padding-left}, + "pagination-nav-padding-right": #{$pagination-nav-padding-right}, + "pagination-disabled-color": #{$pagination-disabled-color}, + "pagination-disabled-background-color": #{$pagination-disabled-background-color}, + "pagination-disabled-border-color": #{$pagination-disabled-border-color}, + "pagination-current-color": #{$pagination-current-color}, + "pagination-current-background-color": #{$pagination-current-background-color}, + "pagination-current-border-color": #{$pagination-current-border-color}, + "pagination-ellipsis-color": #{$pagination-ellipsis-color}, + "pagination-shadow-inset": #{$pagination-shadow-inset}, + "pagination-selected-item-h": #{$pagination-selected-item-h}, + "pagination-selected-item-s": #{$pagination-selected-item-s}, + "pagination-selected-item-l": #{$pagination-selected-item-l}, + "pagination-selected-item-background-l": #{$pagination-selected-item-background-l}, + "pagination-selected-item-border-l": #{$pagination-selected-item-border-l}, + "pagination-selected-item-color-l": #{$pagination-selected-item-color-l}, + ) + ); +} + +.#{iv.$class-prefix}pagination { + @extend %block; + + font-size: cv.getVar("size-normal"); + margin: cv.getVar("pagination-margin"); + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } + + &.#{iv.$class-prefix}is-rounded { + .#{iv.$class-prefix}pagination-previous, + .#{iv.$class-prefix}pagination-next { + padding-left: 1em; + padding-right: 1em; + border-radius: cv.getVar("radius-rounded"); + } + + .#{iv.$class-prefix}pagination-link { + border-radius: cv.getVar("radius-rounded"); + } + } +} + +.#{iv.$class-prefix}pagination, +.#{iv.$class-prefix}pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +.#{iv.$class-prefix}pagination-previous, +.#{iv.$class-prefix}pagination-next, +.#{iv.$class-prefix}pagination-link, +.#{iv.$class-prefix}pagination-ellipsis { + @extend %control; + @extend %unselectable; + color: hsl( + #{cv.getVar("pagination-item-h")}, + #{cv.getVar("pagination-item-s")}, + #{cv.getVar("pagination-item-color-l")} + ); + font-size: cv.getVar("pagination-item-font-size"); + justify-content: center; + margin: cv.getVar("pagination-item-margin"); + padding-left: cv.getVar("pagination-item-padding-left"); + padding-right: cv.getVar("pagination-item-padding-right"); + text-align: center; +} + +.#{iv.$class-prefix}pagination-previous, +.#{iv.$class-prefix}pagination-next, +.#{iv.$class-prefix}pagination-link { + background-color: hsl( + #{cv.getVar("pagination-item-h")}, + #{cv.getVar("pagination-item-s")}, + calc( + #{cv.getVar("pagination-item-background-l")} + #{cv.getVar( + "pagination-item-background-l-delta" + )} + ) + ); + border-color: hsl( + #{cv.getVar("pagination-item-h")}, + #{cv.getVar("pagination-item-s")}, + calc( + #{cv.getVar("pagination-item-border-l")} + #{cv.getVar( + "pagination-item-border-l-delta" + )} + ) + ); + border-style: cv.getVar("pagination-item-border-style"); + border-width: cv.getVar("pagination-item-border-width"); + box-shadow: + 0px 0.0625em 0.125em + hsla( + cv.getVar("pagination-item-outer-shadow-h"), + cv.getVar("pagination-item-outer-shadow-s"), + cv.getVar("pagination-item-outer-shadow-l"), + cv.getVar("pagination-item-outer-shadow-a") + ), + 0px 0.125em 0.25em + hsla( + cv.getVar("pagination-item-outer-shadow-h"), + cv.getVar("pagination-item-outer-shadow-s"), + cv.getVar("pagination-item-outer-shadow-l"), + cv.getVar("pagination-item-outer-shadow-a") + ); + color: hsl( + #{cv.getVar("pagination-item-h")}, + #{cv.getVar("pagination-item-s")}, + #{cv.getVar("pagination-item-color-l")} + ); + min-width: cv.getVar("pagination-min-width"); + transition-duration: cv.getVar("duration"); + transition-property: background-color, border-color, box-shadow, color; + + &:hover { + @include cv.register-vars( + ( + "pagination-item-background-l-delta": #{cv.getVar( + "pagination-item-hover-background-l-delta" + )}, + "pagination-item-border-l-delta": #{cv.getVar( + "pagination-item-hover-border-l-delta" + )}, + ) + ); + } + + &:focus { + @include cv.register-vars( + ( + "pagination-item-background-l-delta": #{cv.getVar( + "pagination-item-hover-background-l-delta" + )}, + "pagination-item-border-l-delta": #{cv.getVar( + "pagination-item-hover-border-l-delta" + )}, + ) + ); + } + + &:active { + box-shadow: cv.getVar("pagination-shadow-inset"); + } + + &[disabled], + &.#{iv.$class-prefix}is-disabled { + background-color: cv.getVar("pagination-disabled-background-color"); + border-color: cv.getVar("pagination-disabled-border-color"); + box-shadow: none; + color: cv.getVar("pagination-disabled-color"); + opacity: 0.5; + } +} + +.#{iv.$class-prefix}pagination-previous, +.#{iv.$class-prefix}pagination-next { + padding-left: cv.getVar("pagination-nav-padding-left"); + padding-right: cv.getVar("pagination-nav-padding-right"); + white-space: nowrap; +} + +.#{iv.$class-prefix}pagination-link { + &.#{iv.$class-prefix}is-current, + &.#{iv.$class-prefix}is-selected { + @include cv.register-vars( + ( + "pagination-item-h": #{cv.getVar("pagination-selected-item-h")}, + "pagination-item-s": #{cv.getVar("pagination-selected-item-s")}, + "pagination-item-l": #{cv.getVar("pagination-selected-item-l")}, + "pagination-item-background-l": #{cv.getVar( + "pagination-selected-item-background-l" + )}, + "pagination-item-border-l": #{cv.getVar( + "pagination-selected-item-border-l" + )}, + "pagination-item-color-l": #{cv.getVar( + "pagination-selected-item-color-l" + )}, + ) + ); + } +} + +.#{iv.$class-prefix}pagination-ellipsis { + color: cv.getVar("pagination-ellipsis-color"); + pointer-events: none; +} + +.#{iv.$class-prefix}pagination-list { + flex-wrap: wrap; + + li { + list-style: none; + } +} + +@include mx.mobile { + .#{iv.$class-prefix}pagination { + flex-wrap: wrap; + } + + .#{iv.$class-prefix}pagination-previous, + .#{iv.$class-prefix}pagination-next { + flex-grow: 1; + flex-shrink: 1; + } + + .#{iv.$class-prefix}pagination-list { + li { + flex-grow: 1; + flex-shrink: 1; + } + } +} + +@include mx.tablet { + .#{iv.$class-prefix}pagination-list { + flex-grow: 1; + flex-shrink: 1; + justify-content: flex-start; + order: 1; + } + + .#{iv.$class-prefix}pagination-previous, + .#{iv.$class-prefix}pagination-next, + .#{iv.$class-prefix}pagination-link, + .#{iv.$class-prefix}pagination-ellipsis { + margin-bottom: 0; + margin-top: 0; + } + + .#{iv.$class-prefix}pagination-previous { + order: 2; + } + + .#{iv.$class-prefix}pagination-next { + order: 3; + } + + .#{iv.$class-prefix}pagination { + justify-content: space-between; + margin-bottom: 0; + margin-top: 0; + + &.#{iv.$class-prefix}is-centered { + .#{iv.$class-prefix}pagination-previous { + order: 1; + } + + .#{iv.$class-prefix}pagination-list { + justify-content: center; + order: 2; + } + + .#{iv.$class-prefix}pagination-next { + order: 3; + } + } + + &.#{iv.$class-prefix}is-right { + .#{iv.$class-prefix}pagination-previous { + order: 1; + } + + .#{iv.$class-prefix}pagination-next { + order: 2; + } + + .#{iv.$class-prefix}pagination-list { + justify-content: flex-end; + order: 3; + } + } + } +} diff --git a/web/assets/css/sass/components/panel.scss b/web/assets/css/sass/components/panel.scss new file mode 100644 index 0000000..7d7d010 --- /dev/null +++ b/web/assets/css/sass/components/panel.scss @@ -0,0 +1,218 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$panel-margin: cv.getVar("block-spacing") !default; +$panel-item-border: 1px solid cv.getVar("border-weak") !default; +$panel-radius: cv.getVar("radius-large") !default; +$panel-shadow: cv.getVar("shadow") !default; + +$panel-heading-line-height: 1.25 !default; +$panel-heading-padding: 1em 1.25em !default; +$panel-heading-radius: cv.getVar("radius") !default; +$panel-heading-size: 1.25em !default; +$panel-heading-weight: cv.getVar("weight-bold") !default; + +$panel-tabs-font-size: 1em !default; +$panel-tab-border-bottom-color: cv.getVar("border") !default; +$panel-tab-border-bottom-style: solid !default; +$panel-tab-border-bottom-width: 1px !default; +$panel-tab-active-color: cv.getVar("link-active") !default; + +$panel-list-item-color: cv.getVar("text") !default; +$panel-list-item-hover-color: cv.getVar("link") !default; + +$panel-block-color: cv.getVar("text-strong") !default; +$panel-block-hover-background-color: cv.getVar("background") !default; +$panel-block-active-border-left-color: cv.getVar("link") !default; +$panel-block-active-color: cv.getVar("link-active") !default; +$panel-block-active-icon-color: cv.getVar("link") !default; + +$panel-icon-color: cv.getVar("text-weak") !default; +$panel-colors: dv.$colors !default; + +.#{iv.$class-prefix}panel { + @include cv.register-vars( + ( + "panel-margin": #{$panel-margin}, + "panel-item-border": #{$panel-item-border}, + "panel-radius": #{$panel-radius}, + "panel-shadow": #{$panel-shadow}, + "panel-heading-line-height": #{$panel-heading-line-height}, + "panel-heading-padding": #{$panel-heading-padding}, + "panel-heading-radius": #{$panel-heading-radius}, + "panel-heading-size": #{$panel-heading-size}, + "panel-heading-weight": #{$panel-heading-weight}, + "panel-tabs-font-size": #{$panel-tabs-font-size}, + "panel-tab-border-bottom-color": #{$panel-tab-border-bottom-color}, + "panel-tab-border-bottom-style": #{$panel-tab-border-bottom-style}, + "panel-tab-border-bottom-width": #{$panel-tab-border-bottom-width}, + "panel-tab-active-color": #{$panel-tab-active-color}, + "panel-list-item-color": #{$panel-list-item-color}, + "panel-list-item-hover-color": #{$panel-list-item-hover-color}, + "panel-block-color": #{$panel-block-color}, + "panel-block-hover-background-color": #{$panel-block-hover-background-color}, + "panel-block-active-border-left-color": #{$panel-block-active-border-left-color}, + "panel-block-active-color": #{$panel-block-active-color}, + "panel-block-active-icon-color": #{$panel-block-active-icon-color}, + "panel-icon-color": #{$panel-icon-color}, + ) + ); +} + +.#{iv.$class-prefix}panel { + @include cv.register-vars( + ( + "panel-h": #{cv.getVar("scheme-h")}, + "panel-s": #{cv.getVar("scheme-s")}, + "panel-color-l": #{cv.getVar("text-l")}, + "panel-heading-background-l": #{cv.getVar("text-l")}, + "panel-heading-color-l": #{cv.getVar("text-invert-l")}, + ) + ); + + border-radius: cv.getVar("panel-radius"); + box-shadow: cv.getVar("panel-shadow"); + font-size: cv.getVar("size-normal"); + + &:not(:last-child) { + margin-bottom: cv.getVar("panel-margin"); + } + + // Colors + @each $name, $components in $panel-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "panel-h": #{cv.getVar($name, "", "-h")}, + "panel-s": #{cv.getVar($name, "", "-s")}, + "panel-color-l": #{cv.getVar($name, "", "-l")}, + "panel-heading-background-l": #{cv.getVar($name, "", "-l")}, + "panel-heading-color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + } + } +} + +.#{iv.$class-prefix}panel-tabs, +.#{iv.$class-prefix}panel-block { + &:not(:last-child) { + border-bottom: cv.getVar("panel-item-border"); + } +} + +.#{iv.$class-prefix}panel-heading { + background-color: hsl( + cv.getVar("panel-h"), + cv.getVar("panel-s"), + cv.getVar("panel-heading-background-l") + ); + border-radius: cv.getVar("panel-radius") cv.getVar("panel-radius") 0 0; + color: hsl( + cv.getVar("panel-h"), + cv.getVar("panel-s"), + cv.getVar("panel-heading-color-l") + ); + font-size: cv.getVar("panel-heading-size"); + font-weight: cv.getVar("panel-heading-weight"); + line-height: cv.getVar("panel-heading-line-height"); + padding: cv.getVar("panel-heading-padding"); +} + +.#{iv.$class-prefix}panel-tabs { + align-items: flex-end; + display: flex; + font-size: cv.getVar("panel-tabs-font-size"); + justify-content: center; + + a { + border-bottom-color: cv.getVar("panel-tab-border-bottom-color"); + border-bottom-style: cv.getVar("panel-tab-border-bottom-style"); + border-bottom-width: cv.getVar("panel-tab-border-bottom-width"); + margin-bottom: calc(-1 * #{$panel-tab-border-bottom-width}); + padding: 0.75em; + + // Modifiers + &.#{iv.$class-prefix}is-active { + border-bottom-color: hsl( + cv.getVar("panel-h"), + cv.getVar("panel-s"), + cv.getVar("panel-color-l") + ); + color: cv.getVar("panel-tab-active-color"); + } + } +} + +.#{iv.$class-prefix}panel-list { + a { + color: cv.getVar("panel-list-item-color"); + + &:hover { + color: cv.getVar("panel-list-item-hover-color"); + } + } +} + +.#{iv.$class-prefix}panel-block { + align-items: center; + color: cv.getVar("panel-block-color"); + display: flex; + justify-content: flex-start; + padding: 0.75em 1em; + + input[type="checkbox"] { + margin-inline-end: 0.75em; + } + + & > .#{iv.$class-prefix}control { + flex-grow: 1; + flex-shrink: 1; + width: 100%; + } + + &.#{iv.$class-prefix}is-wrapped { + flex-wrap: wrap; + } + + &.#{iv.$class-prefix}is-active { + border-left-color: cv.getVar("panel-block-active-border-left-color"); + color: cv.getVar("panel-block-active-color"); + + .#{iv.$class-prefix}panel-icon { + color: hsl( + cv.getVar("panel-h"), + cv.getVar("panel-s"), + cv.getVar("panel-color-l") + ); + } + } + + &:last-child { + border-bottom-left-radius: cv.getVar("panel-radius"); + border-bottom-right-radius: cv.getVar("panel-radius"); + } +} + +a.#{iv.$class-prefix}panel-block, +label.#{iv.$class-prefix}panel-block { + cursor: pointer; + + &:hover { + background-color: cv.getVar("panel-block-hover-background-color"); + } +} + +.#{iv.$class-prefix}panel-icon { + @include mx.fa(1em, 1em); + color: cv.getVar("panel-icon-color"); + margin-inline-end: 0.75em; + + .#{iv.$class-prefix}fa { + font-size: inherit; + line-height: inherit; + } +} diff --git a/web/assets/css/sass/components/tabs.scss b/web/assets/css/sass/components/tabs.scss new file mode 100644 index 0000000..072282c --- /dev/null +++ b/web/assets/css/sass/components/tabs.scss @@ -0,0 +1,273 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$tabs-border-bottom-color: cv.getVar("border") !default; +$tabs-border-bottom-style: solid !default; +$tabs-border-bottom-width: 1px !default; +$tabs-link-color: cv.getVar("text") !default; +$tabs-link-hover-border-bottom-color: cv.getVar("text-strong") !default; +$tabs-link-hover-color: cv.getVar("text-strong") !default; +$tabs-link-active-border-bottom-color: cv.getVar("link-text") !default; +$tabs-link-active-color: cv.getVar("link-text") !default; +$tabs-link-padding: 0.5em 1em !default; + +$tabs-boxed-link-radius: cv.getVar("radius") !default; +$tabs-boxed-link-hover-background-color: cv.getVar("background") !default; +$tabs-boxed-link-hover-border-bottom-color: cv.getVar("border") !default; + +$tabs-boxed-link-active-background-color: cv.getVar("scheme-main") !default; +$tabs-boxed-link-active-border-color: cv.getVar("border") !default; +$tabs-boxed-link-active-border-bottom-color: transparent !default; + +$tabs-toggle-link-border-color: cv.getVar("border") !default; +$tabs-toggle-link-border-style: solid !default; +$tabs-toggle-link-border-width: 1px !default; +$tabs-toggle-link-hover-background-color: cv.getVar("background") !default; +$tabs-toggle-link-hover-border-color: cv.getVar("border-hover") !default; +$tabs-toggle-link-radius: cv.getVar("radius") !default; +$tabs-toggle-link-active-background-color: cv.getVar("link") !default; +$tabs-toggle-link-active-border-color: cv.getVar("link") !default; +$tabs-toggle-link-active-color: cv.getVar("link-invert") !default; + +.#{iv.$class-prefix}tabs { + @include cv.register-vars( + ( + "tabs-border-bottom-color": #{$tabs-border-bottom-color}, + "tabs-border-bottom-style": #{$tabs-border-bottom-style}, + "tabs-border-bottom-width": #{$tabs-border-bottom-width}, + "tabs-link-color": #{$tabs-link-color}, + "tabs-link-hover-border-bottom-color": #{$tabs-link-hover-border-bottom-color}, + "tabs-link-hover-color": #{$tabs-link-hover-color}, + "tabs-link-active-border-bottom-color": #{$tabs-link-active-border-bottom-color}, + "tabs-link-active-color": #{$tabs-link-active-color}, + "tabs-link-padding": #{$tabs-link-padding}, + "tabs-boxed-link-radius": #{$tabs-boxed-link-radius}, + "tabs-boxed-link-hover-background-color": #{$tabs-boxed-link-hover-background-color}, + "tabs-boxed-link-hover-border-bottom-color": #{$tabs-boxed-link-hover-border-bottom-color}, + "tabs-boxed-link-active-background-color": #{$tabs-boxed-link-active-background-color}, + "tabs-boxed-link-active-border-color": #{$tabs-boxed-link-active-border-color}, + "tabs-boxed-link-active-border-bottom-color": #{$tabs-boxed-link-active-border-bottom-color}, + "tabs-toggle-link-border-color": #{$tabs-toggle-link-border-color}, + "tabs-toggle-link-border-style": #{$tabs-toggle-link-border-style}, + "tabs-toggle-link-border-width": #{$tabs-toggle-link-border-width}, + "tabs-toggle-link-hover-background-color": #{$tabs-toggle-link-hover-background-color}, + "tabs-toggle-link-hover-border-color": #{$tabs-toggle-link-hover-border-color}, + "tabs-toggle-link-radius": #{$tabs-toggle-link-radius}, + "tabs-toggle-link-active-background-color": #{$tabs-toggle-link-active-background-color}, + "tabs-toggle-link-active-border-color": #{$tabs-toggle-link-active-border-color}, + "tabs-toggle-link-active-color": #{$tabs-toggle-link-active-color}, + ) + ); +} + +.#{iv.$class-prefix}tabs { + @extend %block; + @extend %unselectable; + @include mx.overflow-touch; + align-items: stretch; + display: flex; + font-size: cv.getVar("size-normal"); + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; + + a { + align-items: center; + border-bottom-color: cv.getVar("tabs-border-bottom-color"); + border-bottom-style: cv.getVar("tabs-border-bottom-style"); + border-bottom-width: cv.getVar("tabs-border-bottom-width"); + color: cv.getVar("tabs-link-color"); + display: flex; + justify-content: center; + margin-bottom: calc(-1 * #{cv.getVar("tabs-border-bottom-width")}); + padding: cv.getVar("tabs-link-padding"); + transition-duration: cv.getVar("duration"); + transition-property: background-color, border-color, color; + vertical-align: top; + + &:hover { + border-bottom-color: cv.getVar("tabs-link-hover-border-bottom-color"); + color: cv.getVar("tabs-link-hover-color"); + } + } + + li { + display: block; + + &.#{iv.$class-prefix}is-active { + a { + border-bottom-color: cv.getVar("tabs-link-active-border-bottom-color"); + color: cv.getVar("tabs-link-active-color"); + } + } + } + + ul { + align-items: center; + border-bottom-color: cv.getVar("tabs-border-bottom-color"); + border-bottom-style: cv.getVar("tabs-border-bottom-style"); + border-bottom-width: cv.getVar("tabs-border-bottom-width"); + display: flex; + flex-grow: 1; + flex-shrink: 0; + justify-content: flex-start; + + &.#{iv.$class-prefix}is-left { + padding-right: 0.75em; + } + + &.#{iv.$class-prefix}is-center { + flex: none; + justify-content: center; + padding-left: 0.75em; + padding-right: 0.75em; + } + + &.#{iv.$class-prefix}is-right { + justify-content: flex-end; + padding-left: 0.75em; + } + } + + .#{iv.$class-prefix}icon { + &:first-child { + margin-inline-end: 0.5em; + } + + &:last-child { + margin-inline-start: 0.5em; + } + } + + // Alignment + &.#{iv.$class-prefix}is-centered { + ul { + justify-content: center; + } + } + + &.#{iv.$class-prefix}is-right { + ul { + justify-content: flex-end; + } + } + + // Styles + &.#{iv.$class-prefix}is-boxed { + a { + border: 1px solid transparent; + border-start-start-radius: cv.getVar("tabs-boxed-link-radius"); + border-start-end-radius: cv.getVar("tabs-boxed-link-radius"); + + &:hover { + background-color: cv.getVar("tabs-boxed-link-hover-background-color"); + border-bottom-color: cv.getVar( + "tabs-boxed-link-hover-border-bottom-color" + ); + } + } + + li { + &.#{iv.$class-prefix}is-active { + a { + background-color: cv.getVar( + "tabs-boxed-link-active-background-color" + ); + border-color: cv.getVar("tabs-boxed-link-active-border-color"); + border-bottom-color: cv.getVar( + "tabs-boxed-link-active-border-bottom-color" + ) !important; + } + } + } + } + + &.#{iv.$class-prefix}is-fullwidth { + li { + flex-grow: 1; + flex-shrink: 0; + } + } + + &.#{iv.$class-prefix}is-toggle { + a { + border-color: cv.getVar("tabs-toggle-link-border-color"); + border-style: cv.getVar("tabs-toggle-link-border-style"); + border-width: cv.getVar("tabs-toggle-link-border-width"); + margin-bottom: 0; + position: relative; + + &:hover { + background-color: cv.getVar("tabs-toggle-link-hover-background-color"); + border-color: cv.getVar("tabs-toggle-link-hover-border-color"); + z-index: 2; + } + } + + li { + & + li { + margin-inline-start: calc( + -1 * #{cv.getVar("tabs-toggle-link-border-width")} + ); + } + + &:first-child a { + border-start-start-radius: cv.getVar("tabs-toggle-link-radius"); + border-end-start-radius: cv.getVar("tabs-toggle-link-radius"); + } + + &:last-child a { + border-start-end-radius: cv.getVar("tabs-toggle-link-radius"); + border-end-end-radius: cv.getVar("tabs-toggle-link-radius"); + } + + &.#{iv.$class-prefix}is-active { + a { + background-color: cv.getVar( + "tabs-toggle-link-active-background-color" + ); + border-color: cv.getVar("tabs-toggle-link-active-border-color"); + color: cv.getVar("tabs-toggle-link-active-color"); + z-index: 1; + } + } + } + + ul { + border-bottom: none; + } + + &.#{iv.$class-prefix}is-toggle-rounded { + li { + &:first-child a { + border-start-start-radius: cv.getVar("radius-rounded"); + border-end-start-radius: cv.getVar("radius-rounded"); + padding-inline-start: 1.25em; + } + + &:last-child a { + border-start-end-radius: cv.getVar("radius-rounded"); + border-end-end-radius: cv.getVar("radius-rounded"); + padding-inline-end: 1.25em; + } + } + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } +} diff --git a/web/assets/css/sass/elements/_index.scss b/web/assets/css/sass/elements/_index.scss new file mode 100644 index 0000000..68034bf --- /dev/null +++ b/web/assets/css/sass/elements/_index.scss @@ -0,0 +1,16 @@ +/* Bulma Elements */ +@charset "utf-8"; + +@forward "block"; +@forward "box"; +@forward "button"; +@forward "content"; +@forward "delete"; +@forward "icon"; +@forward "image"; +@forward "loader"; +@forward "notification"; +@forward "progress"; +@forward "table"; +@forward "tag"; +@forward "title"; diff --git a/web/assets/css/sass/elements/block.scss b/web/assets/css/sass/elements/block.scss new file mode 100644 index 0000000..34fee01 --- /dev/null +++ b/web/assets/css/sass/elements/block.scss @@ -0,0 +1,6 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; + +.#{iv.$class-prefix}block { + @extend %block; +} diff --git a/web/assets/css/sass/elements/box.scss b/web/assets/css/sass/elements/box.scss new file mode 100644 index 0000000..060f53a --- /dev/null +++ b/web/assets/css/sass/elements/box.scss @@ -0,0 +1,59 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; + +$box-background-color: cv.getVar("scheme-main") !default; +$box-color: cv.getVar("text") !default; +$box-radius: cv.getVar("radius-large") !default; +$box-shadow: cv.getVar("shadow") !default; +$box-padding: 1.25rem !default; + +$box-link-hover-shadow: + 0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar( + "scheme-invert-l" + )}, 0.1), + 0 0 0 1px cv.getVar("link") !default; +$box-link-active-shadow: + inset 0 1px 2px + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.2 + ), + 0 0 0 1px cv.getVar("link") !default; + +.#{iv.$class-prefix}box { + @include cv.register-vars( + ( + "box-background-color": #{$box-background-color}, + "box-color": #{$box-color}, + "box-radius": #{$box-radius}, + "box-shadow": #{$box-shadow}, + "box-padding": #{$box-padding}, + "box-link-hover-shadow": #{$box-link-hover-shadow}, + "box-link-active-shadow": #{$box-link-active-shadow}, + ) + ); +} + +.#{iv.$class-prefix}box { + @extend %block; + background-color: cv.getVar("box-background-color"); + border-radius: cv.getVar("box-radius"); + box-shadow: cv.getVar("box-shadow"); + color: cv.getVar("box-color"); + display: block; + padding: cv.getVar("box-padding"); +} + +a.#{iv.$class-prefix}box { + &:hover, + &:focus { + box-shadow: cv.getVar("box-link-hover-shadow"); + } + + &:active { + box-shadow: cv.getVar("box-link-active-shadow"); + } +} diff --git a/web/assets/css/sass/elements/button.scss b/web/assets/css/sass/elements/button.scss new file mode 100644 index 0000000..f8d3ba8 --- /dev/null +++ b/web/assets/css/sass/elements/button.scss @@ -0,0 +1,640 @@ +@use "sass:list"; + +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$button-h: #{cv.getVar("scheme-h")}; +$button-s: #{cv.getVar("scheme-s")}; +$button-l: #{cv.getVar("scheme-main-l")}; +$button-background-l: #{cv.getVar("scheme-main-l")}; +$button-background-l-delta: 0%; +$button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")}; +$button-active-background-l-delta: #{cv.getVar("active-background-l-delta")}; +$button-color-l: #{cv.getVar("text-strong-l")}; +$button-border-l: #{cv.getVar("border-l")}; +$button-border-l-delta: 0%; +$button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")}; +$button-active-border-l-delta: #{cv.getVar("active-border-l-delta")}; +$button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")}; +$button-outer-shadow-h: 0; +$button-outer-shadow-s: 0%; +$button-outer-shadow-l: 20%; +$button-outer-shadow-a: 0.05; + +$button-weight: cv.getVar("weight-medium") !default; +$button-family: false !default; + +$button-border-color: cv.getVar("border") !default; +$button-border-style: solid !default; +$button-border-width: cv.getVar("control-border-width") !default; + +$button-padding-vertical: 0.5em !default; +$button-padding-horizontal: 1em !default; + +$button-focus-border-color: cv.getVar("link-focus-border") !default; +$button-focus-box-shadow-size: 0 0 0 0.125em !default; +$button-focus-box-shadow-color: hsla( + #{cv.getVar("link-h")}, + #{cv.getVar("link-s")}, + #{cv.getVar("link-on-scheme-l")}, + 0.25 +) !default; + +$button-active-color: cv.getVar("link-active") !default; +$button-active-border-color: cv.getVar("link-active-border") !default; + +$button-text-color: cv.getVar("text") !default; +$button-text-decoration: underline !default; +$button-text-hover-background-color: cv.getVar("background") !default; +$button-text-hover-color: cv.getVar("text-strong") !default; + +$button-ghost-background: none !default; +$button-ghost-border-color: transparent !default; +$button-ghost-color: cv.getVar("link-text") !default; +$button-ghost-decoration: none !default; +$button-ghost-hover-color: cv.getVar("link") !default; +$button-ghost-hover-decoration: underline !default; + +$button-disabled-background-color: cv.getVar("scheme-main") !default; +$button-disabled-border-color: cv.getVar("border") !default; +$button-disabled-shadow: none !default; +$button-disabled-opacity: 0.5 !default; + +$button-static-color: cv.getVar("text-weak") !default; +$button-static-background-color: cv.getVar("scheme-main-ter") !default; +$button-static-border-color: cv.getVar("border") !default; + +$button-colors: dv.$colors !default; +$button-responsive-sizes: ( + "mobile": ( + "small": calc(#{cv.getVar("size-small")} * 0.75), + "normal": calc(#{cv.getVar("size-small")} * 0.875), + "medium": cv.getVar("size-small"), + "large": cv.getVar("size-normal"), + ), + "tablet-only": ( + "small": calc(#{cv.getVar("size-small")} * 0.875), + "normal": cv.getVar("size-small"), + "medium": cv.getVar("size-normal"), + "large": cv.getVar("size-medium"), + ), +) !default; + +$no-palette: ("white", "black", "light", "dark"); + +.#{iv.$class-prefix}button { + @include cv.register-vars( + ( + "button-family": #{$button-family}, + "button-weight": #{$button-weight}, + "button-border-color": #{$button-border-color}, + "button-border-style": #{$button-border-style}, + "button-border-width": #{$button-border-width}, + "button-padding-vertical": #{$button-padding-vertical}, + "button-padding-horizontal": #{$button-padding-horizontal}, + "button-focus-border-color": #{$button-focus-border-color}, + "button-focus-box-shadow-size": #{$button-focus-box-shadow-size}, + "button-focus-box-shadow-color": #{$button-focus-box-shadow-color}, + "button-active-color": #{$button-active-color}, + "button-active-border-color": #{$button-active-border-color}, + "button-text-color": #{$button-text-color}, + "button-text-decoration": #{$button-text-decoration}, + "button-text-hover-background-color": #{$button-text-hover-background-color}, + "button-text-hover-color": #{$button-text-hover-color}, + "button-ghost-background": #{$button-ghost-background}, + "button-ghost-border-color": #{$button-ghost-border-color}, + "button-ghost-color": #{$button-ghost-color}, + "button-ghost-decoration": #{$button-ghost-decoration}, + "button-ghost-hover-color": #{$button-ghost-hover-color}, + "button-ghost-hover-decoration": #{$button-ghost-hover-decoration}, + "button-disabled-background-color": #{$button-disabled-background-color}, + "button-disabled-border-color": #{$button-disabled-border-color}, + "button-disabled-shadow": #{$button-disabled-shadow}, + "button-disabled-opacity": #{$button-disabled-opacity}, + "button-static-color": #{$button-static-color}, + "button-static-background-color": #{$button-static-background-color}, + "button-static-border-color": #{$button-static-border-color}, + ) + ); +} + +.#{iv.$class-prefix}button { + @include cv.register-vars( + ( + "button-h": #{$button-h}, + "button-s": #{$button-s}, + "button-l": #{$button-l}, + "button-background-l": #{$button-background-l}, + "button-background-l-delta": #{$button-background-l-delta}, + "button-hover-background-l-delta": #{$button-hover-background-l-delta}, + "button-active-background-l-delta": #{$button-active-background-l-delta}, + "button-color-l": #{$button-color-l}, + "button-border-l": #{$button-border-l}, + "button-border-l-delta": #{$button-border-l-delta}, + "button-hover-border-l-delta": #{$button-hover-border-l-delta}, + "button-active-border-l-delta": #{$button-active-border-l-delta}, + "button-focus-border-l-delta": #{$button-focus-border-l-delta}, + "button-outer-shadow-h": #{$button-outer-shadow-h}, + "button-outer-shadow-s": #{$button-outer-shadow-s}, + "button-outer-shadow-l": #{$button-outer-shadow-l}, + "button-outer-shadow-a": #{$button-outer-shadow-a}, + "loading-color": + hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + #{cv.getVar("button-color-l")} + ), + ) + ); + + @extend %control; + @extend %unselectable; + + background-color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + calc( + #{cv.getVar("button-background-l")} + #{cv.getVar( + "button-background-l-delta" + )} + ) + ); + border-color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + calc( + #{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")} + ) + ); + border-style: cv.getVar("button-border-style"); + border-width: cv.getVar("button-border-width"); + box-shadow: + 0px 0.0625em 0.125em + hsla( + cv.getVar("button-outer-shadow-h"), + cv.getVar("button-outer-shadow-s"), + cv.getVar("button-outer-shadow-l"), + cv.getVar("button-outer-shadow-a") + ), + 0px 0.125em 0.25em + hsla( + cv.getVar("button-outer-shadow-h"), + cv.getVar("button-outer-shadow-s"), + cv.getVar("button-outer-shadow-l"), + cv.getVar("button-outer-shadow-a") + ); + color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + #{cv.getVar("button-color-l")} + ); + cursor: pointer; + font-weight: cv.getVar("button-weight"); + height: auto; + justify-content: center; + padding-bottom: calc( + #{cv.getVar("button-padding-vertical")} - #{cv.getVar( + "button-border-width" + )} + ); + padding-left: calc( + #{cv.getVar("button-padding-horizontal")} - #{cv.getVar( + "button-border-width" + )} + ); + padding-right: calc( + #{cv.getVar("button-padding-horizontal")} - #{cv.getVar( + "button-border-width" + )} + ); + padding-top: calc( + #{cv.getVar("button-padding-vertical")} - #{cv.getVar( + "button-border-width" + )} + ); + text-align: center; + white-space: nowrap; + + @if $button-family { + font-family: cv.getVar("button-family"); + } + + strong { + color: inherit; + } + + .#{iv.$class-prefix}icon { + &, + &.#{iv.$class-prefix}is-small, + &.#{iv.$class-prefix}is-medium, + &.#{iv.$class-prefix}is-large { + height: 1.5em; + width: 1.5em; + } + + &:first-child:not(:last-child) { + margin-inline-start: calc( + -0.5 * #{cv.getVar("button-padding-horizontal")} + ); + margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25); + } + + &:last-child:not(:first-child) { + margin-inline-start: calc( + #{cv.getVar("button-padding-horizontal")} * 0.25 + ); + margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")}); + } + + &:first-child:last-child { + margin-inline-start: calc( + -0.5 * #{cv.getVar("button-padding-horizontal")} + ); + margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")}); + } + } + + // States + &:hover, + &.#{iv.$class-prefix}is-hovered { + @include cv.register-vars( + ( + "button-background-l-delta": #{cv.getVar( + "button-hover-background-l-delta" + )}, + "button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")}, + ) + ); + } + + &:focus-visible, + &.#{iv.$class-prefix}is-focused { + @include cv.register-var("button-border-width", 1px); + + border-color: hsl( + #{cv.getVar("focus-h")}, + #{cv.getVar("focus-s")}, + #{cv.getVar("focus-l")} + ); + box-shadow: cv.getVar("focus-shadow-size") + hsla( + cv.getVar("focus-h"), + cv.getVar("focus-s"), + cv.getVar("focus-l"), + cv.getVar("focus-shadow-alpha") + ); + } + + &:active, + &.#{iv.$class-prefix}is-active { + @include cv.register-vars( + ( + "button-background-l-delta": #{cv.getVar( + "button-active-background-l-delta" + )}, + "button-border-l-delta": #{cv.getVar("button-active-border-l-delta")}, + "button-outer-shadow-a": 0, + ) + ); + } + + &[disabled], + fieldset[disabled] & { + background-color: cv.getVar("button-disabled-background-color"); + border-color: cv.getVar("button-disabled-border-color"); + box-shadow: cv.getVar("button-disabled-shadow"); + opacity: cv.getVar("button-disabled-opacity"); + } + + // Colors + @each $name, $pair in $button-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "button-h": #{cv.getVar($name, "", "-h")}, + "button-s": #{cv.getVar($name, "", "-s")}, + "button-l": #{cv.getVar($name, "", "-l")}, + "button-background-l": #{cv.getVar($name, "", "-l")}, + "button-border-l": #{cv.getVar($name, "", "-l")}, + "button-border-width": 0px, + "button-color-l": #{cv.getVar($name, "", "-invert-l")}, + "button-outer-shadow-a": 0, + ) + ); + + &:focus-visible, + &.#{iv.$class-prefix}is-focused { + @include cv.register-var("button-border-width", 1px); + } + + @if not list.index($no-palette, $name) { + &.#{iv.$class-prefix}is-light { + @include cv.register-vars( + ( + "button-background-l": #{cv.getVar("light-l")}, + "button-color-l": #{cv.getVar($name, "", "-light-invert-l")}, + ) + ); + } + + &.#{iv.$class-prefix}is-dark { + @include cv.register-vars( + ( + "button-background-l": #{cv.getVar("dark-l")}, + "button-color-l": #{cv.getVar($name, "", "-dark-invert-l")}, + ) + ); + } + } + + &.#{iv.$class-prefix}is-soft { + @include cv.register-vars( + ( + "button-background-l": #{cv.getVar("soft-l")}, + "button-color-l": #{cv.getVar("soft-invert-l")}, + ) + ); + } + + &.#{iv.$class-prefix}is-bold { + @include cv.register-vars( + ( + "button-background-l": #{cv.getVar("bold-l")}, + "button-color-l": #{cv.getVar("bold-invert-l")}, + ) + ); + } + + &[disabled], + fieldset[disabled] & { + background-color: cv.getVar($name); + border-color: cv.getVar($name); + box-shadow: none; + } + } + } + + // Styles + &.#{iv.$class-prefix}is-outlined { + @include cv.register-vars( + ( + "button-border-width": max(1px, 0.0625em), + ) + ); + + background-color: transparent; + border-color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + #{cv.getVar("button-l")} + ); + color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + #{cv.getVar("button-l")} + ); + + &:hover { + @include cv.register-vars( + ( + "button-border-width": max(2px, 0.125em), + "button-outer-shadow-alpha": 1, + ) + ); + } + + &:active { + @include cv.register-vars(()); + } + } + + &.#{iv.$class-prefix}is-inverted { + background-color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + calc( + #{cv.getVar("button-color-l")} + #{cv.getVar( + "button-background-l-delta" + )} + ) + ); + color: hsl( + #{cv.getVar("button-h")}, + #{cv.getVar("button-s")}, + #{cv.getVar("button-background-l")} + ); + } + + &.#{iv.$class-prefix}is-text { + background-color: transparent; + border-color: transparent; + color: cv.getVar("button-text-color"); + text-decoration: cv.getVar("button-text-decoration"); + + &:hover, + &.#{iv.$class-prefix}is-hovered { + background-color: cv.getVar("button-text-hover-background-color"); + color: cv.getVar("button-text-hover-color"); + } + + &:active, + &.#{iv.$class-prefix}is-active { + // background-color: bulmaDarken($button-text-hover-background-color, 5%); + color: cv.getVar("button-text-hover-color"); + } + + &[disabled], + fieldset[disabled] & { + background-color: transparent; + border-color: transparent; + box-shadow: none; + } + } + + &.#{iv.$class-prefix}is-ghost { + background: cv.getVar("button-ghost-background"); + border-color: cv.getVar("button-ghost-border-color"); + box-shadow: none; + color: cv.getVar("button-ghost-color"); + text-decoration: cv.getVar("button-ghost-decoration"); + + &:hover, + &.#{iv.$class-prefix}is-hovered { + color: cv.getVar("button-ghost-hover-color"); + text-decoration: cv.getVar("button-ghost-hover-decoration"); + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-small")}, + "control-radius": #{cv.getVar("radius-small")}, + ) + ); + } + + &.#{iv.$class-prefix}is-normal { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-normal")}, + "control-radius": #{cv.getVar("radius")}, + ) + ); + } + + &.#{iv.$class-prefix}is-medium { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-medium")}, + "control-radius": #{cv.getVar("radius-medium")}, + ) + ); + } + + &.#{iv.$class-prefix}is-large { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-large")}, + "control-radius": #{cv.getVar("radius-medium")}, + ) + ); + } + + // Modifiers + &.#{iv.$class-prefix}is-fullwidth { + display: flex; + width: 100%; + } + + &.#{iv.$class-prefix}is-loading { + box-shadow: none; + color: transparent !important; + pointer-events: none; + + &::after { + @extend %loader; + @include mx.center(1em); + position: absolute !important; + } + } + + &.#{iv.$class-prefix}is-static { + background-color: cv.getVar("button-static-background-color"); + border-color: cv.getVar("button-static-border-color"); + color: cv.getVar("button-static-color"); + box-shadow: none; + pointer-events: none; + } + + &.#{iv.$class-prefix}is-rounded { + border-radius: cv.getVar("radius-rounded"); + padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em); + padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em); + } +} + +.#{iv.$class-prefix}buttons { + @extend %block; + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + justify-content: flex-start; + + // Sizes + &.#{iv.$class-prefix}are-small { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-small")}, + "control-radius": #{cv.getVar("radius-small")}, + ) + ); + } + + &.#{iv.$class-prefix}are-medium { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-medium")}, + "control-radius": #{cv.getVar("radius-medium")}, + ) + ); + } + + &.#{iv.$class-prefix}are-large { + @include cv.register-vars( + ( + "control-size": #{cv.getVar("size-large")}, + "control-radius": #{cv.getVar("radius-large")}, + ) + ); + } + + &.#{iv.$class-prefix}has-addons { + gap: 0; + + .#{iv.$class-prefix}button { + &:not(:first-child) { + border-end-start-radius: 0; + border-start-start-radius: 0; + } + + &:not(:last-child) { + border-end-end-radius: 0; + border-start-end-radius: 0; + margin-inline-end: -1px; + } + + &:hover, + &.#{iv.$class-prefix}is-hovered { + z-index: 2; + } + + &:focus, + &.#{iv.$class-prefix}is-focused, + &:active, + &.#{iv.$class-prefix}is-active, + &.#{iv.$class-prefix}is-selected { + z-index: 3; + + &:hover { + z-index: 4; + } + } + + &.#{iv.$class-prefix}is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.#{iv.$class-prefix}is-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}is-right { + justify-content: flex-end; + } +} + +@each $bp-name, $bp-sizes in $button-responsive-sizes { + @include mx.breakpoint($bp-name) { + @each $size, $value in $bp-sizes { + @if $size != "normal" { + .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} { + font-size: $value; + } + } @else { + .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive, + .#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal { + font-size: $value; + } + } + } + } +} diff --git a/web/assets/css/sass/elements/content.scss b/web/assets/css/sass/elements/content.scss new file mode 100644 index 0000000..4acfa08 --- /dev/null +++ b/web/assets/css/sass/elements/content.scss @@ -0,0 +1,283 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$content-heading-color: #{cv.getVar("text-strong")} !default; +$content-heading-weight: #{cv.getVar("weight-extrabold")} !default; +$content-heading-line-height: 1.125 !default; + +$content-block-margin-bottom: 1em !default; + +$content-blockquote-background-color: #{cv.getVar("background")} !default; +$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default; +$content-blockquote-padding: 1.25em 1.5em !default; + +$content-pre-padding: 1.25em 1.5em !default; + +$content-table-cell-border: 1px solid #{cv.getVar("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: #{cv.getVar("text-strong")} !default; +$content-table-head-cell-border-width: 0 0 2px !default; +$content-table-head-cell-color: #{cv.getVar("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: #{cv.getVar("text-strong")} !default; + +.#{iv.$class-prefix}content { + @include cv.register-vars( + ( + "content-heading-color": #{$content-heading-color}, + "content-heading-weight": #{$content-heading-weight}, + "content-heading-line-height": #{$content-heading-line-height}, + "content-block-margin-bottom": #{$content-block-margin-bottom}, + "content-blockquote-background-color": #{$content-blockquote-background-color}, + "content-blockquote-border-left": #{$content-blockquote-border-left}, + "content-blockquote-padding": #{$content-blockquote-padding}, + "content-pre-padding": #{$content-pre-padding}, + "content-table-cell-border": #{$content-table-cell-border}, + "content-table-cell-border-width": #{$content-table-cell-border-width}, + "content-table-cell-padding": #{$content-table-cell-padding}, + "content-table-cell-heading-color": #{$content-table-cell-heading-color}, + "content-table-head-cell-border-width": #{$content-table-head-cell-border-width}, + "content-table-head-cell-color": #{$content-table-head-cell-color}, + "content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width}, + "content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width}, + "content-table-foot-cell-color": #{$content-table-foot-cell-color}, + ) + ); +} + +.#{iv.$class-prefix}content { + @extend %block; + + // Inline + li + li { + margin-top: 0.25em; + } + + // Block + p, + dl, + ol, + ul, + blockquote, + pre, + table { + &:not(:last-child) { + margin-bottom: cv.getVar("content-block-margin-bottom"); + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + color: cv.getVar("content-heading-color"); + font-weight: cv.getVar("content-heading-weight"); + line-height: cv.getVar("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: cv.getVar("content-blockquote-background-color"); + border-inline-start: cv.getVar("content-blockquote-border-left"); + padding: cv.getVar("content-blockquote-padding"); + } + + ol { + list-style-position: outside; + margin-inline-start: 2em; + margin-top: 1em; + + &:not([type]) { + list-style-type: decimal; + + &.#{iv.$class-prefix}is-lower-alpha { + list-style-type: lower-alpha; + } + + &.#{iv.$class-prefix}is-lower-roman { + list-style-type: lower-roman; + } + + &.#{iv.$class-prefix}is-upper-alpha { + list-style-type: upper-alpha; + } + + &.#{iv.$class-prefix}is-upper-roman { + list-style-type: upper-roman; + } + } + } + + ul { + list-style: disc outside; + margin-inline-start: 2em; + margin-top: 1em; + + ul { + list-style-type: circle; + margin-bottom: 0.25em; + margin-top: 0.25em; + + ul { + list-style-type: square; + } + } + } + + dd { + margin-inline-start: 2em; + } + + figure:not([class]) { + 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 { + @include mx.overflow-touch; + overflow-x: auto; + padding: cv.getVar("content-pre-padding"); + white-space: pre; + word-wrap: normal; + } + + sup, + sub { + font-size: 75%; + } + + table { + td, + th { + border: cv.getVar("content-table-cell-border"); + border-width: cv.getVar("content-table-cell-border-width"); + padding: cv.getVar("content-table-cell-padding"); + vertical-align: top; + } + + th { + color: cv.getVar("content-table-cell-heading-color"); + + &:not([align]) { + text-align: inherit; + } + } + + thead { + td, + th { + border-width: cv.getVar("content-table-head-cell-border-width"); + color: cv.getVar("content-table-head-cell-color"); + } + } + + tfoot { + td, + th { + border-width: cv.getVar("content-table-foot-cell-border-width"); + color: cv.getVar("content-table-foot-cell-color"); + } + } + + tbody { + tr { + &:last-child { + td, + th { + border-bottom-width: cv.getVar( + "content-table-body-last-row-cell-border-bottom-width" + ); + } + } + } + } + } + + .#{iv.$class-prefix}tabs { + li + li { + margin-top: 0; + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-normal { + font-size: cv.getVar("size-normal"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } +} diff --git a/web/assets/css/sass/elements/delete.scss b/web/assets/css/sass/elements/delete.scss new file mode 100644 index 0000000..fb9cb43 --- /dev/null +++ b/web/assets/css/sass/elements/delete.scss @@ -0,0 +1,6 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +.#{iv.$class-prefix}delete { + @include mx.delete; +} diff --git a/web/assets/css/sass/elements/icon.scss b/web/assets/css/sass/elements/icon.scss new file mode 100644 index 0000000..2df2638 --- /dev/null +++ b/web/assets/css/sass/elements/icon.scss @@ -0,0 +1,67 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; + +$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; + +.#{iv.$class-prefix}icon, +.#{iv.$class-prefix}icon-text { + @include cv.register-vars( + ( + "icon-dimensions": #{$icon-dimensions}, + "icon-dimensions-small": #{$icon-dimensions-small}, + "icon-dimensions-medium": #{$icon-dimensions-medium}, + "icon-dimensions-large": #{$icon-dimensions-large}, + "icon-text-spacing": #{$icon-text-spacing}, + ) + ); +} + +.#{iv.$class-prefix}icon { + align-items: center; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + height: cv.getVar("icon-dimensions"); + transition-duration: cv.getVar("duration"); + transition-property: color; + width: cv.getVar("icon-dimensions"); + + // Sizes + &.#{iv.$class-prefix}is-small { + height: cv.getVar("icon-dimensions-small"); + width: cv.getVar("icon-dimensions-small"); + } + + &.#{iv.$class-prefix}is-medium { + height: cv.getVar("icon-dimensions-medium"); + width: cv.getVar("icon-dimensions-medium"); + } + + &.#{iv.$class-prefix}is-large { + height: cv.getVar("icon-dimensions-large"); + width: cv.getVar("icon-dimensions-large"); + } +} + +.#{iv.$class-prefix}icon-text { + align-items: flex-start; + color: inherit; + display: inline-flex; + flex-wrap: wrap; + gap: cv.getVar("icon-text-spacing"); + line-height: cv.getVar("icon-dimensions"); + vertical-align: top; + + .#{iv.$class-prefix}icon { + flex-grow: 0; + flex-shrink: 0; + } +} + +div.#{iv.$class-prefix}icon-text { + display: flex; +} diff --git a/web/assets/css/sass/elements/image.scss b/web/assets/css/sass/elements/image.scss new file mode 100644 index 0000000..8e5106e --- /dev/null +++ b/web/assets/css/sass/elements/image.scss @@ -0,0 +1,62 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/css-variables" as cv; +@use "../utilities/mixins" as mx; + +$dimensions: 16 24 32 48 64 96 128 !default; + +.#{iv.$class-prefix}image { + display: block; + position: relative; + + img { + display: block; + height: auto; + width: 100%; + + &.#{iv.$class-prefix}is-rounded { + border-radius: cv.getVar("radius-rounded"); + } + } + + &.#{iv.$class-prefix}is-fullwidth { + width: 100%; + } + + // Ratio + &.#{iv.$class-prefix}is-square { + img, + .#{iv.$class-prefix}has-ratio { + @include mx.overlay; + height: 100%; + width: 100%; + } + } + + &.#{iv.$class-prefix}is-square { + aspect-ratio: 1; + } + + @each $pair in iv.$aspect-ratios { + $w: nth($pair, 1); + $h: nth($pair, 2); + + &.#{iv.$class-prefix}is-#{$w}by#{$h} { + aspect-ratio: #{$w} / #{$h}; + + img, + .#{iv.$class-prefix}has-ratio { + @include mx.overlay; + height: 100%; + width: 100%; + } + } + } + + // Sizes + @each $dimension in $dimensions { + &.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} { + height: $dimension * 1px; + width: $dimension * 1px; + } + } +} diff --git a/web/assets/css/sass/elements/loader.scss b/web/assets/css/sass/elements/loader.scss new file mode 100644 index 0000000..3cd1a26 --- /dev/null +++ b/web/assets/css/sass/elements/loader.scss @@ -0,0 +1,15 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; + +.#{iv.$class-prefix}loader { + animation: spinAround 500ms infinite linear; + border: 2px solid cv.getVar("border"); + border-radius: cv.getVar("radius-rounded"); + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} diff --git a/web/assets/css/sass/elements/notification.scss b/web/assets/css/sass/elements/notification.scss new file mode 100644 index 0000000..0e0df7e --- /dev/null +++ b/web/assets/css/sass/elements/notification.scss @@ -0,0 +1,105 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$notification-code-background-color: cv.getVar("scheme-main") !default; +$notification-radius: cv.getVar("radius") !default; +$notification-padding: 1.375em 1.5em !default; + +$notification-colors: dv.$colors !default; + +.#{iv.$class-prefix}notification { + @include cv.register-vars( + ( + "notification-h": #{cv.getVar("scheme-h")}, + "notification-s": #{cv.getVar("scheme-s")}, + "notification-background-l": #{cv.getVar("background-l")}, + "notification-color-l": #{cv.getVar("text-strong-l")}, + "notification-code-background-color": #{$notification-code-background-color}, + "notification-radius": #{$notification-radius}, + "notification-padding": #{$notification-padding}, + ) + ); +} + +.#{iv.$class-prefix}notification { + @extend %block; + + background-color: hsl( + cv.getVar("notification-h"), + cv.getVar("notification-s"), + cv.getVar("notification-background-l") + ); + border-radius: cv.getVar("notification-radius"); + color: hsl( + cv.getVar("notification-h"), + cv.getVar("notification-s"), + cv.getVar("notification-color-l") + ); + padding: cv.getVar("notification-padding"); + position: relative; + + a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) { + color: currentColor; + text-decoration: underline; + } + + strong { + color: currentColor; + } + + code, + pre { + background: cv.getVar("notification-code-background-color"); + } + + pre code { + background: transparent; + } + + & > .#{iv.$class-prefix}delete { + position: absolute; + inset-inline-end: 1rem; + top: 1rem; + } + + .#{iv.$class-prefix}title, + .#{iv.$class-prefix}subtitle, + .#{iv.$class-prefix}content { + color: currentColor; + } + + // Colors + @each $name, $pair in $notification-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "notification-h": #{cv.getVar($name, "", "-h")}, + "notification-s": #{cv.getVar($name, "", "-s")}, + "notification-background-l": #{cv.getVar($name, "", "-l")}, + "notification-color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + + &.#{iv.$class-prefix}is-light { + @include cv.register-vars( + ( + "notification-background-l": 90%, + "notification-color-l": #{cv.getVar($name, "", "-light-invert-l")}, + ) + ); + } + + &.#{iv.$class-prefix}is-dark { + @include cv.register-vars( + ( + "notification-background-l": 20%, + "notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")}, + ) + ); + } + } + } +} diff --git a/web/assets/css/sass/elements/progress.scss b/web/assets/css/sass/elements/progress.scss new file mode 100644 index 0000000..2c38af4 --- /dev/null +++ b/web/assets/css/sass/elements/progress.scss @@ -0,0 +1,115 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$progress-bar-background-color: cv.getVar("border-weak") !default; +$progress-value-background-color: cv.getVar("text") !default; +$progress-border-radius: cv.getVar("radius-rounded") !default; + +$progress-indeterminate-duration: 1.5s !default; + +$progress-colors: dv.$colors !default; + +.#{iv.$class-prefix}progress { + @include cv.register-vars( + ( + "progress-border-radius": #{$progress-border-radius}, + "progress-bar-background-color": #{$progress-bar-background-color}, + "progress-value-background-color": #{$progress-value-background-color}, + "progress-indeterminate-duration": #{$progress-indeterminate-duration}, + ) + ); +} + +.#{iv.$class-prefix}progress { + @extend %block; + + appearance: none; + border: none; + border-radius: cv.getVar("progress-border-radius"); + display: block; + height: cv.getVar("size-normal"); + overflow: hidden; + padding: 0; + width: 100%; + + &::-webkit-progress-bar { + background-color: cv.getVar("progress-bar-background-color"); + } + + &::-webkit-progress-value { + background-color: cv.getVar("progress-value-background-color"); + } + + &::-moz-progress-bar { + background-color: cv.getVar("progress-value-background-color"); + } + + &::-ms-fill { + background-color: cv.getVar("progress-value-background-color"); + border: none; + } + + // Colors + @each $name, $pair in $progress-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-var( + "progress-value-background-color", + #{cv.getVar($name)} + ); + } + } + + &:indeterminate { + animation-duration: cv.getVar("progress-indeterminate-duration"); + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; + background-color: cv.getVar("progress-bar-background-color"); + background-image: linear-gradient( + to right, + cv.getVar("progress-value-background-color") 30%, + cv.getVar("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 + &.#{iv.$class-prefix}is-small { + height: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + height: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + height: cv.getVar("size-large"); + } +} + +@keyframes moveIndeterminate { + from { + background-position: 200% 0; + } + + to { + background-position: (-200%) 0; + } +} diff --git a/web/assets/css/sass/elements/table.scss b/web/assets/css/sass/elements/table.scss new file mode 100644 index 0000000..97b6e92 --- /dev/null +++ b/web/assets/css/sass/elements/table.scss @@ -0,0 +1,261 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$table-color: cv.getVar("text-strong") !default; +$table-background-color: cv.getVar("scheme-main") !default; + +$table-cell-border-color: cv.getVar("border") !default; +$table-cell-border-style: solid !default; +$table-cell-border-width: 0 0 1px !default; +$table-cell-padding: 0.5em 0.75em !default; +$table-cell-heading-color: cv.getVar("text-strong") !default; +$table-cell-text-align: left !default; + +$table-head-cell-border-width: 0 0 2px !default; +$table-head-cell-color: cv.getVar("text-strong") !default; +$table-foot-cell-border-width: 2px 0 0 !default; +$table-foot-cell-color: cv.getVar("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: cv.getVar("scheme-main-bis") !default; + +$table-row-active-background-color: cv.getVar("primary") !default; +$table-row-active-color: cv.getVar("primary-invert") !default; + +$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default; +$table-striped-row-even-hover-background-color: cv.getVar( + "scheme-main-ter" +) !default; + +$table-colors: dv.$colors !default; + +.#{iv.$class-prefix}table { + @include cv.register-vars( + ( + "table-color": #{$table-color}, + "table-background-color": #{$table-background-color}, + "table-cell-border-color": #{$table-cell-border-color}, + "table-cell-border-style": #{$table-cell-border-style}, + "table-cell-border-width": #{$table-cell-border-width}, + "table-cell-padding": #{$table-cell-padding}, + "table-cell-heading-color": #{$table-cell-heading-color}, + "table-cell-text-align": #{$table-cell-text-align}, + "table-head-cell-border-width": #{$table-head-cell-border-width}, + "table-head-cell-color": #{$table-head-cell-color}, + "table-foot-cell-border-width": #{$table-foot-cell-border-width}, + "table-foot-cell-color": #{$table-foot-cell-color}, + "table-head-background-color": #{$table-head-background-color}, + "table-body-background-color": #{$table-body-background-color}, + "table-foot-background-color": #{$table-foot-background-color}, + "table-row-hover-background-color": #{$table-row-hover-background-color}, + "table-row-active-background-color": #{$table-row-active-background-color}, + "table-row-active-color": #{$table-row-active-color}, + "table-striped-row-even-background-color": #{$table-striped-row-even-background-color}, + "table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color}, + ) + ); +} + +.#{iv.$class-prefix}table { + @extend %block; + + background-color: cv.getVar("table-background-color"); + color: cv.getVar("table-color"); + + td, + th { + background-color: cv.getVar("table-cell-background-color"); + border-color: cv.getVar("table-cell-border-color"); + border-style: cv.getVar("table-cell-border-style"); + border-width: cv.getVar("table-cell-border-width"); + color: cv.getVar("table-color"); + padding: cv.getVar("table-cell-padding"); + vertical-align: top; + + // Colors + @each $name, $pair in $table-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "table-color": #{cv.getVar($name, "", "-invert")}, + "table-cell-heading-color": #{cv.getVar($name, "", "-invert")}, + "table-cell-background-color": #{cv.getVar($name)}, + "table-cell-border-color": #{cv.getVar($name)}, + ) + ); + } + } + + // Modifiers + &.#{iv.$class-prefix}is-narrow { + white-space: nowrap; + width: 1%; + } + + &.#{iv.$class-prefix}is-selected { + background-color: cv.getVar("table-row-active-background-color"); + color: cv.getVar("table-row-active-color"); + + a, + strong { + color: currentColor; + } + } + + &.#{iv.$class-prefix}is-vcentered { + vertical-align: middle; + } + } + + th { + color: cv.getVar("table-cell-heading-color"); + + &:not([align]) { + text-align: cv.getVar("table-cell-text-align"); + } + } + + tr { + &.#{iv.$class-prefix}is-selected { + background-color: cv.getVar("table-row-active-background-color"); + color: cv.getVar("table-row-active-color"); + + a, + strong { + color: currentColor; + } + + td, + th { + border-color: cv.getVar("table-row-active-color"); + color: currentColor; + } + } + + @each $name, $pair in $table-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "table-color": #{cv.getVar($name, "", "-invert")}, + "table-cell-heading-color": #{cv.getVar($name, "", "-invert")}, + "table-cell-background-color": #{cv.getVar($name)}, + "table-cell-border-color": #{cv.getVar($name)}, + ) + ); + } + } + } + + thead { + background-color: cv.getVar("table-head-background-color"); + + td, + th { + border-width: cv.getVar("table-head-cell-border-width"); + color: cv.getVar("table-head-cell-color"); + } + } + + tfoot { + background-color: cv.getVar("table-foot-background-color"); + + td, + th { + border-width: cv.getVar("table-foot-cell-border-width"); + color: cv.getVar("table-foot-cell-color"); + } + } + + tbody { + background-color: cv.getVar("table-body-background-color"); + + tr { + &:last-child { + td, + th { + border-bottom-width: 0; + } + } + } + } + + // Modifiers + &.#{iv.$class-prefix}is-bordered { + td, + th { + border-width: 1px; + } + + tr { + &:last-child { + td, + th { + border-bottom-width: 1px; + } + } + } + } + + &.#{iv.$class-prefix}is-fullwidth { + width: 100%; + } + + &.#{iv.$class-prefix}is-hoverable { + tbody { + tr:not(.#{iv.$class-prefix}is-selected) { + &:hover { + background-color: cv.getVar("table-row-hover-background-color"); + } + } + } + + &.#{iv.$class-prefix}is-striped { + tbody { + tr:not(.#{iv.$class-prefix}is-selected) { + &:hover { + background-color: cv.getVar("table-row-hover-background-color"); + + &:nth-child(even) { + background-color: cv.getVar( + "table-striped-row-even-hover-background-color" + ); + } + } + } + } + } + } + + &.#{iv.$class-prefix}is-narrow { + td, + th { + padding: 0.25em 0.5em; + } + } + + &.#{iv.$class-prefix}is-striped { + tbody { + tr:not(.#{iv.$class-prefix}is-selected) { + &:nth-child(even) { + background-color: cv.getVar( + "table-striped-row-even-background-color" + ); + } + } + } + } +} + +.#{iv.$class-prefix}table-container { + @extend %block; + @include mx.overflow-touch; + overflow: auto; + overflow-y: hidden; + max-width: 100%; +} diff --git a/web/assets/css/sass/elements/tag.scss b/web/assets/css/sass/elements/tag.scss new file mode 100644 index 0000000..336fa97 --- /dev/null +++ b/web/assets/css/sass/elements/tag.scss @@ -0,0 +1,219 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$tag-h: cv.getVar("scheme-h"); +$tag-s: cv.getVar("scheme-s"); +$tag-background-l: cv.getVar("background-l"); +$tag-background-l-delta: 0%; +$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta"); +$tag-active-background-l-delta: cv.getVar("active-background-l-delta"); +$tag-color-l: cv.getVar("text-l"); +$tag-radius: cv.getVar("radius") !default; +$tag-delete-margin: 1px !default; + +$tag-colors: dv.$colors !default; + +.#{iv.$class-prefix}tags { + @extend %block; + + align-items: center; + color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l")); + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: flex-start; + + // Sizes + &.#{iv.$class-prefix}are-medium { + .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not( + .#{iv.$class-prefix}is-large + ) { + font-size: cv.getVar("size-normal"); + } + } + + &.#{iv.$class-prefix}are-large { + .#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not( + .#{iv.$class-prefix}is-medium + ) { + font-size: cv.getVar("size-medium"); + } + } + + &.#{iv.$class-prefix}is-centered { + gap: 0.25rem; + justify-content: center; + } + + &.#{iv.$class-prefix}is-right { + justify-content: flex-end; + } + + &.#{iv.$class-prefix}has-addons { + gap: 0; + + .#{iv.$class-prefix}tag { + &:not(:first-child) { + border-start-start-radius: 0; // Top left + border-end-start-radius: 0; // Top right + } + + &:not(:last-child) { + border-start-end-radius: 0; // Bottom left + border-end-end-radius: 0; // Bottom right + } + } + } +} + +.#{iv.$class-prefix}tag { + @include cv.register-vars( + ( + "tag-h": #{$tag-h}, + "tag-s": #{$tag-s}, + "tag-background-l": #{$tag-background-l}, + "tag-background-l-delta": #{$tag-background-l-delta}, + "tag-hover-background-l-delta": #{$tag-hover-background-l-delta}, + "tag-active-background-l-delta": #{$tag-active-background-l-delta}, + "tag-color-l": #{$tag-color-l}, + "tag-radius": #{$tag-radius}, + "tag-delete-margin": #{$tag-delete-margin}, + ) + ); + + align-items: center; + background-color: hsl( + cv.getVar("tag-h"), + cv.getVar("tag-s"), + calc( + #{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")} + ) + ); + border-radius: $tag-radius; + color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l")); + display: inline-flex; + font-size: cv.getVar("size-small"); + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; + + .#{iv.$class-prefix}delete { + margin-inline-start: 0.25rem; + margin-inline-end: -0.375rem; + } + + // Colors + @each $name, $pair in $tag-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "tag-h": #{cv.getVar($name, "", "-h")}, + "tag-s": #{cv.getVar($name, "", "-s")}, + "tag-background-l": #{cv.getVar($name, "", "-l")}, + "tag-color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + + &.#{iv.$class-prefix}is-light { + @include cv.register-vars( + ( + "tag-background-l": #{cv.getVar("light-l")}, + "tag-color-l": #{cv.getVar($name, "", "-light-invert-l")}, + ) + ); + } + } + } + + // Sizes + &.#{iv.$class-prefix}is-normal { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-normal"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-medium"); + } + + .#{iv.$class-prefix}icon { + &:first-child:not(:last-child) { + margin-inline-start: -0.375em; + margin-inline-end: 0.1875em; + } + + &:last-child:not(:first-child) { + margin-inline-start: 0.1875em; + margin-inline-end: -0.375em; + } + + &:first-child:last-child { + margin-inline-start: -0.375em; + margin-inline-end: -0.375em; + } + } + + // Modifiers + &.#{iv.$class-prefix}is-delete { + margin-inline-start: cv.getVar("tag-delete-margin"); + 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; + } + } + + &.#{iv.$class-prefix}is-rounded { + border-radius: cv.getVar("radius-rounded"); + } +} + +a.#{iv.$class-prefix}tag, +button.#{iv.$class-prefix}tag, +.#{iv.$class-prefix}tag.is-hoverable { + cursor: pointer; + + &:hover { + @include cv.register-vars( + ( + "tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")}, + ) + ); + } +} diff --git a/web/assets/css/sass/elements/title.scss b/web/assets/css/sass/elements/title.scss new file mode 100644 index 0000000..b416689 --- /dev/null +++ b/web/assets/css/sass/elements/title.scss @@ -0,0 +1,128 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$title-color: cv.getVar("text-strong") !default; +$title-family: false !default; +$title-size: cv.getVar("size-3") !default; +$title-weight: cv.getVar("weight-extrabold") !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: cv.getVar("text") !default; +$subtitle-family: false !default; +$subtitle-size: cv.getVar("size-5") !default; +$subtitle-weight: cv.getVar("weight-normal") !default; +$subtitle-line-height: 1.25 !default; +$subtitle-strong-color: cv.getVar("text-strong") !default; +$subtitle-strong-weight: cv.getVar("weight-semibold") !default; + +.#{iv.$class-prefix}title, +.#{iv.$class-prefix}subtitle { + @include cv.register-vars( + ( + "title-color": #{$title-color}, + "title-family": #{$title-family}, + "title-size": #{$title-size}, + "title-weight": #{$title-weight}, + "title-line-height": #{$title-line-height}, + "title-strong-color": #{$title-strong-color}, + "title-strong-weight": #{$title-strong-weight}, + "title-sub-size": #{$title-sub-size}, + "title-sup-size": #{$title-sup-size}, + "subtitle-color": #{$subtitle-color}, + "subtitle-family": #{$subtitle-family}, + "subtitle-size": #{$subtitle-size}, + "subtitle-weight": #{$subtitle-weight}, + "subtitle-line-height": #{$subtitle-line-height}, + "subtitle-strong-color": #{$subtitle-strong-color}, + "subtitle-strong-weight": #{$subtitle-strong-weight}, + ) + ); +} + +.#{iv.$class-prefix}title, +.#{iv.$class-prefix}subtitle { + @extend %block; + word-break: break-word; + + em, + span { + font-weight: inherit; + } + + sub { + font-size: cv.getVar("title-sub-size"); + } + + sup { + font-size: cv.getVar("title-sup-size"); + } + + .#{iv.$class-prefix}tag { + vertical-align: middle; + } +} + +.#{iv.$class-prefix}title { + color: cv.getVar("title-color"); + font-size: cv.getVar("title-size"); + font-weight: cv.getVar("title-weight"); + line-height: cv.getVar("title-line-height"); + + @if $title-family { + font-family: cv.getVar("title-family"); + } + + strong { + color: cv.getVar("title-strong-color"); + font-weight: cv.getVar("title-strong-weight"); + } + + &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) { + margin-bottom: 0; + } + + // Sizes + @each $size in dv.$sizes { + $i: index(dv.$sizes, $size); + + &.#{iv.$class-prefix}is-#{$i} { + font-size: $size; + } + } +} + +.#{iv.$class-prefix}subtitle { + color: cv.getVar("subtitle-color"); + font-size: cv.getVar("subtitle-size"); + font-weight: cv.getVar("subtitle-weight"); + line-height: cv.getVar("subtitle-line-height"); + + @if $subtitle-family { + font-family: cv.getVar("subtitle-family"); + } + + strong { + color: cv.getVar("subtitle-strong-color"); + font-weight: cv.getVar("subtitle-strong-weight"); + } + + &:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) { + margin-bottom: 0; + } + + // Sizes + @each $size in dv.$sizes { + $i: index(dv.$sizes, $size); + + &.#{iv.$class-prefix}is-#{$i} { + font-size: $size; + } + } +} diff --git a/web/assets/css/sass/form/_index.scss b/web/assets/css/sass/form/_index.scss new file mode 100644 index 0000000..7c1214d --- /dev/null +++ b/web/assets/css/sass/form/_index.scss @@ -0,0 +1,9 @@ +/* Bulma Form */ +@charset "utf-8"; + +@forward "shared"; +@forward "input-textarea"; +@forward "checkbox-radio"; +@forward "select"; +@forward "file"; +@forward "tools"; diff --git a/web/assets/css/sass/form/checkbox-radio.scss b/web/assets/css/sass/form/checkbox-radio.scss new file mode 100644 index 0000000..39dc530 --- /dev/null +++ b/web/assets/css/sass/form/checkbox-radio.scss @@ -0,0 +1,32 @@ +@use "shared"; +@use "../utilities/initial-variables" as iv; + +%checkbox-radio { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; + + input { + cursor: pointer; + } + + &[disabled], + fieldset[disabled] &, + input[disabled] { + color: shared.$input-disabled-color; + cursor: not-allowed; + } +} + +.#{iv.$class-prefix}checkbox { + @extend %checkbox-radio; +} + +.#{iv.$class-prefix}radio { + @extend %checkbox-radio; + + & + .#{iv.$class-prefix}radio { + margin-inline-start: 0.5em; + } +} diff --git a/web/assets/css/sass/form/file.scss b/web/assets/css/sass/form/file.scss new file mode 100644 index 0000000..c75d4a1 --- /dev/null +++ b/web/assets/css/sass/form/file.scss @@ -0,0 +1,330 @@ +@use "shared"; +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/controls"; +@use "../utilities/extends"; + +$file-radius: cv.getVar("radius") !default; + +$file-h: cv.getVar("scheme-h"); +$file-s: cv.getVar("scheme-s"); +$file-background-l: cv.getVar("scheme-main-ter-l"); +$file-background-l-delta: 0%; +$file-hover-background-l-delta: -5%; +$file-active-background-l-delta: -10%; +$file-border-l: cv.getVar("border-l"); +$file-border-l-delta: 0%; +$file-hover-border-l-delta: -10%; +$file-active-border-l-delta: -20%; +$file-cta-color-l: cv.getVar("text-strong-l"); +$file-name-color-l: cv.getVar("text-strong-l"); +$file-color-l-delta: 0%; +$file-hover-color-l-delta: -5%; +$file-active-color-l-delta: -10%; + +$file-cta-color: cv.getVar("text") !default; +$file-cta-hover-color: cv.getVar("text-strong") !default; +$file-cta-active-color: cv.getVar("text-strong") !default; + +$file-name-border-color: cv.getVar("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: shared.$form-colors !default; + +.#{iv.$class-prefix}file { + @extend %block; + @extend %unselectable; + + @include cv.register-vars( + ( + "file-radius": #{$file-radius}, + "file-name-border-color": #{$file-name-border-color}, + "file-name-border-style": #{$file-name-border-style}, + "file-name-border-width": #{$file-name-border-width}, + "file-name-max-width": #{$file-name-max-width}, + "file-h": #{$file-h}, + "file-s": #{$file-s}, + "file-background-l": #{$file-background-l}, + "file-background-l-delta": #{$file-background-l-delta}, + "file-hover-background-l-delta": #{$file-hover-background-l-delta}, + "file-active-background-l-delta": #{$file-active-background-l-delta}, + "file-border-l": #{$file-border-l}, + "file-border-l-delta": #{$file-border-l-delta}, + "file-hover-border-l-delta": #{$file-hover-border-l-delta}, + "file-active-border-l-delta": #{$file-active-border-l-delta}, + "file-cta-color-l": #{$file-cta-color-l}, + "file-name-color-l": #{$file-name-color-l}, + "file-color-l-delta": #{$file-color-l-delta}, + "file-hover-color-l-delta": #{$file-hover-color-l-delta}, + "file-active-color-l-delta": #{$file-active-color-l-delta}, + ) + ); + + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; + + // Colors + @each $name, $pair in $file-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "file-h": #{cv.getVar($name, "", "-h")}, + "file-s": #{cv.getVar($name, "", "-s")}, + "file-background-l": #{cv.getVar($name, "", "-l")}, + "file-border-l": #{cv.getVar($name, "", "-l")}, + "file-cta-color-l": #{cv.getVar($name, "", "-invert-l")}, + "file-name-color-l": #{cv.getVar($name, "", "-on-scheme-l")}, + ) + ); + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-normal { + font-size: cv.getVar("size-normal"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + + .#{iv.$class-prefix}file-icon { + .#{iv.$class-prefix}fa { + font-size: 1.5rem; + } + } + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + + .#{iv.$class-prefix}file-icon { + .#{iv.$class-prefix}fa { + font-size: 2rem; + } + } + } + + // Modifiers + &.#{iv.$class-prefix}has-name { + .#{iv.$class-prefix}file-cta { + border-end-end-radius: 0; + border-start-end-radius: 0; + } + + .#{iv.$class-prefix}file-name { + border-end-start-radius: 0; + border-start-start-radius: 0; + } + + &.#{iv.$class-prefix}is-empty { + .#{iv.$class-prefix}file-cta { + border-radius: cv.getVar("file-radius"); + } + + .#{iv.$class-prefix}file-name { + display: none; + } + } + } + + &.#{iv.$class-prefix}is-boxed { + .#{iv.$class-prefix}file-label { + flex-direction: column; + } + + .#{iv.$class-prefix}file-cta { + flex-direction: column; + height: auto; + padding: 1em 3em; + } + + .#{iv.$class-prefix}file-name { + border-width: 0 1px 1px; + } + + .#{iv.$class-prefix}file-icon { + height: 1.5em; + width: 1.5em; + + .#{iv.$class-prefix}fa { + font-size: 1.5rem; + } + } + + &.#{iv.$class-prefix}is-small { + .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { + font-size: 1rem; + } + } + + &.#{iv.$class-prefix}is-medium { + .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { + font-size: 2rem; + } + } + + &.#{iv.$class-prefix}is-large { + .#{iv.$class-prefix}file-icon .#{iv.$class-prefix}fa { + font-size: 2.5rem; + } + } + + &.#{iv.$class-prefix}has-name { + .#{iv.$class-prefix}file-cta { + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: cv.getVar("file-radius"); + border-start-start-radius: cv.getVar("file-radius"); + } + + .#{iv.$class-prefix}file-name { + border-end-end-radius: cv.getVar("file-radius"); + border-end-start-radius: cv.getVar("file-radius"); + border-start-end-radius: 0; + border-start-start-radius: 0; + border-width: 0 1px 1px; + } + } + } + + &.#{iv.$class-prefix}is-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}is-fullwidth { + .#{iv.$class-prefix}file-label { + width: 100%; + } + + .#{iv.$class-prefix}file-name { + flex-grow: 1; + max-width: none; + } + } + + &.#{iv.$class-prefix}is-right { + justify-content: flex-end; + + .#{iv.$class-prefix}file-cta { + border-radius: 0 cv.getVar("file-radius") cv.getVar("file-radius") 0; + } + + .#{iv.$class-prefix}file-name { + border-radius: cv.getVar("file-radius") 0 0 cv.getVar("file-radius"); + border-width: 1px 0 1px 1px; + order: -1; + } + } +} + +.#{iv.$class-prefix}file-label { + align-items: stretch; + display: flex; + cursor: pointer; + justify-content: flex-start; + overflow: hidden; + position: relative; + + &:hover { + @include cv.register-vars( + ( + "file-background-l-delta": #{cv.getVar("file-hover-background-l-delta")}, + "file-border-l-delta": #{cv.getVar("file-hover-border-l-delta")}, + "file-color-l-delta": #{cv.getVar("file-hover-color-l-delta")}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "file-background-l-delta": #{cv.getVar("file-active-background-l-delta")}, + "file-border-l-delta": #{cv.getVar("file-active-border-l-delta")}, + "file-color-l-delta": #{cv.getVar("file-active-color-l-delta")}, + ) + ); + } +} + +.#{iv.$class-prefix}file-input { + height: 100%; + left: 0; + opacity: 0; + outline: none; + position: absolute; + top: 0; + width: 100%; +} + +.#{iv.$class-prefix}file-cta, +.#{iv.$class-prefix}file-name { + @extend %control; + border-color: hsl( + cv.getVar("file-h"), + cv.getVar("file-s"), + calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-border-l-delta")}) + ); + border-radius: cv.getVar("file-radius"); + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; +} + +.#{iv.$class-prefix}file-cta { + background-color: hsl( + cv.getVar("file-h"), + cv.getVar("file-s"), + calc( + #{cv.getVar("file-background-l")} + #{cv.getVar( + "file-background-l-delta" + )} + ) + ); + color: hsl( + cv.getVar("file-h"), + cv.getVar("file-s"), + calc(#{cv.getVar("file-cta-color-l")} + #{cv.getVar("file-color-l-delta")}) + ); +} + +.#{iv.$class-prefix}file-name { + border-color: hsl( + cv.getVar("file-h"), + cv.getVar("file-s"), + calc(#{cv.getVar("file-border-l")} + #{cv.getVar("file-color-l-delta")}) + ); + border-style: cv.getVar("file-name-border-style"); + border-width: cv.getVar("file-name-border-width"); + color: hsl( + cv.getVar("file-h"), + cv.getVar("file-s"), + calc(#{cv.getVar("file-name-color-l")} + #{cv.getVar("file-color-l-delta")}) + ); + display: block; + max-width: cv.getVar("file-name-max-width"); + overflow: hidden; + text-align: inherit; + text-overflow: ellipsis; +} + +.#{iv.$class-prefix}file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + margin-inline-end: 0.5em; + width: 1em; + + .#{iv.$class-prefix}fa { + font-size: 1rem; + } +} diff --git a/web/assets/css/sass/form/input-textarea.scss b/web/assets/css/sass/form/input-textarea.scss new file mode 100644 index 0000000..98adbe3 --- /dev/null +++ b/web/assets/css/sass/form/input-textarea.scss @@ -0,0 +1,123 @@ +@use "shared"; +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/controls"; + +$textarea-padding: cv.getVar("control-padding-horizontal") !default; +$textarea-max-height: 40em !default; +$textarea-min-height: 8em !default; + +$textarea-colors: shared.$form-colors !default; + +%input-textarea { + @extend %input; + + @include cv.register-vars( + ( + "input-h": #{cv.getVar("scheme-h")}, + "input-s": #{cv.getVar("scheme-s")}, + "input-border-style": solid, + "input-border-width": 1px, + "input-border-l": #{cv.getVar("border-l")}, + ) + ); + + box-shadow: shared.$input-shadow; + max-width: 100%; + width: 100%; + + &[readonly] { + box-shadow: none; + } + + // Colors + @each $name, $pair in $textarea-colors { + $color: nth($pair, 1); + + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "input-h": #{cv.getVar($name, "", "-h")}, + "input-s": #{cv.getVar($name, "", "-s")}, + "input-l": #{cv.getVar($name, "", "-l")}, + "input-focus-h": #{cv.getVar($name, "", "-h")}, + "input-focus-s": #{cv.getVar($name, "", "-s")}, + "input-focus-l": #{cv.getVar($name, "", "-l")}, + "input-border-l": #{cv.getVar($name, "", "-l")}, + ) + ); + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + @include controls.control-small; + } + + &.#{iv.$class-prefix}is-medium { + @include controls.control-medium; + } + + &.#{iv.$class-prefix}is-large { + @include controls.control-large; + } + + // Modifiers + &.#{iv.$class-prefix}is-fullwidth { + display: block; + width: 100%; + } + + &.#{iv.$class-prefix}is-inline { + display: inline; + width: auto; + } +} + +.#{iv.$class-prefix}input { + @extend %input-textarea; + + &.#{iv.$class-prefix}is-rounded { + border-radius: cv.getVar("radius-rounded"); + padding-left: calc(#{controls.$control-padding-horizontal} + 0.375em); + padding-right: calc(#{controls.$control-padding-horizontal} + 0.375em); + } + + &.#{iv.$class-prefix}is-static { + background-color: transparent; + border-color: transparent; + box-shadow: none; + padding-left: 0; + padding-right: 0; + } +} + +.#{iv.$class-prefix}textarea { + @extend %input-textarea; + @include cv.register-vars( + ( + "textarea-padding": #{$textarea-padding}, + "textarea-max-height": #{$textarea-max-height}, + "textarea-min-height": #{$textarea-min-height}, + ) + ); + display: block; + max-width: 100%; + min-width: 100%; + padding: cv.getVar("textarea-padding"); + resize: vertical; + + &:not([rows]) { + max-height: cv.getVar("textarea-max-height"); + min-height: cv.getVar("textarea-min-height"); + } + + &[rows] { + height: initial; + } + + // Modifiers + &.#{iv.$class-prefix}has-fixed-size { + resize: none; + } +} diff --git a/web/assets/css/sass/form/select.scss b/web/assets/css/sass/form/select.scss new file mode 100644 index 0000000..b68861b --- /dev/null +++ b/web/assets/css/sass/form/select.scss @@ -0,0 +1,143 @@ +@use "shared"; +@use "../utilities/controls"; +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; + +$select-colors: shared.$form-colors !default; + +.#{iv.$class-prefix}select { + @include cv.register-vars( + ( + "input-h": #{cv.getVar("scheme-h")}, + "input-s": #{cv.getVar("scheme-s")}, + "input-border-style": solid, + "input-border-width": 1px, + "input-border-l": #{cv.getVar("border-l")}, + ) + ); + + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; + + &:not(.#{iv.$class-prefix}is-multiple) { + height: shared.$input-height; + } + + &:not(.#{iv.$class-prefix}is-multiple):not(.#{iv.$class-prefix}is-loading) { + &::after { + @extend %arrow; + inset-inline-end: 1.125em; + z-index: 4; + } + } + + &.#{iv.$class-prefix}is-rounded { + select { + border-radius: cv.getVar("radius-rounded"); + padding-inline-start: 1em; + } + } + + 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: shared.$input-disabled-border-color; + } + + &:not([multiple]) { + padding-inline-end: 2.5em; + } + + &[multiple] { + height: auto; + padding: 0; + + option { + padding: 0.5em 1em; + } + } + } + + // Colors + @each $name, $pair in $select-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "input-h": #{cv.getVar($name, "", "-h")}, + "input-s": #{cv.getVar($name, "", "-s")}, + "input-l": #{cv.getVar($name, "", "-l")}, + "input-focus-h": #{cv.getVar($name, "", "-h")}, + "input-focus-s": #{cv.getVar($name, "", "-s")}, + "input-focus-l": #{cv.getVar($name, "", "-l")}, + "input-border-l": #{cv.getVar($name, "", "-l")}, + ) + ); + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + @include controls.control-small; + } + + &.#{iv.$class-prefix}is-medium { + @include controls.control-medium; + } + + &.#{iv.$class-prefix}is-large { + @include controls.control-large; + } + + // Modifiers + &.#{iv.$class-prefix}is-disabled { + &::after { + border-color: shared.$input-disabled-color !important; + opacity: 0.5; + } + } + + &.#{iv.$class-prefix}is-fullwidth { + width: 100%; + + select { + width: 100%; + } + } + + &.#{iv.$class-prefix}is-loading { + &::after { + @extend %loader; + inset-inline-end: 0.625em; + margin-top: 0; + position: absolute; + top: 0.625em; + transform: none; + } + + &.#{iv.$class-prefix}is-small:after { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium:after { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large:after { + font-size: cv.getVar("size-large"); + } + } +} diff --git a/web/assets/css/sass/form/shared.scss b/web/assets/css/sass/form/shared.scss new file mode 100644 index 0000000..14325eb --- /dev/null +++ b/web/assets/css/sass/form/shared.scss @@ -0,0 +1,172 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$form-colors: dv.$colors !default; + +$input-h: #{cv.getVar("scheme-h")} !default; +$input-s: #{cv.getVar("scheme-s")} !default; +$input-l: #{cv.getVar("scheme-main-l")} !default; +$input-border-l: cv.getVar("border-l") !default; +$input-border-l-delta: 0% !default; +$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default; +$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default; +$input-color-l: cv.getVar("text-strong-l") !default; +$input-background-l: cv.getVar("scheme-main-l") !default; +$input-background-l-delta: 0% !default; +$input-height: cv.getVar("control-height") !default; +$input-shadow: inset 0 0.0625em 0.125em + hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")}, + 0.05 + ) !default; +$input-placeholder-color: hsla( + #{cv.getVar("text-h")}, + #{cv.getVar("text-s")}, + #{cv.getVar("text-strong-l")}, + 0.3 +) !default; + +$input-focus-h: cv.getVar("focus-h") !default; +$input-focus-s: cv.getVar("focus-s") !default; +$input-focus-l: cv.getVar("focus-l") !default; +$input-focus-shadow-size: cv.getVar("focus-shadow-size") !default; +$input-focus-shadow-alpha: cv.getVar("focus-shadow-alpha") !default; + +$input-disabled-color: cv.getVar("text-weak") !default; +$input-disabled-background-color: cv.getVar("background") !default; +$input-disabled-border-color: cv.getVar("background") !default; +$input-disabled-placeholder-color: hsla( + #{cv.getVar("text-h")}, + #{cv.getVar("text-s")}, + #{cv.getVar("text-weak-l")}, + 0.3 +) !default; + +$input-arrow: cv.getVar("link") !default; + +$input-icon-color: cv.getVar("text-light") !default; +$input-icon-hover-color: cv.getVar("text-weak") !default; +$input-icon-focus-color: cv.getVar("link") !default; + +$input-radius: cv.getVar("radius") !default; + +.#{iv.$class-prefix}control, +.#{iv.$class-prefix}input, +.#{iv.$class-prefix}textarea, +.#{iv.$class-prefix}select select { + @include cv.register-vars( + ( + "input-h": #{$input-h}, + "input-s": #{$input-s}, + "input-l": #{$input-l}, + "input-border-l": #{$input-border-l}, + "input-border-l-delta": #{$input-border-l-delta}, + "input-hover-border-l-delta": #{$input-hover-border-l-delta}, + "input-active-border-l-delta": #{$input-active-border-l-delta}, + "input-focus-h": #{$input-focus-h}, + "input-focus-s": #{$input-focus-s}, + "input-focus-l": #{$input-focus-l}, + "input-focus-shadow-size": #{$input-focus-shadow-size}, + "input-focus-shadow-alpha": #{$input-focus-shadow-alpha}, + "input-color-l": #{$input-color-l}, + "input-background-l": #{$input-background-l}, + "input-background-l-delta": #{$input-background-l-delta}, + "input-height": #{$input-height}, + "input-shadow": #{$input-shadow}, + "input-placeholder-color": #{$input-placeholder-color}, + "input-disabled-color": #{$input-disabled-color}, + "input-disabled-background-color": #{$input-disabled-background-color}, + "input-disabled-border-color": #{$input-disabled-border-color}, + "input-disabled-placeholder-color": #{$input-disabled-placeholder-color}, + "input-arrow": #{$input-arrow}, + "input-icon-color": #{$input-icon-color}, + "input-icon-hover-color": #{$input-icon-hover-color}, + "input-icon-focus-color": #{$input-icon-focus-color}, + "input-radius": #{$input-radius}, + ) + ); +} + +@mixin input { + @extend %control; + background-color: hsl( + #{cv.getVar("input-h")}, + #{cv.getVar("input-s")}, + calc( + #{cv.getVar("input-background-l")} + #{cv.getVar( + "input-background-l-delta" + )} + ) + ); + border-color: hsl( + cv.getVar("input-h"), + cv.getVar("input-s"), + calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")}) + ); + border-radius: cv.getVar("input-radius"); + color: hsl( + #{cv.getVar("input-h")}, + #{cv.getVar("input-s")}, + #{cv.getVar("input-color-l")} + ); + + @include mx.placeholder { + color: cv.getVar("input-placeholder-color"); + } + + &:hover, + &.#{iv.$class-prefix}is-hovered { + @include cv.register-vars( + ( + "input-border-l-delta": #{cv.getVar("input-hover-border-l-delta")}, + ) + ); + } + + &:active, + &.#{iv.$class-prefix}is-active { + @include cv.register-vars( + ( + "input-border-l-delta": #{cv.getVar("input-active-border-l-delta")}, + ) + ); + } + + &:focus, + &:focus-within, + &.#{iv.$class-prefix}is-focused { + border-color: hsl( + cv.getVar("input-focus-h"), + cv.getVar("input-focus-s"), + cv.getVar("input-focus-l") + ); + box-shadow: cv.getVar("input-focus-shadow-size") + hsla( + cv.getVar("input-focus-h"), + cv.getVar("input-focus-s"), + cv.getVar("input-focus-l"), + cv.getVar("input-focus-shadow-alpha") + ); + } + + &[disabled], + fieldset[disabled] & { + background-color: cv.getVar("input-disabled-background-color"); + border-color: cv.getVar("input-disabled-border-color"); + box-shadow: none; + color: cv.getVar("input-disabled-color"); + + @include mx.placeholder { + color: cv.getVar("input-disabled-placeholder-color"); + } + } +} + +%input { + @include input; +} diff --git a/web/assets/css/sass/form/tools.scss b/web/assets/css/sass/form/tools.scss new file mode 100644 index 0000000..a4f20bb --- /dev/null +++ b/web/assets/css/sass/form/tools.scss @@ -0,0 +1,341 @@ +@use "shared"; +@use "../utilities/controls"; +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$label-color: cv.getVar("text-strong") !default; +$label-weight: cv.getVar("weight-semibold") !default; + +$help-size: cv.getVar("size-small") !default; + +$label-colors: shared.$form-colors !default; + +.#{iv.$class-prefix}label { + color: $label-color; + display: block; + font-size: cv.getVar("size-normal"); + font-weight: $label-weight; + + &:not(:last-child) { + margin-bottom: 0.5em; + } + + // Sizes + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + } +} + +.#{iv.$class-prefix}help { + display: block; + font-size: $help-size; + margin-top: 0.25rem; + + @each $name, $pair in $label-colors { + &.#{iv.$class-prefix}is-#{$name} { + color: hsl( + #{cv.getVar($name, "", "-h")}, + #{cv.getVar($name, "", "-s")}, + #{cv.getVar($name, "", "-on-scheme-l")} + ); + } + } +} + +// Containers + +.#{iv.$class-prefix}field { + @include cv.register-vars( + ( + "block-spacing": 0.75rem, + ) + ); + + @extend %block; + + // Modifiers + &.#{iv.$class-prefix}has-addons { + display: flex; + justify-content: flex-start; + + .#{iv.$class-prefix}control { + &:not(:last-child) { + margin-inline-end: -1px; + } + + &:not(:first-child):not(:last-child) { + .#{iv.$class-prefix}button, + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + border-radius: 0; + } + } + + &:first-child:not(:only-child) { + .#{iv.$class-prefix}button, + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + // @include ltr { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + // } + } + } + + &:last-child:not(:only-child) { + .#{iv.$class-prefix}button, + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + // @include ltr { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + // } + } + } + + .#{iv.$class-prefix}button, + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + &:not([disabled]) { + &:hover, + &.#{iv.$class-prefix}is-hovered { + z-index: 2; + } + + &:focus, + &.#{iv.$class-prefix}is-focused, + &:active, + &.#{iv.$class-prefix}is-active { + z-index: 3; + + &:hover { + z-index: 4; + } + } + } + } + + &.#{iv.$class-prefix}is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.#{iv.$class-prefix}has-addons-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}has-addons-right { + justify-content: flex-end; + } + + &.#{iv.$class-prefix}has-addons-fullwidth { + .#{iv.$class-prefix}control { + flex-grow: 1; + flex-shrink: 0; + } + } + } + + &.#{iv.$class-prefix}is-grouped { + display: flex; + gap: 0.75rem; + justify-content: flex-start; + + & > .#{iv.$class-prefix}control { + flex-shrink: 0; + + &.#{iv.$class-prefix}is-expanded { + flex-grow: 1; + flex-shrink: 1; + } + } + + &.#{iv.$class-prefix}is-grouped-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}is-grouped-right { + justify-content: flex-end; + } + + &.#{iv.$class-prefix}is-grouped-multiline { + flex-wrap: wrap; + } + } + + &.#{iv.$class-prefix}is-horizontal { + @include mx.tablet { + display: flex; + } + } +} + +.#{iv.$class-prefix}field-label { + .#{iv.$class-prefix}label { + font-size: inherit; + } + + @include mx.mobile { + margin-bottom: 0.5rem; + } + + @include mx.tablet { + flex-basis: 0; + flex-grow: 1; + flex-shrink: 0; + margin-inline-end: 1.5rem; + text-align: right; + + &.#{iv.$class-prefix}is-small { + font-size: cv.getVar("size-small"); + padding-top: 0.375em; + } + + &.#{iv.$class-prefix}is-normal { + padding-top: 0.375em; + } + + &.#{iv.$class-prefix}is-medium { + font-size: cv.getVar("size-medium"); + padding-top: 0.375em; + } + + &.#{iv.$class-prefix}is-large { + font-size: cv.getVar("size-large"); + padding-top: 0.375em; + } + } +} + +.#{iv.$class-prefix}field-body { + .#{iv.$class-prefix}field .#{iv.$class-prefix}field { + margin-bottom: 0; + } + + @include mx.tablet { + display: flex; + flex-basis: 0; + flex-grow: 5; + flex-shrink: 1; + + .#{iv.$class-prefix}field { + margin-bottom: 0; + } + + & > .#{iv.$class-prefix}field { + flex-shrink: 1; + + &:not(.#{iv.$class-prefix}is-narrow) { + flex-grow: 1; + } + + &:not(:last-child) { + margin-inline-end: 0.75rem; + } + } + } +} + +.#{iv.$class-prefix}control { + box-sizing: border-box; + clear: both; + font-size: cv.getVar("size-normal"); + position: relative; + text-align: inherit; + + // Modifiers + &.#{iv.$class-prefix}has-icons-left, + &.#{iv.$class-prefix}has-icons-right { + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select { + &:hover { + & ~ .#{iv.$class-prefix}icon { + color: cv.getVar("input-icon-hover-color"); + } + } + + &:focus { + & ~ .#{iv.$class-prefix}icon { + color: cv.getVar("input-icon-focus-color"); + } + } + + &.#{iv.$class-prefix}is-small ~ .#{iv.$class-prefix}icon { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium ~ .#{iv.$class-prefix}icon { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large ~ .#{iv.$class-prefix}icon { + font-size: cv.getVar("size-large"); + } + } + + .#{iv.$class-prefix}icon { + color: cv.getVar("input-icon-color"); + height: cv.getVar("input-height"); + pointer-events: none; + position: absolute; + top: 0; + width: cv.getVar("input-height"); + z-index: 4; + } + } + + &.#{iv.$class-prefix}has-icons-left { + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + padding-left: cv.getVar("input-height"); + } + + .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-left { + left: 0; + } + } + + &.#{iv.$class-prefix}has-icons-right { + .#{iv.$class-prefix}input, + .#{iv.$class-prefix}select select { + padding-right: cv.getVar("input-height"); + } + + .#{iv.$class-prefix}icon.#{iv.$class-prefix}is-right { + right: 0; + } + } + + &.#{iv.$class-prefix}is-loading { + &::after { + @extend %loader; + inset-inline-end: 0.75em; + position: absolute !important; + top: 0.75em; + z-index: 4; + } + + &.#{iv.$class-prefix}is-small:after { + font-size: cv.getVar("size-small"); + } + + &.#{iv.$class-prefix}is-medium:after { + font-size: cv.getVar("size-medium"); + } + + &.#{iv.$class-prefix}is-large:after { + font-size: cv.getVar("size-large"); + } + } +} diff --git a/web/assets/css/sass/grid/_index.scss b/web/assets/css/sass/grid/_index.scss new file mode 100644 index 0000000..70d64ca --- /dev/null +++ b/web/assets/css/sass/grid/_index.scss @@ -0,0 +1,5 @@ +/* Bulma Grid */ +@charset "utf-8"; + +@forward "columns"; +@forward "grid"; diff --git a/web/assets/css/sass/grid/columns-v2.scss b/web/assets/css/sass/grid/columns-v2.scss new file mode 100644 index 0000000..bfb3aa0 --- /dev/null +++ b/web/assets/css/sass/grid/columns-v2.scss @@ -0,0 +1,957 @@ +@use "sass:math"; +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$column-gap: 1.5rem !default; + +:root { + @include cv.register-vars( + ( + "column-gap": #{$column-gap}, + ) + ); +} + +.#{iv.$class-prefix}column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-narrow { + flex: none; + width: unset; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-full { + flex: none; + width: 100%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-three-quarters { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-two-thirds { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-half { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-third { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-quarter { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-fifth { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-two-fifths { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-three-fifths { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-four-fifths { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-three-quarters { + margin-inline-start: 75%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-two-thirds { + margin-inline-start: 66.6666%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-half { + margin-inline-start: 50%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-third { + margin-inline-start: 33.3333%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-quarter { + margin-inline-start: 25%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-fifth { + margin-inline-start: 20%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-two-fifths { + margin-inline-start: 40%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-three-fifths { + margin-inline-start: 60%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-four-fifths { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-#{$i} { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2) + ); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-#{$i} { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + + @include mx.mobile { + &.#{iv.$class-prefix}is-narrow-mobile { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-mobile { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-mobile { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds-mobile { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half-mobile { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third-mobile { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter-mobile { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth-mobile { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths-mobile { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths-mobile { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths-mobile { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters-mobile { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-mobile { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-mobile { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-mobile { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-mobile { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-mobile { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-mobile { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-mobile { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-mobile { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-mobile { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-mobile { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.tablet { + &.#{iv.$class-prefix}is-narrow, + &.#{iv.$class-prefix}is-narrow-tablet { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full, + &.#{iv.$class-prefix}is-full-tablet { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters, + &.#{iv.$class-prefix}is-three-quarters-tablet { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds, + &.#{iv.$class-prefix}is-two-thirds-tablet { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half, + &.#{iv.$class-prefix}is-half-tablet { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third, + &.#{iv.$class-prefix}is-one-third-tablet { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter, + &.#{iv.$class-prefix}is-one-quarter-tablet { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth, + &.#{iv.$class-prefix}is-one-fifth-tablet { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths, + &.#{iv.$class-prefix}is-two-fifths-tablet { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths, + &.#{iv.$class-prefix}is-three-fifths-tablet { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths, + &.#{iv.$class-prefix}is-four-fifths-tablet { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters, + &.#{iv.$class-prefix}is-offset-three-quarters-tablet { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds, + &.#{iv.$class-prefix}is-offset-two-thirds-tablet { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half, + &.#{iv.$class-prefix}is-offset-half-tablet { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third, + &.#{iv.$class-prefix}is-offset-one-third-tablet { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter, + &.#{iv.$class-prefix}is-offset-one-quarter-tablet { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth, + &.#{iv.$class-prefix}is-offset-one-fifth-tablet { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths, + &.#{iv.$class-prefix}is-offset-two-fifths-tablet { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths, + &.#{iv.$class-prefix}is-offset-three-fifths-tablet { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths, + &.#{iv.$class-prefix}is-offset-four-fifths-tablet { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}, + &.#{iv.$class-prefix}is-#{$i}-tablet { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}, + &.#{iv.$class-prefix}is-offset-#{$i}-tablet { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.touch { + &.#{iv.$class-prefix}is-narrow-touch { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-touch { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-touch { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds-touch { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half-touch { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third-touch { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter-touch { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth-touch { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths-touch { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths-touch { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths-touch { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters-touch { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-touch { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-touch { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-touch { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-touch { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-touch { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-touch { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-touch { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-touch { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-touch { + flex: none; + width: math.percentage(math.div($i, 12)); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-touch { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.desktop { + &.#{iv.$class-prefix}is-narrow-desktop { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-desktop { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-desktop { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds-desktop { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half-desktop { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third-desktop { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter-desktop { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth-desktop { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths-desktop { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths-desktop { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths-desktop { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters-desktop { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-desktop { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-desktop { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-desktop { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-desktop { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-desktop { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-desktop { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-desktop { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-desktop { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-desktop { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-desktop { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.widescreen { + &.#{iv.$class-prefix}is-narrow-widescreen { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-widescreen { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-widescreen { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds-widescreen { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half-widescreen { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third-widescreen { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter-widescreen { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth-widescreen { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths-widescreen { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths-widescreen { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths-widescreen { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters-widescreen { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-widescreen { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-widescreen { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-widescreen { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-widescreen { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-widescreen { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-widescreen { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-widescreen { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-widescreen { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-widescreen { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-widescreen { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.fullhd { + &.#{iv.$class-prefix}is-narrow-fullhd { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-fullhd { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-fullhd { + flex: none; + width: calc(75% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-thirds-fullhd { + flex: none; + width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-half-fullhd { + flex: none; + width: calc(50% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-third-fullhd { + flex: none; + width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-quarter-fullhd { + flex: none; + width: calc(25% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-one-fifth-fullhd { + flex: none; + width: calc(20% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-two-fifths-fullhd { + flex: none; + width: calc(40% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-three-fifths-fullhd { + flex: none; + width: calc(60% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-four-fifths-fullhd { + flex: none; + width: calc(80% - calc(#{cv.getVar("column-gap")} / 2)); + } + + &.#{iv.$class-prefix}is-offset-three-quarters-fullhd { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-fullhd { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-fullhd { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-fullhd { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-fullhd { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-fullhd { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-fullhd { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-fullhd { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-fullhd { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-fullhd { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-fullhd { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } +} + +.#{iv.$class-prefix}columns { + @extend %block; + gap: cv.getVar("column-gap"); + + // Modifiers + &.#{iv.$class-prefix}is-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}is-gapless { + gap: 0; + } + + &.#{iv.$class-prefix}is-mobile { + display: flex; + } + + &.#{iv.$class-prefix}is-multiline { + flex-wrap: wrap; + } + + &.#{iv.$class-prefix}is-vcentered { + align-items: center; + } + + // Responsiveness + @include mx.tablet { + &:not(.#{iv.$class-prefix}is-desktop) { + display: flex; + } + } + + @include mx.desktop { + // Modifiers + &.#{iv.$class-prefix}is-desktop { + display: flex; + } + } + + &.#{iv.$class-prefix}is-variable { + @for $i from 0 through 8 { + &.#{iv.$class-prefix}is-#{$i} { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + + @include mx.mobile { + &.#{iv.$class-prefix}is-#{$i}-mobile { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.tablet { + &.#{iv.$class-prefix}is-#{$i}-tablet { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.tablet-only { + &.#{iv.$class-prefix}is-#{$i}-tablet-only { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.touch { + &.#{iv.$class-prefix}is-#{$i}-touch { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.desktop { + &.#{iv.$class-prefix}is-#{$i}-desktop { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.desktop-only { + &.#{iv.$class-prefix}is-#{$i}-desktop-only { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.widescreen { + &.#{iv.$class-prefix}is-#{$i}-widescreen { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.widescreen-only { + &.#{iv.$class-prefix}is-#{$i}-widescreen-only { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + + @include mx.fullhd { + &.#{iv.$class-prefix}is-#{$i}-fullhd { + @include cv.register-vars( + ( + "column-gap": #{$i * 0.25rem}, + ) + ); + } + } + } + } +} diff --git a/web/assets/css/sass/grid/columns.scss b/web/assets/css/sass/grid/columns.scss new file mode 100644 index 0000000..5f5f126 --- /dev/null +++ b/web/assets/css/sass/grid/columns.scss @@ -0,0 +1,877 @@ +@use "sass:math"; +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$column-gap: 0.75rem !default; + +:root { + @include cv.register-vars( + ( + "column-gap": #{$column-gap}, + ) + ); +} + +.#{iv.$class-prefix}column { + display: block; + flex-basis: 0; + flex-grow: 1; + flex-shrink: 1; + padding: $column-gap; + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-narrow { + flex: none; + width: unset; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-full { + flex: none; + width: 100%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-three-quarters { + flex: none; + width: 75%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-two-thirds { + flex: none; + width: 66.6666%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-half { + flex: none; + width: 50%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-third { + flex: none; + width: 33.3333%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-quarter { + flex: none; + width: 25%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-one-fifth { + flex: none; + width: 20%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-two-fifths { + flex: none; + width: 40%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-three-fifths { + flex: none; + width: 60%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-four-fifths { + flex: none; + width: 80%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-three-quarters { + margin-inline-start: 75%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-two-thirds { + margin-inline-start: 66.6666%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-half { + margin-inline-start: 50%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-third { + margin-inline-start: 0.3333%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-quarter { + margin-inline-start: 25%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-one-fifth { + margin-inline-start: 20%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-two-fifths { + margin-inline-start: 40%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-three-fifths { + margin-inline-start: 60%; + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-four-fifths { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-#{$i} { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2) + ); + } + + .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile + > &.#{iv.$class-prefix}is-offset-#{$i} { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + + @include mx.mobile { + &.#{iv.$class-prefix}is-narrow-mobile { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-mobile { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-mobile { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds-mobile { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half-mobile { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third-mobile { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter-mobile { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth-mobile { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths-mobile { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths-mobile { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths-mobile { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters-mobile { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-mobile { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-mobile { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-mobile { + margin-inline-start: 0.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-mobile { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-mobile { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-mobile { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-mobile { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-mobile { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-mobile { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-mobile { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.tablet { + &.#{iv.$class-prefix}is-narrow, + &.#{iv.$class-prefix}is-narrow-tablet { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full, + &.#{iv.$class-prefix}is-full-tablet { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters, + &.#{iv.$class-prefix}is-three-quarters-tablet { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds, + &.#{iv.$class-prefix}is-two-thirds-tablet { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half, + &.#{iv.$class-prefix}is-half-tablet { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third, + &.#{iv.$class-prefix}is-one-third-tablet { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter, + &.#{iv.$class-prefix}is-one-quarter-tablet { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth, + &.#{iv.$class-prefix}is-one-fifth-tablet { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths, + &.#{iv.$class-prefix}is-two-fifths-tablet { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths, + &.#{iv.$class-prefix}is-three-fifths-tablet { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths, + &.#{iv.$class-prefix}is-four-fifths-tablet { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters, + &.#{iv.$class-prefix}is-offset-three-quarters-tablet { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds, + &.#{iv.$class-prefix}is-offset-two-thirds-tablet { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half, + &.#{iv.$class-prefix}is-offset-half-tablet { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third, + &.#{iv.$class-prefix}is-offset-one-third-tablet { + margin-inline-start: 0.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter, + &.#{iv.$class-prefix}is-offset-one-quarter-tablet { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth, + &.#{iv.$class-prefix}is-offset-one-fifth-tablet { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths, + &.#{iv.$class-prefix}is-offset-two-fifths-tablet { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths, + &.#{iv.$class-prefix}is-offset-three-fifths-tablet { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths, + &.#{iv.$class-prefix}is-offset-four-fifths-tablet { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}, + &.#{iv.$class-prefix}is-#{$i}-tablet { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}, + &.#{iv.$class-prefix}is-offset-#{$i}-tablet { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.touch { + &.#{iv.$class-prefix}is-narrow-touch { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-touch { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-touch { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds-touch { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half-touch { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third-touch { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter-touch { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth-touch { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths-touch { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths-touch { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths-touch { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters-touch { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-touch { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-touch { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-touch { + margin-inline-start: 0.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-touch { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-touch { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-touch { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-touch { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-touch { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-touch { + flex: none; + width: math.percentage(math.div($i, 12)); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-touch { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.desktop { + &.#{iv.$class-prefix}is-narrow-desktop { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-desktop { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-desktop { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds-desktop { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half-desktop { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third-desktop { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter-desktop { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth-desktop { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths-desktop { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths-desktop { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths-desktop { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters-desktop { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-desktop { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-desktop { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-desktop { + margin-inline-start: 0.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-desktop { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-desktop { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-desktop { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-desktop { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-desktop { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-desktop { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-desktop { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.widescreen { + &.#{iv.$class-prefix}is-narrow-widescreen { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-widescreen { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-widescreen { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds-widescreen { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half-widescreen { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third-widescreen { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter-widescreen { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth-widescreen { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths-widescreen { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths-widescreen { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths-widescreen { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters-widescreen { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-widescreen { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-widescreen { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-widescreen { + margin-inline-start: 0.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-widescreen { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-widescreen { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-widescreen { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-widescreen { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-widescreen { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-widescreen { + flex: none; + width: calc( + math.percentage(math.div($i, 12)) - calc( + #{cv.getVar("column-gap")} / 2 + ) + ); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-widescreen { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } + + @include mx.fullhd { + &.#{iv.$class-prefix}is-narrow-fullhd { + flex: none; + width: unset; + } + + &.#{iv.$class-prefix}is-full-fullhd { + flex: none; + width: 100%; + } + + &.#{iv.$class-prefix}is-three-quarters-fullhd { + flex: none; + width: 75%; + } + + &.#{iv.$class-prefix}is-two-thirds-fullhd { + flex: none; + width: 66.6666%; + } + + &.#{iv.$class-prefix}is-half-fullhd { + flex: none; + width: 50%; + } + + &.#{iv.$class-prefix}is-one-third-fullhd { + flex: none; + width: 33.3333%; + } + + &.#{iv.$class-prefix}is-one-quarter-fullhd { + flex: none; + width: 25%; + } + + &.#{iv.$class-prefix}is-one-fifth-fullhd { + flex: none; + width: 20%; + } + + &.#{iv.$class-prefix}is-two-fifths-fullhd { + flex: none; + width: 40%; + } + + &.#{iv.$class-prefix}is-three-fifths-fullhd { + flex: none; + width: 60%; + } + + &.#{iv.$class-prefix}is-four-fifths-fullhd { + flex: none; + width: 80%; + } + + &.#{iv.$class-prefix}is-offset-three-quarters-fullhd { + margin-inline-start: 75%; + } + + &.#{iv.$class-prefix}is-offset-two-thirds-fullhd { + margin-inline-start: 66.6666%; + } + + &.#{iv.$class-prefix}is-offset-half-fullhd { + margin-inline-start: 50%; + } + + &.#{iv.$class-prefix}is-offset-one-third-fullhd { + margin-inline-start: 33.3333%; + } + + &.#{iv.$class-prefix}is-offset-one-quarter-fullhd { + margin-inline-start: 25%; + } + + &.#{iv.$class-prefix}is-offset-one-fifth-fullhd { + margin-inline-start: 20%; + } + + &.#{iv.$class-prefix}is-offset-two-fifths-fullhd { + margin-inline-start: 40%; + } + + &.#{iv.$class-prefix}is-offset-three-fifths-fullhd { + margin-inline-start: 60%; + } + + &.#{iv.$class-prefix}is-offset-four-fifths-fullhd { + margin-inline-start: 80%; + } + + @for $i from 0 through 12 { + &.#{iv.$class-prefix}is-#{$i}-fullhd { + flex: none; + width: math.percentage(math.div($i, 12)); + } + + &.#{iv.$class-prefix}is-offset-#{$i}-fullhd { + margin-inline-start: math.percentage(math.div($i, 12)); + } + } + } +} + +.#{iv.$class-prefix}columns { + margin-inline-start: calc(-1 * #{cv.getVar("column-gap")}); + margin-inline-end: calc(-1 * #{cv.getVar("column-gap")}); + margin-top: calc(-1 * #{cv.getVar("column-gap")}); + + &:last-child { + margin-bottom: calc(-1 * #{cv.getVar("column-gap")}); + } + + &:not(:last-child) { + margin-bottom: calc(1.5rem - #{$column-gap}); + } + + // Modifiers + &.#{iv.$class-prefix}is-centered { + justify-content: center; + } + + &.#{iv.$class-prefix}is-gapless { + margin-inline-start: 0; + margin-inline-end: 0; + + margin-top: 0; + + & > .#{iv.$class-prefix}column { + margin: 0; + padding: 0 !important; + } + + &:not(:last-child) { + margin-bottom: 1.5rem; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.#{iv.$class-prefix}is-mobile { + display: flex; + } + + &.#{iv.$class-prefix}is-multiline { + flex-wrap: wrap; + } + + &.#{iv.$class-prefix}is-vcentered { + align-items: center; + } + + // Responsiveness + @include mx.tablet { + &:not(.#{iv.$class-prefix}is-desktop) { + display: flex; + } + } + + @include mx.desktop { + // Modifiers + &.#{iv.$class-prefix}is-desktop { + display: flex; + } + } +} diff --git a/web/assets/css/sass/grid/grid.scss b/web/assets/css/sass/grid/grid.scss new file mode 100644 index 0000000..9c4191d --- /dev/null +++ b/web/assets/css/sass/grid/grid.scss @@ -0,0 +1,209 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$max-column-count: 12; +$grip-gap: 0.75rem; +$column-min-base: 1.5rem; + +@mixin fixed-grid-properties($suffix: "") { + @for $i from 1 through $max-column-count { + &.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} { + .#{iv.$class-prefix}grid { + @include cv.register-var("grid-column-count", #{$i}); + } + } + } +} + +$grid-container-name: bulma-fixed-grid; + +.#{iv.$class-prefix}fixed-grid { + @extend %block; + container-name: $grid-container-name; + container-type: inline-size; + + .#{iv.$class-prefix}grid { + @include cv.register-vars( + ( + "grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1), + "grid-column-count": 2, + ) + ); + + grid-template-columns: repeat(cv.getVar("grid-column-count"), 1fr); + } + + @include fixed-grid-properties; + + @include mx.container-until($grid-container-name, iv.$tablet) { + @include fixed-grid-properties("-mobile"); + } + + @include mx.container-from($grid-container-name, iv.$tablet) { + @include fixed-grid-properties("-tablet"); + } + + @include mx.container-from($grid-container-name, iv.$desktop) { + @include fixed-grid-properties("-desktop"); + } + + @include mx.container-from($grid-container-name, iv.$widescreen) { + @include fixed-grid-properties("-widescreen"); + } + + @include mx.container-from($grid-container-name, iv.$fullhd) { + @include fixed-grid-properties("-fullhd"); + } + + &.#{iv.$class-prefix}has-auto-count { + .#{iv.$class-prefix}grid { + @include mx.container-until($grid-container-name, iv.$tablet) { + @include cv.register-var("grid-column-count", 2); + } + + @include mx.container-from($grid-container-name, iv.$tablet) { + @include cv.register-var("grid-column-count", 4); + } + + @include mx.container-from($grid-container-name, iv.$desktop) { + @include cv.register-var("grid-column-count", 8); + } + + @include mx.container-from($grid-container-name, iv.$widescreen) { + @include cv.register-var("grid-column-count", 12); + } + + @include mx.container-from($grid-container-name, iv.$fullhd) { + @include cv.register-var("grid-column-count", 16); + } + } + } +} + +.#{iv.$class-prefix}grid { + @include cv.register-vars( + ( + "grid-gap": $grip-gap, + "grid-column-min": 9rem, + "grid-cell-column-span": 1, + "grid-cell-row-span": 1, + ) + ); + + @extend %block; + display: grid; + gap: cv.getVar("grid-gap"); + column-gap: #{cv.getVarWithBackup("grid-column-gap", "grid-gap")}; + row-gap: #{cv.getVarWithBackup("grid-row-gap", "grid-gap")}; + grid-template-columns: repeat( + auto-fit, + minmax(#{cv.getVar("grid-column-min")}, 1fr) + ); + grid-template-rows: auto; + + &.is-auto-fill { + grid-template-columns: repeat( + auto-fill, + minmax(#{cv.getVar("grid-column-min")}, 1fr) + ); + } + + @for $i from 1 through 12 { + &.#{iv.$class-prefix}is-col-min-#{$i} { + @include cv.register-vars( + ( + "grid-column-min": #{$column-min-base * $i}, + ) + ); + } + } +} + +@mixin cell-properties($suffix: "") { + @for $i from 1 through $max-column-count { + $name: $i + $suffix; + + &.#{iv.$class-prefix}is-col-start-#{$name} { + @include cv.register-var("grid-cell-column-start", #{$i}); + } + + &.#{iv.$class-prefix}is-col-end-#{$name} { + @include cv.register-var("grid-cell-column-end", #{$i}); + } + + &.#{iv.$class-prefix}is-col-from-end-#{$name} { + @include cv.register-var("grid-cell-column-start", #{$i * -1}); + } + + &.#{iv.$class-prefix}is-col-span-#{$name} { + @include cv.register-var("grid-cell-column-span", #{$i}); + } + + &.#{iv.$class-prefix}is-row-start-#{$name} { + @include cv.register-var("grid-cell-row-start", #{$i}); + } + + &.#{iv.$class-prefix}is-row-end-#{$name} { + @include cv.register-var("grid-cell-row-end", #{$i}); + } + + &.#{iv.$class-prefix}is-row-from-end-#{$name} { + @include cv.register-var("grid-cell-row-start", #{$i * -1}); + } + + &.#{iv.$class-prefix}is-row-span-#{$name} { + @include cv.register-var("grid-cell-row-span", #{$i}); + } + } +} + +.#{iv.$class-prefix}cell { + grid-column-end: span cv.getVar("grid-cell-column-span"); + grid-column-start: cv.getVar("grid-cell-column-start"); + grid-row-end: span cv.getVar("grid-cell-row-span"); + grid-row-start: cv.getVar("grid-cell-row-start"); + + // Sizes + &.#{iv.$class-prefix}is-col-start-end { + @include cv.register-var("grid-cell-column-start", -1); + } + + &.#{iv.$class-prefix}is-row-start-end { + @include cv.register-var("grid-cell-row-start", -1); + } + + @include cell-properties; + @include mx.mobile { + @include cell-properties("-mobile"); + } + + @include mx.tablet { + @include cell-properties("-tablet"); + } + + @include mx.tablet-only { + @include cell-properties("-tablet-only"); + } + + @include mx.desktop { + @include cell-properties("-desktop"); + } + + @include mx.desktop-only { + @include cell-properties("-desktop-only"); + } + + @include mx.widescreen { + @include cell-properties("-widescreen"); + } + + @include mx.widescreen-only { + @include cell-properties("-widescreen-only"); + } + + @include mx.fullhd { + @include cell-properties("-fullhd"); + } +} diff --git a/web/assets/css/sass/helpers/_index.scss b/web/assets/css/sass/helpers/_index.scss new file mode 100644 index 0000000..4388647 --- /dev/null +++ b/web/assets/css/sass/helpers/_index.scss @@ -0,0 +1,15 @@ +/* Bulma Helpers */ +@charset "utf-8"; + +@forward "aspect-ratio"; +@forward "border"; +@forward "color"; +@forward "flexbox"; +@forward "float"; +@forward "gap"; +@forward "overflow"; +@forward "position"; +@forward "spacing"; +@forward "typography"; +@forward "visibility"; +@forward "other"; diff --git a/web/assets/css/sass/helpers/aspect-ratio.scss b/web/assets/css/sass/helpers/aspect-ratio.scss new file mode 100644 index 0000000..91e8c4c --- /dev/null +++ b/web/assets/css/sass/helpers/aspect-ratio.scss @@ -0,0 +1,10 @@ +@use "../utilities/initial-variables" as iv; + +@each $pair in iv.$aspect-ratios { + $w: nth($pair, 1); + $h: nth($pair, 2); + + .#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} { + aspect-ratio: #{$w} / #{$h}; + } +} diff --git a/web/assets/css/sass/helpers/border.scss b/web/assets/css/sass/helpers/border.scss new file mode 100644 index 0000000..500ea00 --- /dev/null +++ b/web/assets/css/sass/helpers/border.scss @@ -0,0 +1,15 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; + +$radii: ( + "small": "radius-small", + "normal": "radius", + "large": "radius-large", + "rounded": "radius-rounded", +); + +@each $name, $var in $radii { + .#{iv.$helpers-has-prefix}radius-#{$name} { + border-radius: cv.getVar($var); + } +} diff --git a/web/assets/css/sass/helpers/color.scss b/web/assets/css/sass/helpers/color.scss new file mode 100644 index 0000000..22feaad --- /dev/null +++ b/web/assets/css/sass/helpers/color.scss @@ -0,0 +1,364 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; + +$digits: ( + "00", + "05", + "10", + "15", + "20", + "25", + "30", + "35", + "40", + "45", + "50", + "55", + "60", + "65", + "70", + "75", + "80", + "85", + "90", + "95", + "100" +); + +.#{iv.$helpers-has-prefix}background { + background-color: cv.getVar("background"); +} + +@each $name, $color in dv.$colors { + $background: hsl( + #{cv.getVar($name, "", "-h")}, + #{cv.getVar($name, "", "-s")}, + calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")}) + ); + + $color: hsl( + #{cv.getVar($name, "", "-h")}, + #{cv.getVar($name, "", "-s")}, + calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")}) + ); + + [class*="#{iv.$helpers-prefix}color-#{$name}"], + [class*="#{iv.$helpers-has-prefix}text-#{$name}"] { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-l")}, + "color-l-delta": 0%, + ) + ); + color: $color !important; + } + + [class*="#{iv.$helpers-prefix}background-#{$name}"], + [class*="#{iv.$helpers-has-prefix}background-#{$name}"] { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-l")}, + "background-l-delta": 0%, + ) + ); + background-color: $background !important; + } + + // Invert + .#{iv.$helpers-prefix}color-#{$name}-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + } + + // On Scheme + .#{iv.$helpers-prefix}color-#{$name}-on-scheme, + .#{iv.$helpers-has-prefix}text-#{$name}-on-scheme { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-on-scheme-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-on-scheme, + .#{iv.$helpers-has-prefix}background-#{$name}-on-scheme { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-on-scheme-l")}, + ) + ); + } + + // Light + .#{iv.$helpers-prefix}color-#{$name}-light, + .#{iv.$helpers-has-prefix}text-#{$name}-light { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-light-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-light, + .#{iv.$helpers-has-prefix}background-#{$name}-light { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-light-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-light-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-light-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-light-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-light-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-light-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-light-invert-l")}, + ) + ); + } + + // Dark + .#{iv.$helpers-prefix}color-#{$name}-dark, + .#{iv.$helpers-has-prefix}text-#{$name}-dark { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-dark-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-dark, + .#{iv.$helpers-has-prefix}background-#{$name}-dark { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-dark-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-dark-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-dark-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-dark-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-dark-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-dark-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-dark-invert-l")}, + ) + ); + } + + // Soft/Bold + .#{iv.$helpers-prefix}color-#{$name}-soft, + .#{iv.$helpers-has-prefix}text-#{$name}-soft { + @include cv.register-vars( + ( + "color-l": #{cv.getVar("soft-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-soft, + .#{iv.$helpers-has-prefix}background-#{$name}-soft { + @include cv.register-vars( + ( + "background-l": #{cv.getVar("soft-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-bold, + .#{iv.$helpers-has-prefix}text-#{$name}-bold { + @include cv.register-vars( + ( + "color-l": #{cv.getVar("bold-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-bold, + .#{iv.$helpers-has-prefix}background-#{$name}-bold { + @include cv.register-vars( + ( + "background-l": #{cv.getVar("bold-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-soft-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-soft-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar("soft-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-soft-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-soft-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar("soft-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-bold-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-bold-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar("bold-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-bold-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-bold-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar("bold-invert-l")}, + ) + ); + } + + @each $digit in $digits { + .#{iv.$helpers-prefix}color-#{$name}-#{$digit}, + .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-#{$digit}-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-#{$digit}, + .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-#{$digit}-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert, + .#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert { + @include cv.register-vars( + ( + "color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, + ) + ); + } + + .#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert, + .#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert { + @include cv.register-vars( + ( + "background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")}, + ) + ); + } + } + + // Hover + a.#{iv.$helpers-prefix}color-#{$name}, + button.#{iv.$helpers-prefix}color-#{$name}, + #{iv.$helpers-prefix}color-#{$name}.is-hoverable, + a.#{iv.$helpers-has-prefix}text-#{$name}, + button.#{iv.$helpers-has-prefix}text-#{$name}, + #{iv.$helpers-has-prefix}text-#{$name}.is-hoverable { + &:hover, + &:focus-visible { + @include cv.register-vars( + ( + "color-l-delta": #{cv.getVar("hover-color-l-delta")}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "color-l-delta": #{cv.getVar("active-color-l-delta")}, + ) + ); + } + } + + a.#{iv.$helpers-prefix}background-#{$name}, + button.#{iv.$helpers-prefix}background-#{$name}, + #{iv.$helpers-prefix}background-#{$name}.is-hoverable, + a.#{iv.$helpers-has-prefix}background-#{$name}, + button.#{iv.$helpers-has-prefix}background-#{$name}, + #{iv.$helpers-has-prefix}background-#{$name}.is-hoverable { + &:hover, + &:focus-visible { + @include cv.register-vars( + ( + "background-l-delta": #{cv.getVar("hover-background-l-delta")}, + ) + ); + } + + &:active { + @include cv.register-vars( + ( + "background-l-delta": #{cv.getVar("active-background-l-delta")}, + ) + ); + } + } + + // Palettes + .#{iv.$helpers-prefix}palette-#{$name} { + --h: #{cv.getVar($name, "", "-h")}; + --s: #{cv.getVar($name, "", "-s")}; + --l: #{cv.getVar($name, "", "-l")}; + --color: hsl(var(--h), var(--s), var(--l)); + + @each $digit in $digits { + --#{$digit}-l: #{cv.getVar($name, "", "-#{$digit}-l")}; + --color-#{$digit}: hsl(var(--h), var(--s), var(--#{$digit}-l)); + } + } +} + +@each $name, $shade in dv.$shades { + .#{iv.$helpers-prefix}color-#{$name}, + .#{iv.$helpers-has-prefix}text-#{$name} { + color: $shade !important; + } + + .#{iv.$helpers-prefix}background-#{$name}, + .#{iv.$helpers-has-prefix}background-#{$name} { + background-color: $shade !important; + } +} diff --git a/web/assets/css/sass/helpers/flexbox.scss b/web/assets/css/sass/helpers/flexbox.scss new file mode 100644 index 0000000..1265e99 --- /dev/null +++ b/web/assets/css/sass/helpers/flexbox.scss @@ -0,0 +1,62 @@ +@use "../utilities/initial-variables" as iv; + +$flex-direction-values: row, row-reverse, column, column-reverse; + +@each $value in $flex-direction-values { + .#{iv.$helpers-prefix}flex-direction-#{$value} { + flex-direction: $value !important; + } +} + +$flex-wrap-values: nowrap, wrap, wrap-reverse; + +@each $value in $flex-wrap-values { + .#{iv.$helpers-prefix}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 { + .#{iv.$helpers-prefix}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 { + .#{iv.$helpers-prefix}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 { + .#{iv.$helpers-prefix}align-items-#{$value} { + align-items: $value !important; + } +} + +$align-self-values: auto, flex-start, flex-end, center, baseline, stretch; + +@each $value in $align-self-values { + .#{iv.$helpers-prefix}align-self-#{$value} { + align-self: $value !important; + } +} + +$flex-operators: grow, shrink; + +@each $operator in $flex-operators { + @for $i from 0 through 5 { + .#{iv.$helpers-prefix}flex-#{$operator}-#{$i} { + flex-#{$operator}: $i !important; + } + } +} diff --git a/web/assets/css/sass/helpers/float.scss b/web/assets/css/sass/helpers/float.scss new file mode 100644 index 0000000..6eecebe --- /dev/null +++ b/web/assets/css/sass/helpers/float.scss @@ -0,0 +1,28 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +.#{iv.$helpers-prefix}clearfix { + @include mx.clearfix; +} + +.#{iv.$helpers-prefix}float-left, +.#{iv.$helpers-prefix}pulled-left { + float: left !important; +} + +.#{iv.$helpers-prefix}float-right, +.#{iv.$helpers-prefix}pulled-right { + float: right !important; +} + +.#{iv.$helpers-prefix}float-none { + float: none !important; +} + +$clears: both left none right; + +@each $clear in $clears { + .#{iv.$helpers-prefix}clear-#{$clear} { + clear: $clear !important; + } +} diff --git a/web/assets/css/sass/helpers/gap.scss b/web/assets/css/sass/helpers/gap.scss new file mode 100644 index 0000000..cbff6c3 --- /dev/null +++ b/web/assets/css/sass/helpers/gap.scss @@ -0,0 +1,24 @@ +@use "sass:math"; +@use "sass:string"; +@use "../utilities/initial-variables" as iv; + +.#{iv.$helpers-prefix}gapless { + gap: 0 !important; +} + +$gaps: "gap", "column-gap", "row-gap"; +$gap-base: 0.5rem; + +@each $gap in $gaps { + @for $i from 0 through 8 { + .#{iv.$helpers-prefix}#{$gap}-#{$i} { + #{$gap}: ($gap-base * $i) !important; + } + + @if $i < 8 { + .#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 { + #{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important; + } + } + } +} diff --git a/web/assets/css/sass/helpers/other.scss b/web/assets/css/sass/helpers/other.scss new file mode 100644 index 0000000..90e0edd --- /dev/null +++ b/web/assets/css/sass/helpers/other.scss @@ -0,0 +1,19 @@ +@use "../utilities/extends"; +@use "../utilities/initial-variables" as iv; + +.#{iv.$helpers-prefix}radiusless { + border-radius: 0 !important; +} + +.#{iv.$helpers-prefix}shadowless { + box-shadow: none !important; +} + +.#{iv.$helpers-prefix}clickable { + cursor: pointer !important; + pointer-events: all !important; +} + +.#{iv.$helpers-prefix}unselectable { + @extend %unselectable; +} diff --git a/web/assets/css/sass/helpers/overflow.scss b/web/assets/css/sass/helpers/overflow.scss new file mode 100644 index 0000000..f618600 --- /dev/null +++ b/web/assets/css/sass/helpers/overflow.scss @@ -0,0 +1,21 @@ +@use "../utilities/initial-variables" as iv; + +.#{iv.$helpers-prefix}clipped { + overflow: hidden !important; +} + +$overflows: auto clip hidden scroll visible; + +@each $overflow in $overflows { + .#{iv.$helpers-prefix}overflow-#{$overflow} { + overflow: $overflow !important; + } + + .#{iv.$helpers-prefix}overflow-x-#{$overflow} { + overflow-x: $overflow !important; + } + + .#{iv.$helpers-prefix}overflow-y-#{$overflow} { + overflow-y: $overflow !important; + } +} diff --git a/web/assets/css/sass/helpers/position.scss b/web/assets/css/sass/helpers/position.scss new file mode 100644 index 0000000..794b3d3 --- /dev/null +++ b/web/assets/css/sass/helpers/position.scss @@ -0,0 +1,19 @@ +@use "../utilities/extends"; +@use "../utilities/initial-variables" as iv; + +.#{iv.$helpers-prefix}overlay, +.#{iv.$helpers-prefix}overlay { + @extend %overlay; +} + +.#{iv.$helpers-prefix}relative { + position: relative !important; +} + +$positions: absolute fixed relative static sticky; + +@each $position in $positions { + .#{iv.$helpers-prefix}position-#{$position} { + position: $position !important; + } +} diff --git a/web/assets/css/sass/helpers/spacing.scss b/web/assets/css/sass/helpers/spacing.scss new file mode 100644 index 0000000..e825c6c --- /dev/null +++ b/web/assets/css/sass/helpers/spacing.scss @@ -0,0 +1,64 @@ +@use "../utilities/initial-variables" as iv; + +.marginless { + margin: 0 !important; +} + +.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/web/assets/css/sass/helpers/typography.scss b/web/assets/css/sass/helpers/typography.scss new file mode 100644 index 0000000..2f9d029 --- /dev/null +++ b/web/assets/css/sass/helpers/typography.scss @@ -0,0 +1,168 @@ +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +@mixin typography-size($target: "") { + @each $size in dv.$sizes { + $i: index(dv.$sizes, $size); + + .#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} { + font-size: $size !important; + } + } +} + +@include typography-size; + +@include mx.mobile { + @include typography-size("mobile"); +} + +@include mx.tablet { + @include typography-size("tablet"); +} + +@include mx.touch { + @include typography-size("touch"); +} + +@include mx.desktop { + @include typography-size("desktop"); +} + +@include mx.widescreen { + @include typography-size("widescreen"); +} + +@include mx.fullhd { + @include typography-size("fullhd"); +} + +$alignments: ( + "centered": "center", + "justified": "justify", + "left": "left", + "right": "right", +); + +@each $alignment, $text-align in $alignments { + .#{iv.$helpers-has-prefix}text-#{$alignment} { + text-align: #{$text-align} !important; + } +} + +@each $alignment, $text-align in $alignments { + @include mx.mobile { + .#{iv.$helpers-has-prefix}text-#{$alignment}-mobile { + text-align: #{$text-align} !important; + } + } + + @include mx.tablet { + .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet { + text-align: #{$text-align} !important; + } + } + + @include mx.tablet-only { + .#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only { + text-align: #{$text-align} !important; + } + } + + @include mx.touch { + .#{iv.$helpers-has-prefix}text-#{$alignment}-touch { + text-align: #{$text-align} !important; + } + } + + @include mx.desktop { + .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop { + text-align: #{$text-align} !important; + } + } + + @include mx.desktop-only { + .#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only { + text-align: #{$text-align} !important; + } + } + + @include mx.widescreen { + .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen { + text-align: #{$text-align} !important; + } + } + + @include mx.widescreen-only { + .#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only { + text-align: #{$text-align} !important; + } + } + + @include mx.fullhd { + .#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd { + text-align: #{$text-align} !important; + } + } +} + +.#{iv.$helpers-prefix}capitalized { + text-transform: capitalize !important; +} + +.#{iv.$helpers-prefix}lowercase { + text-transform: lowercase !important; +} + +.#{iv.$helpers-prefix}uppercase { + text-transform: uppercase !important; +} + +.#{iv.$helpers-prefix}italic { + font-style: italic !important; +} + +.#{iv.$helpers-prefix}underlined { + text-decoration: underline !important; +} + +.#{iv.$helpers-has-prefix}text-weight-light { + font-weight: iv.$weight-light !important; +} + +.#{iv.$helpers-has-prefix}text-weight-normal { + font-weight: iv.$weight-normal !important; +} + +.#{iv.$helpers-has-prefix}text-weight-medium { + font-weight: iv.$weight-medium !important; +} + +.#{iv.$helpers-has-prefix}text-weight-semibold { + font-weight: iv.$weight-semibold !important; +} + +.#{iv.$helpers-has-prefix}text-weight-bold { + font-weight: iv.$weight-bold !important; +} + +.#{iv.$helpers-prefix}family-primary { + font-family: dv.$family-primary !important; +} + +.#{iv.$helpers-prefix}family-secondary { + font-family: dv.$family-secondary !important; +} + +.#{iv.$helpers-prefix}family-sans-serif { + font-family: iv.$family-sans-serif !important; +} + +.#{iv.$helpers-prefix}family-monospace { + font-family: iv.$family-monospace !important; +} + +.#{iv.$helpers-prefix}family-code { + font-family: dv.$family-code !important; +} diff --git a/web/assets/css/sass/helpers/visibility.scss b/web/assets/css/sass/helpers/visibility.scss new file mode 100644 index 0000000..85124af --- /dev/null +++ b/web/assets/css/sass/helpers/visibility.scss @@ -0,0 +1,221 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +.#{iv.$helpers-prefix}display-none, +.#{iv.$helpers-prefix}hidden { + display: none !important; +} + +$displays: block flex inline inline-block inline-flex grid; + +@each $display in $displays { + .#{iv.$helpers-prefix}display-#{$display}, + .#{iv.$helpers-prefix}#{$display} { + display: $display !important; + } + + @include mx.mobile { + .#{iv.$helpers-prefix}display-#{$display}-mobile, + .#{iv.$helpers-prefix}#{$display}-mobile { + display: $display !important; + } + } + + @include mx.tablet { + .#{iv.$helpers-prefix}display-#{$display}-tablet, + .#{iv.$helpers-prefix}#{$display}-tablet { + display: $display !important; + } + } + + @include mx.tablet-only { + .#{iv.$helpers-prefix}display-#{$display}-tablet-only, + .#{iv.$helpers-prefix}#{$display}-tablet-only { + display: $display !important; + } + } + + @include mx.touch { + .#{iv.$helpers-prefix}display-#{$display}-touch, + .#{iv.$helpers-prefix}#{$display}-touch { + display: $display !important; + } + } + + @include mx.desktop { + .#{iv.$helpers-prefix}display-#{$display}-desktop, + .#{iv.$helpers-prefix}#{$display}-desktop { + display: $display !important; + } + } + + @include mx.desktop-only { + .#{iv.$helpers-prefix}display-#{$display}-desktop-only, + .#{iv.$helpers-prefix}#{$display}-desktop-only { + display: $display !important; + } + } + + @include mx.widescreen { + .#{iv.$helpers-prefix}display-#{$display}-widescreen, + .#{iv.$helpers-prefix}#{$display}-widescreen { + display: $display !important; + } + } + + @include mx.widescreen-only { + .#{iv.$helpers-prefix}display-#{$display}-widescreen-only, + .#{iv.$helpers-prefix}#{$display}-widescreen-only { + display: $display !important; + } + } + + @include mx.fullhd { + .#{iv.$helpers-prefix}display-#{$display}-fullhd, + .#{iv.$helpers-prefix}#{$display}-fullhd { + display: $display !important; + } + } +} + +.#{iv.$helpers-prefix}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; +} + +@include mx.mobile { + .#{iv.$helpers-prefix}display-none-mobile, + .#{iv.$helpers-prefix}hidden-mobile { + display: none !important; + } +} + +@include mx.tablet { + .#{iv.$helpers-prefix}display-none-tablet, + .#{iv.$helpers-prefix}hidden-tablet { + display: none !important; + } +} + +@include mx.tablet-only { + .#{iv.$helpers-prefix}display-none-tablet-only, + .#{iv.$helpers-prefix}hidden-tablet-only { + display: none !important; + } +} + +@include mx.touch { + .#{iv.$helpers-prefix}display-none-touch, + .#{iv.$helpers-prefix}hidden-touch { + display: none !important; + } +} + +@include mx.desktop { + .#{iv.$helpers-prefix}display-none-desktop, + .#{iv.$helpers-prefix}hidden-desktop { + display: none !important; + } +} + +@include mx.desktop-only { + .#{iv.$helpers-prefix}display-none-desktop-only, + .#{iv.$helpers-prefix}hidden-desktop-only { + display: none !important; + } +} + +@include mx.widescreen { + .#{iv.$helpers-prefix}display-none-widescreen, + .#{iv.$helpers-prefix}hidden-widescreen { + display: none !important; + } +} + +@include mx.widescreen-only { + .#{iv.$helpers-prefix}display-none-widescreen-only, + .#{iv.$helpers-prefix}hidden-widescreen-only { + display: none !important; + } +} + +@include mx.fullhd { + .#{iv.$helpers-prefix}display-none-fullhd, + .#{iv.$helpers-prefix}hidden-fullhd { + display: none !important; + } +} + +.#{iv.$helpers-prefix}visibility-hidden, +.#{iv.$helpers-prefix}invisible { + visibility: hidden !important; +} + +@include mx.mobile { + .#{iv.$helpers-prefix}visibility-hidden-mobile, + .#{iv.$helpers-prefix}invisible-mobile { + visibility: hidden !important; + } +} + +@include mx.tablet { + .#{iv.$helpers-prefix}visibility-hidden-tablet, + .#{iv.$helpers-prefix}invisible-tablet { + visibility: hidden !important; + } +} + +@include mx.tablet-only { + .#{iv.$helpers-prefix}visibility-hidden-tablet-only, + .#{iv.$helpers-prefix}invisible-tablet-only { + visibility: hidden !important; + } +} + +@include mx.touch { + .#{iv.$helpers-prefix}visibility-hidden-touch, + .#{iv.$helpers-prefix}invisible-touch { + visibility: hidden !important; + } +} + +@include mx.desktop { + .#{iv.$helpers-prefix}visibility-hidden-desktop, + .#{iv.$helpers-prefix}invisible-desktop { + visibility: hidden !important; + } +} + +@include mx.desktop-only { + .#{iv.$helpers-prefix}visibility-hidden-desktop-only, + .#{iv.$helpers-prefix}invisible-desktop-only { + visibility: hidden !important; + } +} + +@include mx.widescreen { + .#{iv.$helpers-prefix}visibility-hidden-widescreen, + .#{iv.$helpers-prefix}invisible-widescreen { + visibility: hidden !important; + } +} + +@include mx.widescreen-only { + .#{iv.$helpers-prefix}visibility-hidden-widescreen-only, + .#{iv.$helpers-prefix}invisible-widescreen-only { + visibility: hidden !important; + } +} + +@include mx.fullhd { + .#{iv.$helpers-prefix}visibility-hidden-fullhd, + .#{iv.$helpers-prefix}invisible-fullhd { + visibility: hidden !important; + } +} diff --git a/web/assets/css/sass/layout/_index.scss b/web/assets/css/sass/layout/_index.scss new file mode 100644 index 0000000..c28494d --- /dev/null +++ b/web/assets/css/sass/layout/_index.scss @@ -0,0 +1,9 @@ +/* Bulma Components */ +@charset "utf-8"; + +@forward "container"; +@forward "footer"; +@forward "hero"; +@forward "level"; +@forward "media"; +@forward "section"; diff --git a/web/assets/css/sass/layout/container.scss b/web/assets/css/sass/layout/container.scss new file mode 100644 index 0000000..a04a1b8 --- /dev/null +++ b/web/assets/css/sass/layout/container.scss @@ -0,0 +1,51 @@ +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +$container-offset: 2 * iv.$gap !default; +$container-max-width: iv.$fullhd !default; + +.#{iv.$class-prefix}container { + flex-grow: 1; + margin: 0 auto; + position: relative; + width: 100%; + + &.#{iv.$class-prefix}is-fluid { + max-width: none !important; + padding-left: iv.$gap; + padding-right: iv.$gap; + width: 100%; + } + + @include mx.desktop { + max-width: iv.$desktop - $container-offset; + } + + @include mx.until-widescreen { + &.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) { + max-width: min(iv.$widescreen, $container-max-width) - $container-offset; + } + } + + @include mx.until-fullhd { + &.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not( + .#{iv.$class-prefix}is-max-widescreen + ) { + max-width: min(iv.$fullhd, $container-max-width) - $container-offset; + } + } + + @include mx.widescreen { + &:not(.#{iv.$class-prefix}is-max-desktop) { + max-width: min(iv.$widescreen, $container-max-width) - $container-offset; + } + } + + @include mx.fullhd { + &:not(.#{iv.$class-prefix}is-max-desktop):not( + .#{iv.$class-prefix}is-max-widescreen + ) { + max-width: min(iv.$fullhd, $container-max-width) - $container-offset; + } + } +} diff --git a/web/assets/css/sass/layout/footer.scss b/web/assets/css/sass/layout/footer.scss new file mode 100644 index 0000000..bc9b6c8 --- /dev/null +++ b/web/assets/css/sass/layout/footer.scss @@ -0,0 +1,23 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; + +$footer-background-color: cv.getVar("scheme-main-bis") !default; +$footer-color: false !default; +$footer-padding: 3rem 1.5rem 6rem !default; + +.#{iv.$class-prefix}footer { + @include cv.register-vars( + ( + "footer-background-color": #{$footer-background-color}, + "footer-color": #{$footer-color}, + "footer-padding": #{$footer-padding}, + ) + ); + + background-color: cv.getVar("footer-background-color"); + padding: cv.getVar("footer-padding"); + + @if $footer-color { + color: cv.getVar("footer-color"); + } +} diff --git a/web/assets/css/sass/layout/hero.scss b/web/assets/css/sass/layout/hero.scss new file mode 100644 index 0000000..3cd1cfd --- /dev/null +++ b/web/assets/css/sass/layout/hero.scss @@ -0,0 +1,270 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/extends"; +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +$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-gradient-h-offset: 5deg; +$hero-gradient-s-offset: 10%; +$hero-gradient-l-offset: 5%; + +$hero-colors: dv.$colors !default; + +// Main container +.#{iv.$class-prefix}hero { + @include cv.register-vars( + ( + "hero-body-padding": #{$hero-body-padding}, + "hero-body-padding-tablet": #{$hero-body-padding-tablet}, + "hero-body-padding-small": #{$hero-body-padding-small}, + "hero-body-padding-medium": #{$hero-body-padding-medium}, + "hero-body-padding-large": #{$hero-body-padding-large}, + ) + ); +} + +.#{iv.$class-prefix}hero { + align-items: stretch; + display: flex; + flex-direction: column; + justify-content: space-between; + + .#{iv.$class-prefix}navbar { + background: none; + } + + .#{iv.$class-prefix}tabs { + ul { + border-bottom: none; + } + } + + // Colors + @each $name, $pair in $hero-colors { + &.#{iv.$class-prefix}is-#{$name} { + @include cv.register-vars( + ( + "hero-h": #{cv.getVar($name, "", "-h")}, + "hero-s": #{cv.getVar($name, "", "-s")}, + "hero-background-l": #{cv.getVar($name, "", "-l")}, + "hero-color-l": #{cv.getVar($name, "", "-invert-l")}, + ) + ); + + $background-color: hsl( + #{cv.getVar("hero-h")}, + #{cv.getVar("hero-s")}, + #{cv.getVar("hero-background-l")} + ); + $color: hsl( + #{cv.getVar("hero-h")}, + #{cv.getVar("hero-s")}, + #{cv.getVar("hero-color-l")} + ); + + background-color: hsl( + #{cv.getVar("hero-h")}, + #{cv.getVar("hero-s")}, + #{cv.getVar("hero-background-l")} + ); + color: $color; + + .#{iv.$class-prefix}navbar { + @include cv.register-vars( + ( + "navbar-item-color": $color, + "navbar-item-hover-background-color": $color, + "navbar-item-hover-color": $background-color, + "navbar-item-active-background-color": $color, + "navbar-item-active-color": $background-color, + ) + ); + } + + .#{iv.$class-prefix}tabs { + @include cv.register-vars( + ( + "tabs-link-color": $color, + "tabs-boxed-link-active-background-color": $color, + "tabs-boxed-link-active-border-color": $background-color, + "tabs-link-active-color": $background-color, + ) + ); + } + + .#{iv.$class-prefix}subtitle { + @include cv.register-vars( + ( + "subtitle-color": $color, + "subtitle-strong-color": $color, + ) + ); + } + + .#{iv.$class-prefix}title { + @include cv.register-vars( + ( + "title-color": $color, + "title-strong-color": $color, + ) + ); + } + + // Modifiers + &.#{iv.$class-prefix}is-bold { + $gradient-top-left: hsl( + calc(#{cv.getVar("hero-h")} - $hero-gradient-h-offset), + calc(#{cv.getVar("hero-s")} + $hero-gradient-s-offset), + calc(#{cv.getVar("hero-background-l")} + $hero-gradient-l-offset) + ); + $gradient-middle: hsl( + #{cv.getVar("hero-h")}, + #{cv.getVar("hero-s")}, + #{cv.getVar("hero-background-l")} + ); + $gradient-bottom-right: hsl( + calc(#{cv.getVar("hero-h")} + $hero-gradient-h-offset), + calc(#{cv.getVar("hero-s")} - $hero-gradient-s-offset), + calc(#{cv.getVar("hero-background-l")} - $hero-gradient-l-offset) + ); + + background-image: linear-gradient( + 141deg, + $gradient-top-left 0%, + $gradient-middle 71%, + $gradient-bottom-right 100% + ); + + @include mx.mobile { + .#{iv.$class-prefix}navbar-menu { + background-image: linear-gradient( + 141deg, + $gradient-top-left 0%, + $color 71%, + $gradient-bottom-right 100% + ); + } + } + } + } + } + + // Sizes + &.#{iv.$class-prefix}is-small { + .#{iv.$class-prefix}hero-body { + padding: cv.getVar("hero-body-padding-small"); + } + } + + &.#{iv.$class-prefix}is-medium { + @include mx.tablet { + .#{iv.$class-prefix}hero-body { + padding: cv.getVar("hero-body-padding-medium"); + } + } + } + + &.#{iv.$class-prefix}is-large { + @include mx.tablet { + .#{iv.$class-prefix}hero-body { + padding: cv.getVar("hero-body-padding-large"); + } + } + } + + &.#{iv.$class-prefix}is-halfheight, + &.#{iv.$class-prefix}is-fullheight, + &.#{iv.$class-prefix}is-fullheight-with-navbar { + .#{iv.$class-prefix}hero-body { + align-items: center; + display: flex; + + & > .#{iv.$class-prefix}container { + flex-grow: 1; + flex-shrink: 1; + } + } + } + + &.#{iv.$class-prefix}is-halfheight { + min-height: 50vh; + } + + &.#{iv.$class-prefix}is-fullheight { + min-height: 100vh; + } +} + +// Components + +.#{iv.$class-prefix}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 + &.#{iv.$class-prefix}is-transparent { + opacity: 0.3; + } + + // Responsiveness + @include mx.mobile { + display: none; + } +} + +.#{iv.$class-prefix}hero-buttons { + margin-top: 1.5rem; + + // Responsiveness + @include mx.mobile { + .#{iv.$class-prefix}button { + display: flex; + + &:not(:last-child) { + margin-bottom: 0.75rem; + } + } + } + + @include mx.tablet { + display: flex; + justify-content: center; + + .#{iv.$class-prefix}button:not(:last-child) { + margin-inline-end: 1.5rem; + } + } +} + +// Containers + +.#{iv.$class-prefix}hero-head, +.#{iv.$class-prefix}hero-foot { + flex-grow: 0; + flex-shrink: 0; +} + +.#{iv.$class-prefix}hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: cv.getVar("hero-body-padding"); + + @include mx.tablet { + padding: cv.getVar("hero-body-padding-tablet"); + } +} diff --git a/web/assets/css/sass/layout/level.scss b/web/assets/css/sass/layout/level.scss new file mode 100644 index 0000000..dbb5a47 --- /dev/null +++ b/web/assets/css/sass/layout/level.scss @@ -0,0 +1,107 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$level-item-spacing: calc(#{cv.getVar("block-spacing")} * 0.5) !default; + +.#{iv.$class-prefix}level { + @extend %block; + @include cv.register-var("level-item-spacing", #{$level-item-spacing}); + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: cv.getVar("level-item-spacing"); + + code { + border-radius: cv.getVar("radius"); + } + + img { + display: inline-block; + vertical-align: top; + } + + // Modifiers + &.#{iv.$class-prefix}is-mobile { + display: flex; + flex-direction: row; + + .#{iv.$class-prefix}level-left, + .#{iv.$class-prefix}level-right { + display: flex; + } + + .#{iv.$class-prefix}level-item { + &:not(.#{iv.$class-prefix}is-narrow) { + flex-grow: 1; + } + } + } + + // Responsiveness + @include mx.tablet { + display: flex; + flex-direction: row; + + & > .#{iv.$class-prefix}level-item { + &:not(.#{iv.$class-prefix}is-narrow) { + flex-grow: 1; + } + } + } +} + +.#{iv.$class-prefix}level-item { + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + + .#{iv.$class-prefix}title, + .#{iv.$class-prefix}subtitle { + margin-bottom: 0; + } +} + +.#{iv.$class-prefix}level-left, +.#{iv.$class-prefix}level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + gap: $level-item-spacing; + + .#{iv.$class-prefix}level-item { + // Modifiers + &.#{iv.$class-prefix}is-flexible { + flex-grow: 1; + } + } +} + +.#{iv.$class-prefix}level-left { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; + + // Responsiveness + @include mx.tablet { + flex-direction: row; + } +} + +.#{iv.$class-prefix}level-right { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-end; + + // Responsiveness + @include mx.tablet { + flex-direction: row; + } +} diff --git a/web/assets/css/sass/layout/media.scss b/web/assets/css/sass/layout/media.scss new file mode 100644 index 0000000..e65ced8 --- /dev/null +++ b/web/assets/css/sass/layout/media.scss @@ -0,0 +1,106 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/extends"; +@use "../utilities/mixins" as mx; + +$media-border-color: hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("border-l")}, + 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; + +.#{iv.$class-prefix}media { + @extend %block; + @include cv.register-vars( + ( + "media-border-color": #{$media-border-color}, + "media-border-size": #{$media-border-size}, + "media-spacing": #{$media-spacing}, + "media-spacing-large": #{$media-spacing-large}, + "media-content-spacing": #{$media-content-spacing}, + "media-level-1-spacing": #{$media-level-1-spacing}, + "media-level-1-content-spacing": #{$media-level-1-content-spacing}, + "media-level-2-spacing": #{$media-level-2-spacing}, + ) + ); + align-items: flex-start; + display: flex; + text-align: inherit; + + .#{iv.$class-prefix}content:not(:last-child) { + margin-bottom: cv.getVar("media-content-spacing"); + } + + .#{iv.$class-prefix}media { + border-top-color: cv.getVar("media-border-color"); + border-top-style: solid; + border-top-width: cv.getVar("media-border-size"); + display: flex; + padding-top: cv.getVar("media-level-1-spacing"); + + .#{iv.$class-prefix}content:not(:last-child), + .#{iv.$class-prefix}control:not(:last-child) { + margin-bottom: cv.getVar("media-level-1-content-spacing"); + } + + .#{iv.$class-prefix}media { + padding-top: cv.getVar("media-level-2-spacing"); + + & + .#{iv.$class-prefix}media { + margin-top: cv.getVar("media-level-2-spacing"); + } + } + } + + & + .#{iv.$class-prefix}media { + border-top-color: cv.getVar("media-border-color"); + border-top-style: solid; + border-top-width: cv.getVar("media-border-size"); + margin-top: cv.getVar("media-spacing"); + padding-top: cv.getVar("media-spacing"); + } + + // Sizes + &.#{iv.$class-prefix}is-large { + & + .#{iv.$class-prefix}media { + margin-top: cv.getVar("media-spacing-large"); + padding-top: cv.getVar("media-spacing-large"); + } + } +} + +.#{iv.$class-prefix}media-left, +.#{iv.$class-prefix}media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.#{iv.$class-prefix}media-left { + margin-inline-end: cv.getVar("media-spacing"); +} + +.#{iv.$class-prefix}media-right { + margin-inline-start: cv.getVar("media-spacing"); +} + +.#{iv.$class-prefix}media-content { + flex-basis: auto; + flex-grow: 1; + flex-shrink: 1; + text-align: inherit; +} + +@include mx.mobile { + .#{iv.$class-prefix}media-content { + overflow-x: auto; + } +} diff --git a/web/assets/css/sass/layout/section.scss b/web/assets/css/sass/layout/section.scss new file mode 100644 index 0000000..9d9bd5a --- /dev/null +++ b/web/assets/css/sass/layout/section.scss @@ -0,0 +1,34 @@ +@use "../utilities/css-variables" as cv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/mixins" as mx; + +$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; + +.#{iv.$class-prefix}section { + @include cv.register-vars( + ( + "section-padding": #{$section-padding}, + "section-padding-desktop": #{$section-padding-desktop}, + "section-padding-medium": #{$section-padding-medium}, + "section-padding-large": #{$section-padding-large}, + ) + ); + padding: cv.getVar("section-padding"); + + // Responsiveness + @include mx.desktop { + padding: cv.getVar("section-padding-desktop"); + + // Sizes + &.#{iv.$class-prefix}is-medium { + padding: cv.getVar("section-padding-medium"); + } + + &.#{iv.$class-prefix}is-large { + padding: cv.getVar("section-padding-large"); + } + } +} diff --git a/web/assets/css/sass/themes/_index.scss b/web/assets/css/sass/themes/_index.scss new file mode 100644 index 0000000..d4168f5 --- /dev/null +++ b/web/assets/css/sass/themes/_index.scss @@ -0,0 +1,35 @@ +/* Bulma Themes */ +@charset "utf-8"; + +@use "../utilities/css-variables" as cv; + +@use "light"; +@use "dark"; +@use "setup"; + +:root { + @include light.light-theme; + @include setup.setup-theme; +} + +// prefers-color-scheme: light +@include cv.system-theme($name: "light") { + @include light.light-theme; +} + +// prefers-color-scheme: dark +@include cv.system-theme($name: "dark") { + @include dark.dark-theme; +} + +// :root, [data-theme=light], .theme-light +@include cv.bulma-theme($name: "light") { + @include light.light-theme; + @include setup.setup-theme; +} + +// [data-theme=dark], .theme-dark +@include cv.bulma-theme($name: "dark") { + @include dark.dark-theme; + @include setup.setup-theme; +} diff --git a/web/assets/css/sass/themes/dark.scss b/web/assets/css/sass/themes/dark.scss new file mode 100644 index 0000000..65cf947 --- /dev/null +++ b/web/assets/css/sass/themes/dark.scss @@ -0,0 +1,56 @@ +@use "sass:list"; + +@use "../utilities/initial-variables" as iv; +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "setup"; + +// The main lightness of this theme +$scheme-main-l: 9%; +$background-l: 14%; +$text-l: 71%; + +// The main scheme color, used to make calculations +$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l); +$background: hsl(iv.$scheme-h, iv.$scheme-s, $background-l); +$text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l); + +@mixin dark-theme { + @each $name, $color in dv.$colors { + $base: $color; + + @if type-of($color == "list") { + $base: list.nth($color, 1); + } + + @include cv.generate-on-scheme-colors($name, $base, $scheme-main); + } + + @include cv.register-vars( + ( + "scheme-brightness": "dark", + "scheme-main-l": $scheme-main-l, + "scheme-main-bis-l": $scheme-main-l + 2%, + "scheme-main-ter-l": $scheme-main-l + 4%, + "soft-l": iv.$dark-l, + "bold-l": iv.$light-l, + "soft-invert-l": iv.$light-l, + "bold-invert-l": iv.$dark-l, + "background-l": $background-l, + "border-weak-l": 21%, + "border-l": 24%, + "text-weak-l": 53%, + "text-l": $text-l, + "text-strong-l": 93%, + "text-title-l": 100%, + "hover-background-l-delta": 5%, + "active-background-l-delta": 10%, + "hover-border-l-delta": 10%, + "active-border-l-delta": 20%, + "hover-color-l-delta": 5%, + "active-color-l-delta": 10%, + ) + ); + + @include cv.register-hsl("shadow", white); +} diff --git a/web/assets/css/sass/themes/light.scss b/web/assets/css/sass/themes/light.scss new file mode 100644 index 0000000..67f94c7 --- /dev/null +++ b/web/assets/css/sass/themes/light.scss @@ -0,0 +1,145 @@ +@use "sass:list"; + +@use "../utilities/css-variables" as cv; +@use "../utilities/derived-variables" as dv; +@use "../utilities/initial-variables" as iv; +@use "../utilities/functions" as fn; +@use "setup"; + +// The main lightness of this theme +$scheme-main-l: 100%; + +// The main scheme color, used to make calculations +$scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l); + +@mixin light-theme { + @include cv.register-vars( + ( + "scheme-h": iv.$scheme-h, + "scheme-s": iv.$scheme-s, + "light-l": iv.$light-l, + "light-invert-l": iv.$dark-l, + "dark-l": iv.$dark-l, + "dark-invert-l": iv.$light-l, + "soft-l": iv.$light-l, + "bold-l": iv.$dark-l, + "soft-invert-l": iv.$dark-l, + "bold-invert-l": iv.$light-l, + + // Deltas + "hover-background-l-delta": -5%, + "active-background-l-delta": -10%, + + "hover-border-l-delta": -10%, + "active-border-l-delta": -20%, + + "hover-color-l-delta": -5%, + "active-color-l-delta": -10%, + + "hover-shadow-a-delta": -0.05, + "active-shadow-a-delta": -0.1, + + // Light only + "scheme-brightness": "light", + "scheme-main-l": $scheme-main-l, + "scheme-main-bis-l": 98%, + "scheme-main-ter-l": 96%, + "background-l": 96%, + "border-weak-l": 93%, + "border-l": 86%, + "text-weak-l": 48%, + "text-l": 29%, + "text-strong-l": 21%, + "text-title-l": 14%, + "scheme-invert-ter-l": 14%, + "scheme-invert-bis-l": 7%, + "scheme-invert-l": 4%, + + // Typography + "family-primary": dv.$family-primary, + "family-secondary": dv.$family-secondary, + "family-code": dv.$family-code, + "size-small": dv.$size-small, + "size-normal": dv.$size-normal, + "size-medium": dv.$size-medium, + "size-large": dv.$size-large, + "weight-light": iv.$weight-light, + "weight-normal": iv.$weight-normal, + "weight-medium": iv.$weight-medium, + "weight-semibold": iv.$weight-semibold, + "weight-bold": iv.$weight-bold, + "weight-extrabold": iv.$weight-extrabold, + + // Other + "block-spacing": iv.$block-spacing, + "duration": 294ms, + "easing": ease-out, + "radius-small": iv.$radius-small, + "radius": iv.$radius, + "radius-medium": iv.$radius-medium, + "radius-large": iv.$radius-large, + "radius-rounded": 9999px, + "speed": 86ms, + + "loading-color": #{cv.getVar("border")}, + "burger-h": #{cv.getVar("link-h")}, + "burger-s": #{cv.getVar("link-s")}, + "burger-l": #{cv.getVar("link-l")}, + "burger-border-radius": 0.5em, + // Using px values to prevent half pixel issues + "burger-gap": 5px, + "burger-item-height": 2px, + "burger-item-width": 20px, + ) + ); + + // Colors + $no-palette: ("white", "black", "light", "dark"); + + @each $name, $color in dv.$colors { + $base: $color; + $invert: null; + $light: null; + $dark: null; + + @if type-of($color == "list") { + $base: list.nth($color, 1); + + @if list.length($color) > 3 { + $invert: list.nth($color, 2); + $light: list.nth($color, 3); + $dark: list.nth($color, 4); + } @else if list.length($color) > 1 { + $invert: list.nth($color, 2); + } + } + + @if list.index($no-palette, $name) { + @include cv.generate-basic-palette($name, $base, $invert); + } @else { + @include cv.generate-color-palette( + $name, + $base, + $scheme-main-l, + $invert, + $light, + $dark + ); + } + + @include cv.generate-on-scheme-colors($name, $base, $scheme-main); + } + + // Shades + @each $name, $shade in dv.$shades { + @include cv.register-var($name, $shade); + } + + @include cv.register-hsl("shadow", dv.$shadow-color); + + @each $size in dv.$sizes { + $i: index(dv.$sizes, $size); + $name: "size-#{$i}"; + @include cv.register-var($name, $size); + } +} diff --git a/web/assets/css/sass/themes/setup.scss b/web/assets/css/sass/themes/setup.scss new file mode 100644 index 0000000..6caddf7 --- /dev/null +++ b/web/assets/css/sass/themes/setup.scss @@ -0,0 +1,174 @@ +@use "../utilities/css-variables" as cv; + +@mixin setup-theme() { + @include cv.register-vars( + ( + // Computed + "scheme-main": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-main-l")} + ), + "scheme-main-bis": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-main-bis-l")} + ), + "scheme-main-ter": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-main-ter-l")} + ), + "background": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("background-l")} + ), + "background-hover": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + calc( + #{cv.getVar("background-l")} + #{cv.getVar( + "hover-background-l-delta" + )} + ) + ), + "background-active": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + calc( + #{cv.getVar("background-l")} + #{cv.getVar( + "active-background-l-delta" + )} + ) + ), + "border-weak": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("border-weak-l")} + ), + "border": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("border-l")} + ), + "border-hover": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + calc(#{cv.getVar("border-l")} + #{cv.getVar("hover-border-l-delta")}) + ), + "border-active": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + calc(#{cv.getVar("border-l")} + #{cv.getVar("active-border-l-delta")}) + ), + "text-weak": + hsl( + #{cv.getVar("text-h")}, + #{cv.getVar("text-s")}, + #{cv.getVar("text-weak-l")} + ), + "text": + hsl( + #{cv.getVar("text-h")}, + #{cv.getVar("text-s")}, + #{cv.getVar("text-l")} + ), + "text-strong": + hsl( + #{cv.getVar("text-h")}, + #{cv.getVar("text-s")}, + #{cv.getVar("text-strong-l")} + ), + "scheme-invert-ter": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-ter-l")} + ), + "scheme-invert-bis": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-bis-l")} + ), + "scheme-invert": + hsl( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("scheme-invert-l")} + ), + "link": + hsl( + #{cv.getVar("link-h")}, + #{cv.getVar("link-s")}, + #{cv.getVar("link-l")} + ), + "link-text": + hsl( + #{cv.getVar("link-h")}, + #{cv.getVar("link-s")}, + #{cv.getVar("link-on-scheme-l")} + ), + "link-text-hover": + hsl( + #{cv.getVar("link-h")}, + #{cv.getVar("link-s")}, + calc( + #{cv.getVar("link-on-scheme-l")} + #{cv.getVar( + "hover-color-l-delta" + )} + ) + ), + "link-text-active": + hsl( + #{cv.getVar("link-h")}, + #{cv.getVar("link-s")}, + calc( + #{cv.getVar("link-on-scheme-l")} + #{cv.getVar( + "active-color-l-delta" + )} + ) + ), + "focus-h": #{cv.getVar("link-h")}, + "focus-s": #{cv.getVar("link-s")}, + "focus-l": #{cv.getVar("link-l")}, + "focus-offset": 1px, + "focus-style": solid, + "focus-width": 2px, + "focus-shadow-size": 0 0 0 0.1875em, + "focus-shadow-alpha": 0.25, + "code": + hsl( + #{cv.getVar("danger-h")}, + #{cv.getVar("danger-s")}, + #{cv.getVar("danger-on-scheme-l")} + ), + "code-background": #{cv.getVar("background")}, + "pre": #{cv.getVar("text")}, + "pre-background": #{cv.getVar("background")}, + "shadow": ( + 0 0.5em 1em -0.125em hsla(#{cv.getVar("shadow-h")}, #{cv.getVar( + "shadow-s" + )}, #{cv.getVar("shadow-l")}, 0.1), + 0 0px 0 1px + hsla( + #{cv.getVar("shadow-h")}, + #{cv.getVar("shadow-s")}, + #{cv.getVar("shadow-l")}, + 0.02 + ) + ) + ) + ); +} diff --git a/web/assets/css/sass/utilities/_index.scss b/web/assets/css/sass/utilities/_index.scss new file mode 100644 index 0000000..12e06bc --- /dev/null +++ b/web/assets/css/sass/utilities/_index.scss @@ -0,0 +1,7 @@ +/* Bulma Utilities */ +@charset "utf-8"; + +@forward "initial-variables"; +@forward "functions"; +@forward "derived-variables"; +@forward "controls"; diff --git a/web/assets/css/sass/utilities/controls.scss b/web/assets/css/sass/utilities/controls.scss new file mode 100644 index 0000000..5ad16dd --- /dev/null +++ b/web/assets/css/sass/utilities/controls.scss @@ -0,0 +1,85 @@ +@use "css-variables" as cv; +@use "derived-variables" as dv; +@use "initial-variables" as iv; + +$control-radius: cv.getVar("radius") !default; +$control-radius-small: cv.getVar("radius-small") !default; + +$control-border-width: 1px !default; +$control-size: cv.getVar("size-normal") !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-focus-shadow-l: 50% !default; + +:root { + @include cv.register-vars( + ( + "control-radius": #{$control-radius}, + "control-radius-small": #{$control-radius-small}, + "control-border-width": #{$control-border-width}, + "control-height": #{$control-height}, + "control-line-height": #{$control-line-height}, + "control-padding-vertical": #{$control-padding-vertical}, + "control-padding-horizontal": #{$control-padding-horizontal}, + "control-size": #{$control-size}, + "control-focus-shadow-l": #{$control-focus-shadow-l}, + ) + ); +} + +@mixin control { + align-items: center; + appearance: none; + border-color: transparent; + border-style: solid; + border-width: cv.getVar("control-border-width"); + border-radius: cv.getVar("control-radius"); + box-shadow: none; + display: inline-flex; + font-size: cv.getVar("control-size"); + height: cv.getVar("control-height"); + justify-content: flex-start; + line-height: cv.getVar("control-line-height"); + padding-bottom: cv.getVar("control-padding-vertical"); + padding-left: cv.getVar("control-padding-horizontal"); + padding-right: cv.getVar("control-padding-horizontal"); + padding-top: cv.getVar("control-padding-vertical"); + position: relative; + transition-duration: cv.getVar("duration"); + transition-property: background-color, border-color, box-shadow, color; + vertical-align: top; + + // States + &:focus, + &:focus-visible, + &:focus-within, + &.#{iv.$class-prefix}is-focused, + &:active, + &.#{iv.$class-prefix}is-active { + outline: none; + } + + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} + +// The controls sizes use mixins so they can be used at different breakpoints +@mixin control-small { + border-radius: $control-radius-small; + font-size: cv.getVar("size-small"); +} + +@mixin control-medium { + font-size: cv.getVar("size-medium"); +} + +@mixin control-large { + font-size: cv.getVar("size-large"); +} diff --git a/web/assets/css/sass/utilities/css-variables.scss b/web/assets/css/sass/utilities/css-variables.scss new file mode 100644 index 0000000..31feb61 --- /dev/null +++ b/web/assets/css/sass/utilities/css-variables.scss @@ -0,0 +1,425 @@ +@use "sass:color"; +@use "sass:list"; +@use "sass:map"; +@use "sass:math"; + +@use "initial-variables" as iv; +@use "functions" as fn; + +@function buildVarName($name, $prefix: "", $suffix: "") { + @return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}"; +} + +@function buildHslaString($name, $l, $a: 1) { + $lightness: getVar($name, "", "-l"); + @if ($l) { + $lightness: $l; + } + @return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})"; +} + +@function getVar($name, $prefix: "", $suffix: "") { + $varName: buildVarName($name, $prefix, $suffix); + @return var(#{$varName}); +} + +@function getVarWithBackup($name, $backup, $prefix: "", $suffix: "") { + $varName: buildVarName($name, $prefix, $suffix); + $backupName: buildVarName($backup, $prefix, $suffix); + @return var(#{$varName}, var(#{$backupName})); +} + +@function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") { + $varName: buildVarName($name, $prefix, $suffix); + @return unquote("rgba(var(#{$varName}), #{$alpha})"); +} + +@mixin register-var($name, $value, $prefix: "", $suffix: "") { + $varName: buildVarName($name, $prefix, $suffix); + #{$varName}: #{$value}; +} + +@mixin register-vars($vars, $prefix: "", $suffix: "") { + @each $name, $value in $vars { + @include register-var($name, $value, $prefix, $suffix); + } +} + +@mixin register-rgb($name, $value) { + @include register-var( + $name, + (red($value), green($value), blue($value)), + "", + "-rgb" + ); +} + +@mixin register-hsl($name, $value) { + @include register-var($name, round(hue($value)), "", "-h"); + @include register-var($name, round(saturation($value)), "", "-s"); + @include register-var($name, round(lightness($value)), "", "-l"); +} + +@mixin generate-on-scheme-colors($name, $base, $scheme-main) { + // Accessibility Contrast System + $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main); + $on-scheme-color: $base; + $fg-lum: fn.bulmaColorLuminance($on-scheme-color); + $bg-lum: fn.bulmaColorLuminance($scheme-main); + $ratio: 0; + $found-decent-color: false; + + @if ($fg-lum > $bg-lum) { + @for $i from 0 through 20 { + $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05)); + + @if $ratio > 5 { + $found-decent-color: true; + } @else { + $on-scheme-color: lighten($on-scheme-color, 5%); + $fg-lum: fn.bulmaColorLuminance($on-scheme-color); + } + } + } @else { + @for $i from 0 through 20 { + $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05)); + + @if $ratio > 5 { + $found-decent-color: true; + } @else { + $on-scheme-color: darken($on-scheme-color, 5%); + $fg-lum: fn.bulmaColorLuminance($on-scheme-color); + } + } + } + + $on-scheme-lightness: lightness($on-scheme-color); + @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l"); + $on-scheme-l: getVar($name, "", "-on-scheme-l"); + @include register-var( + "#{$name}-on-scheme", + buildHslaString($name, $on-scheme-l) + ); +} + +@mixin v1-generate-on-scheme-colors($name, $base, $scheme-main) { + // Accessibility Contrast System + $scheme-main-brightness: fn.bulmaColorBrightness($scheme-main); + $on-scheme-color: $base; + + @if ($scheme-main-brightness == "bright") { + @while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) { + // We're on a light background, so we'll darken the test color step by step. + $on-scheme-color: darken($on-scheme-color, 5%); + } + } @else { + @while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) { + // We're on a dark background, so we'll lighten the test color step by step. + $on-scheme-color: lighten($on-scheme-color, 5%); + } + } + + $on-scheme-lightness: lightness($on-scheme-color); + @include register-var($name, $on-scheme-lightness, "", "-on-scheme-l"); +} + +@mixin register-base-color($name, $base) { + $hsla: buildHslaString($name, getVar($name, "", "-l")); + @include register-var($name, $hsla); + @include register-var($name, $hsla, "", "-base"); // Just for reference + @include register-rgb($name, $base); + @include register-hsl($name, $base); +} + +@mixin generate-basic-palette($name, $base, $invert: null) { + @include register-base-color($name, $base); + + @if $invert { + @include register-var($name, lightness($invert), "", "-invert-l"); + @include register-var("#{$name}-invert", $invert); + } +} + +@mixin generate-color-palette( + $name, + $base, + $scheme-main-l: 100%, + $invert: null, + $light: null, + $dark: null +) { + $h: round(hue($base)); // Hue + $s: round(saturation($base)); // Saturation + $l: round(lightness($base)); // Lightness + $base-lum: fn.bulmaColorLuminance($base); + $l-base: round($l % 10); // Get lightness second digit: 53% -> 3% + $l-0: 0%; // 5% or less + $l-5: 5%; // More than 5% + $a: 1; // Alpha + $base-digits: "00"; + + // Calculate digits like "40" for the scheme-main + $scheme-l-0: 0%; + $scheme-l-base: round($scheme-main-l % 10); + $closest-5: math.round(math.div($scheme-main-l, 5)) * 5; + $pct-to-int: math.div($closest-5, 100%) * 100; + $scheme-main-digits: #{$pct-to-int}; + + // === STEP 1 === + // Register the base colors + @include register-base-color($name, $base); + + // === STEP 2 === + // Generating 20 shades of the color + + // 00: 0%, 1%, 2% + // 05: 3%, 4%, 5%, 6%, 7% + // 10: 8%, 9% + + @if ($l-base < 3%) { + $l-0: $l-base; + $l-5: $l-base + 5%; + } @else if ($l-base < 8%) { + // $l-0: math.max($l-base - 5%, 0%); + $l-0: $l-base - 5%; + $l-5: $l-base; + } @else { + // $l-0: math.max($l-base - 10%, 0%); + $l-0: $l-base - 10%; + $l-5: $l-base - 5%; + } + + $shades: (); + + @for $i from 0 through 9 { + // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc. + $color-l-0: math.max($l-0 + $i * 10, 0%); + + // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc. + $color-l-5: $l-5 + $i * 10; + + $shades: map.set($shades, "#{$i}0", $color-l-0); + $shades: map.set($shades, "#{$i}5", $color-l-5); + + @include register-var($name, $color-l-0, "", "-#{$i}0-l"); + @include register-var($name, $color-l-5, "", "-#{$i}5-l"); + + @if $color-l-0 == $l { + $base-digits: "#{$i}0"; + } @else if $color-l-5 == $l { + $base-digits: "#{$i}5"; + } + } + + $shades: map.set($shades, "100", 100%); + @include register-var($name, 100%, "", "-100-l"); + + // === STEP 3 === + // Find accessible color combinations + + $combos: (); + + @each $digits-bg, $bg-l in $shades { + $background: hsl($h, $s, $bg-l); + $bg-lum: fn.bulmaColorLuminance($background); + $bg-is-light: $bg-lum > 0.55; + $candidates: (); + $found: false; + + // If the background color is the base color + @if $bg-l == $l { + $base-digits: $digits-bg; + + // Even if the base color as a background + // doesn't have an appropriate foreground, + // we still add to the list of "valid" contrast combos for now. + @if $bg-is-light { + $combos: map.set($combos, $base-digits, "10"); + } @else { + $combos: map.set($combos, $base-digits, "100"); + } + } + + // We capture all contrast ratios for any given background + // using all foreground options + $current-best-digits: "00"; + $current-best-ratio: 0; + + @each $digits-fg, $fg-l in $shades { + $foreground: hsl($h, $s, $fg-l); + $ratio: 0; + $is-light-fg: false; + + // Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html + $fg-lum: fn.bulmaColorLuminance($foreground); + + @if (lightness($foreground) > lightness($background)) { + $is-light-fg: true; + $ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05)); + } @else { + $ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05)); + } + + @if $ratio > 7 { + $candidates: list.append( + $candidates, + fn.bulmaStringToNumber($digits-fg) + ); + + @if ($is-light-fg) { + @if (not $found) { + // Store the background/foreground combination + $combos: map.set($combos, $digits-bg, $digits-fg); + $current-best-digits: $digits-fg; + $current-best-ratio: $ratio; + $found: true; + } + } @else { + $combos: map.set($combos, $digits-bg, $digits-fg); + $current-best-digits: $digits-fg; + $current-best-ratio: $ratio; + } + } + } + + // We haven't found a decent ratio + @each $digits-fg, $fg-l in $shades { + @if (map.has-key($combos, $digits-bg) == false) { + @if ($bg-is-light) { + // Light background so we set a dark foreground + $combos: map.set($combos, $digits-bg, "00"); + } @else { + // Dark background so we set a light foreground + $combos: map.set($combos, $digits-bg, "100"); + } + } + } + } + + // The output needs to be: + // --bulma-primary-invert-l: var(--bulma-primary-100-l); + + @each $bg, $fg in $combos { + // Just using this loop to register all 20 digits + $bg-l: getVar($name, "", "-#{$bg}-l"); + @include register-var("#{$name}-#{$bg}", buildHslaString($name, $bg-l)); + + // Register the lightness + @include register-var( + $name, + getVar($name, "", "-#{$fg}-l"), + "", + "-#{$bg}-invert-l" + ); + + // Resiter the color using that lightness + $bg-invert-l: getVar($name, "", "-#{$bg}-invert-l"); + @include register-var( + "#{$name}-#{$bg}-invert", + buildHslaString($name, $bg-invert-l) + ); + } + + // If an invert color is provided by the user + @if $invert { + @include register-var($name, lightness($invert), "", "-invert-l"); + @include register-var("#{$name}-invert", $invert); + } @else { + $base-invert-l-digits: map.get($combos, $base-digits); + @include register-var( + $name, + getVar($name, "", "-#{$base-invert-l-digits}-l"), + "", + "-invert-l" + ); + + $base-invert-l: getVar($name, "", "-invert-l"); + @include register-var( + "#{$name}-invert", + buildHslaString($name, $base-invert-l) + ); + } + + // Good color on light background (90% lightness) + @if $light and $dark { + @include register-var($name, lightness($light), "", "-light-l"); + @include register-var($name, lightness($light), "", "-dark-invert-l"); + @include register-var("#{$name}-light", $light); + @include register-var("#{$name}-dark-invert", $light); + + @include register-var($name, lightness($dark), "", "-dark-l"); + @include register-var($name, lightness($dark), "", "-light-invert-l"); + @include register-var("#{$name}-dark", $dark); + @include register-var("#{$name}-light-invert", $dark); + } @else { + @include register-var($name, getVar($name, "", "-90-l"), "", "-light-l"); + + $light-l: getVar($name, "", "-light-l"); + @include register-var("#{$name}-light", buildHslaString($name, $light-l)); + + $light-invert-l-digits: map.get($combos, "90"); + @include register-var( + $name, + getVar($name, "", "-#{$light-invert-l-digits}-l"), + "", + "-light-invert-l" + ); + + $light-invert-l: getVar($name, "", "-light-invert-l"); + @include register-var( + "#{$name}-light-invert", + buildHslaString($name, $light-invert-l) + ); + + // Good color on dark background (10% lightness) + @include register-var($name, getVar($name, "", "-10-l"), "", "-dark-l"); + + $dark-l: getVar($name, "", "-dark-l"); + @include register-var("#{$name}-dark", buildHslaString($name, $dark-l)); + + $dark-invert-l-digits: map.get($combos, "10"); + @include register-var( + $name, + getVar($name, "", "-#{$dark-invert-l-digits}-l"), + "", + "-dark-invert-l" + ); + + $dark-invert-l: getVar($name, "", "-dark-invert-l"); + @include register-var( + "#{$name}-dark-invert", + buildHslaString($name, $dark-invert-l) + ); + + // Soft and Bold colors + $soft-l: getVar("soft-l"); + $soft-invert-l: getVar("soft-invert-l"); + $bold-l: getVar("bold-l"); + $bold-invert-l: getVar("bold-invert-l"); + @include register-var("#{$name}-soft", buildHslaString($name, $soft-l)); + @include register-var("#{$name}-bold", buildHslaString($name, $bold-l)); + @include register-var( + "#{$name}-soft-invert", + buildHslaString($name, $soft-invert-l) + ); + @include register-var( + "#{$name}-bold-invert", + buildHslaString($name, $bold-invert-l) + ); + } +} + +@mixin bulma-theme($name) { + [data-#{iv.$class-prefix}theme="#{$name}"], + .#{iv.$class-prefix}theme-#{$name} { + @content; + } +} + +@mixin system-theme($name) { + @media (prefers-color-scheme: #{$name}) { + :root { + @content; + } + } +} diff --git a/web/assets/css/sass/utilities/derived-variables.scss b/web/assets/css/sass/utilities/derived-variables.scss new file mode 100644 index 0000000..6f1440d --- /dev/null +++ b/web/assets/css/sass/utilities/derived-variables.scss @@ -0,0 +1,112 @@ +@use "initial-variables" as iv; +@use "functions" as fn; + +// Scheme colors + +$scheme-main: iv.$white !default; +$scheme-main-bis: iv.$white-bis !default; +$scheme-main-ter: iv.$white-ter !default; +$scheme-invert: iv.$black !default; +$scheme-invert-bis: iv.$black-bis !default; +$scheme-invert-ter: iv.$black-ter !default; + +// Text colors + +$text: iv.$grey-dark !default; +$text-invert: fn.bulmaFindColorInvert($text) !default; +$text-weak: iv.$grey !default; +$text-strong: iv.$grey-darker !default; + +// Status colors + +$primary: iv.$turquoise !default; +$info: iv.$cyan !default; +$success: iv.$green !default; +$warning: iv.$yellow !default; +$danger: iv.$red !default; +$light: iv.$white-ter !default; +$dark: iv.$grey-darker !default; + +// Link colors + +$link: iv.$blue !default; + +// Decorative colors + +$background: iv.$white-ter !default; +$border: iv.$grey-lighter !default; +$border-weak: iv.$grey-lightest !default; + +// Code colors + +$code: iv.$red !default; +$code-background: $background !default; + +$pre: $text !default; +$pre-background: $background !default; + +// Typography + +$family-primary: iv.$family-sans-serif !default; +$family-secondary: iv.$family-sans-serif !default; +$family-code: iv.$family-monospace !default; + +$size-small: iv.$size-7 !default; +$size-normal: iv.$size-6 !default; +$size-medium: iv.$size-5 !default; +$size-large: iv.$size-4 !default; + +// Effects + +$shadow-color: iv.$black !default; + +// Lists and maps +$custom-colors: null !default; +$custom-shades: null !default; + +$colors: fn.mergeColorMaps( + ( + "white": ( + iv.$white, + iv.$black, + ), + "black": ( + iv.$black, + iv.$white, + ), + "light": ( + $light, + $dark, + ), + "dark": ( + $dark, + $light, + ), + "text": $text, + "primary": $primary, + "link": $link, + "info": $info, + "success": $success, + "warning": $warning, + "danger": $danger, + ), + $custom-colors +) !default; + +$shades: fn.mergeColorMaps( + ( + "black-bis": iv.$black-bis, + "black-ter": iv.$black-ter, + "grey-darker": iv.$grey-darker, + "grey-dark": iv.$grey-dark, + "grey": iv.$grey, + "grey-light": iv.$grey-light, + "grey-lighter": iv.$grey-lighter, + "white-ter": iv.$white-ter, + "white-bis": iv.$white-bis, + ), + $custom-shades +) !default; + +$sizes: iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6 + iv.$size-7 !default; diff --git a/web/assets/css/sass/utilities/extends.scss b/web/assets/css/sass/utilities/extends.scss new file mode 100644 index 0000000..42d05fe --- /dev/null +++ b/web/assets/css/sass/utilities/extends.scss @@ -0,0 +1,34 @@ +@use "controls"; +@use "mixins"; + +%arrow { + @include mixins.arrow; +} + +%block { + @include mixins.block; +} + +%control { + @include controls.control; +} + +%delete { + @include mixins.delete; +} + +%loader { + @include mixins.loader; +} + +%overlay { + @include mixins.overlay; +} + +%reset { + @include mixins.reset; +} + +%unselectable { + @include mixins.unselectable; +} diff --git a/web/assets/css/sass/utilities/functions.scss b/web/assets/css/sass/utilities/functions.scss new file mode 100644 index 0000000..f19dae0 --- /dev/null +++ b/web/assets/css/sass/utilities/functions.scss @@ -0,0 +1,258 @@ +@use "sass:list"; +@use "sass:math"; + +@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: bulmaFindColorInvert($color-base); + $color-light: bulmaFindLightColor($color-base); + $color-dark: bulmaFindDarkColor($color-base); + } @else if type-of($components) == "list" { + $color-base: list.nth($components, 1); + + // If Invert, Light and Dark are provided + @if length($components) > 3 { + $color-invert: list.nth($components, 2); + $color-light: list.nth($components, 3); + $color-dark: list.nth($components, 4); + + // If only Invert and Light are provided + } @else if length($components) > 2 { + $color-invert: list.nth($components, 2); + $color-light: list.nth($components, 3); + $color-dark: bulmaFindDarkColor($color-base); + + // If only Invert is provided + } @else { + $color-invert: list.nth($components, 2); + $color-light: bulmaFindLightColor($color-base); + $color-dark: bulmaFindDarkColor($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: math.div($value, $number); + } + } + + @return $value; +} + +@function bulmaColorLuminance($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: math.div($value, 255); + + @if $value < 0.03928 { + $value: math.div($value, 12.92); + } @else { + $value: math.div($value + 0.055, 1.055); + $value: powerNumber($value, 2); + } + + $color-rgb: map-merge( + $color-rgb, + ( + $name: $value, + ) + ); + } + + @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * + 0.7152 + map-get($color-rgb, "blue") * 0.0722; +} + +@function bulmaFindColorInvert($color) { + @if bulmaColorLuminance($color) > 0.55 { + @return rgba(#000, 0.7); + } @else { + @return #fff; + } +} + +@function bulmaFindLightColor($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 bulmaFindDarkColor($color, $base-l: 29%) { + @if type-of($color) == "color" { + $luminance: bulmaColorLuminance($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); +} + +@function bulmaColorBrightness($n) { + $color-brightness: round( + (red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000 + ); + $light-color: round( + (red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000 + ); + + @if abs($color-brightness) < math.div($light-color, 2) { + @return "dark"; + } + + @return "bright"; +} + +@function bulmaEnoughContrast($foreground, $background) { + $r: (max(red($foreground), red($background))) - + (min(red($foreground), red($background))); + $g: (max(green($foreground), green($background))) - + (min(green($foreground), green($background))); + $b: (max(blue($foreground), blue($background))) - + (min(blue($foreground), blue($background))); + $sum-rgb: $r + $g + $b; + + @if $sum-rgb < 500 { + @return false; + } + + @return true; +} + +// By Cory Simmons https://corysimmons.com/ +@function bulmaStringToNumber($value) { + @if type-of($value) == "number" { + @return $value; + } @else if type-of($value) != "string" { + $_: log("Value for `to-number` should be a number or a string."); + } + + $result: 0; + $digits: 0; + $minus: str-slice($value, 1, 1) == "-"; + $numbers: ( + "0": 0, + "1": 1, + "2": 2, + "3": 3, + "4": 4, + "5": 5, + "6": 6, + "7": 7, + "8": 8, + "9": 9, + ); + + @for $i from if($minus, 2, 1) through str-length($value) { + $character: str-slice($value, $i, $i); + + @if not(index(map-keys($numbers), $character) or $character == ".") { + @return to-length(if($minus, -$result, $result), str-slice($value, $i)); + } + + @if $character == "." { + $digits: 1; + } @else if $digits == 0 { + $result: $result * 10 + map-get($numbers, $character); + } @else { + $digits: $digits * 10; + $result: $result + map-get($numbers, $character) / $digits; + } + } + + @return if($minus, -$result, $result); +} diff --git a/web/assets/css/sass/utilities/initial-variables.scss b/web/assets/css/sass/utilities/initial-variables.scss new file mode 100644 index 0000000..7bd4b53 --- /dev/null +++ b/web/assets/css/sass/utilities/initial-variables.scss @@ -0,0 +1,155 @@ +// Scheme Hue and Saturation + +$scheme-h: 221; +$scheme-s: 14%; +$dark-l: 20%; +$light-l: 90%; + +// Colors + +$black: hsl(221, 14%, 4%) !default; +$black-bis: hsl(221, 14%, 9%) !default; +$black-ter: hsl(221, 14%, 14%) !default; + +$grey-darker: hsl(221, 14%, 21%) !default; +$grey-dark: hsl(221, 14%, 29%) !default; +$grey: hsl(221, 14%, 48%) !default; +$grey-light: hsl(221, 14%, 71%) !default; +$grey-lighter: hsl(221, 14%, 86%) !default; +$grey-lightest: hsl(221, 14%, 93%) !default; + +$white-ter: hsl(221, 14%, 96%) !default; +$white-bis: hsl(221, 14%, 98%) !default; +$white: hsl(221, 14%, 100%) !default; + +$orange: hsl(14, 100%, 53%) !default; +$yellow: hsl(42, 100%, 53%) !default; +$green: hsl(153, 53%, 53%) !default; +$turquoise: hsl(171, 100%, 41%) !default; +$cyan: hsl(198, 100%, 70%) !default; +$blue: hsl(233, 100%, 63%) !default; +$purple: hsl(271, 100%, 71%) !default; +$red: hsl(348, 100%, 70%) !default; + +// Typography + +$family-sans-serif: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", + "Helvetica Neue", "Helvetica", "Arial", sans-serif !default; +$family-monospace: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", + "Source Code Pro", "Ubuntu Mono", 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; +$weight-extrabold: 800 !default; + +// Spacing + +$block-spacing: 1.5rem !default; +$aspect-ratios: ( + (1, 1), + (5, 4), + (4, 3), + (3, 2), + (5, 3), + (16, 9), + (2, 1), + (3, 1), + (4, 5), + (3, 4), + (2, 3), + (3, 5), + (9, 16), + (1, 2), + (1, 3) +) !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: 0.25rem !default; +$radius: 0.375rem !default; +$radius-medium: 0.5em !default; +$radius-large: 0.75rem !default; +$radius-rounded: 9999px !default; +$speed: 86ms !default; + +// Flags + +$variable-columns: true !default; +$rtl: false !default; + +// Prefixes + +$class-prefix: "" !default; +$cssvars-prefix: "bulma-" !default; +$helpers-prefix: "is-" !default; +$helpers-has-prefix: "has-" !default; diff --git a/web/assets/css/sass/utilities/mixins.scss b/web/assets/css/sass/utilities/mixins.scss new file mode 100644 index 0000000..20d87b6 --- /dev/null +++ b/web/assets/css/sass/utilities/mixins.scss @@ -0,0 +1,460 @@ +@use "initial-variables" as iv; +@use "css-variables" as cv; + +@mixin arrow($color: #{cv.getVar("link")}) { + border: 0.125em solid $color; + 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; + transition-duration: cv.getVar("duration"); + transition-property: border-color; + width: 0.625em; +} + +@mixin block($spacing: cv.getVar("block-spacing")) { + &:not(:last-child) { + margin-bottom: $spacing; + } +} + +@mixin 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)); + } +} + +@mixin clearfix { + &::after { + clear: both; + content: " "; + display: table; + } +} + +@mixin delete { + @include cv.register-vars( + ( + "delete-dimensions": 1.25rem, + "delete-background-l": 0%, + "delete-background-alpha": 0.5, + "delete-color": #{cv.getVar("white")}, + ) + ); + + appearance: none; + background-color: hsla( + #{cv.getVar("scheme-h")}, + #{cv.getVar("scheme-s")}, + #{cv.getVar("delete-background-l")}, + #{cv.getVar("delete-background-alpha")} + ); + border: none; + border-radius: cv.getVar("radius-rounded"); + cursor: pointer; + pointer-events: auto; + display: inline-flex; + flex-grow: 0; + flex-shrink: 0; + font-size: 1em; + height: cv.getVar("delete-dimensions"); + max-height: cv.getVar("delete-dimensions"); + max-width: cv.getVar("delete-dimensions"); + min-height: cv.getVar("delete-dimensions"); + min-width: cv.getVar("delete-dimensions"); + outline: none; + position: relative; + vertical-align: top; + width: cv.getVar("delete-dimensions"); + + &::before, + &::after { + background-color: cv.getVar("delete-color"); + 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 { + @include cv.register-var("delete-background-alpha", 0.4); + } + + &:active { + @include cv.register-var("delete-background-alpha", 0.5); + } + + // Sizes + &.#{iv.$class-prefix}is-small { + @include cv.register-var("delete-dimensions", 1rem); + } + + &.#{iv.$class-prefix}is-medium { + @include cv.register-var("delete-dimensions", 1.5rem); + } + + &.#{iv.$class-prefix}is-large { + @include cv.register-var("delete-dimensions", 2rem); + } +} + +@mixin fa($size, $dimensions) { + display: inline-block; + font-size: $size; + height: $dimensions; + line-height: $dimensions; + text-align: center; + vertical-align: top; + width: $dimensions; +} + +@mixin burger($dimensions) { + align-items: center; + appearance: none; + background: none; + border: none; + border-radius: cv.getVar("burger-border-radius"); + color: hsl( + cv.getVar("burger-h"), + cv.getVar("burger-s"), + cv.getVar("burger-l") + ); + cursor: pointer; + display: inline-flex; + flex-direction: column; + flex-shrink: 0; + height: $dimensions; + justify-content: center; + position: relative; + vertical-align: top; + width: $dimensions; + + span { + background-color: currentColor; + display: block; + height: cv.getVar("burger-item-height"); + left: calc(50% - calc(#{cv.getVar("burger-item-width")}) / 2); + position: absolute; + transform-origin: center; + transition-duration: cv.getVar("duration"); + transition-property: background-color, color, opacity, transform; + transition-timing-function: cv.getVar("easing"); + width: cv.getVar("burger-item-width"); + + &:nth-child(1), + &:nth-child(2) { + top: calc(50% - calc(#{cv.getVar("burger-item-height")}) / 2); + } + + &:nth-child(3) { + bottom: calc(50% + #{cv.getVar("burger-gap")}); + } + + &:nth-child(4) { + top: calc(50% + #{cv.getVar("burger-gap")}); + } + } + + &:hover { + background-color: hsla( + cv.getVar("burger-h"), + cv.getVar("burger-s"), + cv.getVar("burger-l"), + 0.1 + ); + } + + &:active { + background-color: hsla( + cv.getVar("burger-h"), + cv.getVar("burger-s"), + cv.getVar("burger-l"), + 0.2 + ); + } + + // Modifers + &.#{iv.$class-prefix}is-active { + span { + &:nth-child(1) { + transform: rotate(-45deg); + } + + &:nth-child(2) { + transform: rotate(45deg); + } + + &:nth-child(3), + &:nth-child(4) { + opacity: 0; + } + } + } +} + +@mixin overflow-touch { + -webkit-overflow-scrolling: touch; +} + +@mixin placeholder { + $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input"; + + @each $placeholder in $placeholders { + &:#{$placeholder}-placeholder { + @content; + } + } +} + +@mixin reset { + appearance: none; + background: none; + border: none; + color: inherit; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + +@mixin selection($current-selector: false) { + @if $current-selector { + &::-moz-selection { + @content; + } + &::selection { + @content; + } + } @else { + ::-moz-selection { + @content; + } + ::selection { + @content; + } + } +} + +// Responsiveness + +@mixin from($device) { + @media screen and (min-width: $device) { + @content; + } +} + +@mixin until($device) { + @media screen and (max-width: ($device - 1px)) { + @content; + } +} + +@mixin between($from, $until) { + @media screen and (min-width: $from) and (max-width: ($until - 1px)) { + @content; + } +} + +@mixin mobile { + @media screen and (max-width: (iv.$tablet - 1px)) { + @content; + } +} + +@mixin tablet { + @media screen and (min-width: iv.$tablet), print { + @content; + } +} + +@mixin tablet-only { + @media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) { + @content; + } +} + +@mixin touch { + @media screen and (max-width: (iv.$desktop - 1px)) { + @content; + } +} + +@mixin desktop { + @media screen and (min-width: iv.$desktop) { + @content; + } +} + +@mixin desktop-only { + @if iv.$widescreen-enabled { + @media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) { + @content; + } + } +} + +@mixin until-widescreen { + @if iv.$widescreen-enabled { + @media screen and (max-width: (iv.$widescreen - 1px)) { + @content; + } + } +} + +@mixin widescreen { + @if iv.$widescreen-enabled { + @media screen and (min-width: iv.$widescreen) { + @content; + } + } +} + +@mixin widescreen-only { + @if iv.$widescreen-enabled and iv.$fullhd-enabled { + @media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) { + @content; + } + } +} + +@mixin until-fullhd { + @if iv.$fullhd-enabled { + @media screen and (max-width: (iv.$fullhd - 1px)) { + @content; + } + } +} + +@mixin fullhd { + @if iv.$fullhd-enabled { + @media screen and (min-width: iv.$fullhd) { + @content; + } + } +} + +@mixin breakpoint($name) { + $breakpoint: map-get(iv.$breakpoints, $name); + + @if $breakpoint { + $from: map-get($breakpoint, "from"); + $until: map-get($breakpoint, "until"); + + @if $from and $until { + @include between($from, $until) { + @content; + } + } @else if $from { + @include from($from) { + @content; + } + } @else if $until { + @include until($until) { + @content; + } + } + } +} + +@mixin container-from($name, $width) { + @container #{$name} (min-width: #{$width}) { + @content; + } +} + +@mixin container-until($name, $width) { + @container #{$name} (max-width: #{$width - 1px}) { + @content; + } +} + +@mixin ltr { + @if not iv.$rtl { + @content; + } +} + +@mixin rtl { + @if iv.$rtl { + @content; + } +} + +@mixin ltr-property($property, $spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if iv.$rtl { + #{$property}-#{$opposite}: $spacing; + } @else { + #{$property}-#{$normal}: $spacing; + } +} + +@mixin ltr-position($spacing, $right: true) { + $normal: if($right, "right", "left"); + $opposite: if($right, "left", "right"); + + @if iv.$rtl { + #{$opposite}: $spacing; + } @else { + #{$normal}: $spacing; + } +} + +// Placeholders + +@mixin unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +@mixin loader { + animation: spinAround 500ms infinite linear; + border: 2px solid cv.getVar("loading-color"); + border-radius: cv.getVar("radius-rounded"); + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +@mixin overlay($offset: 0) { + bottom: $offset; + left: $offset; + position: absolute; + right: $offset; + top: $offset; +} diff --git a/web/assets/css/style.css b/web/assets/css/style.css new file mode 100644 index 0000000..1720f0d --- /dev/null +++ b/web/assets/css/style.css @@ -0,0 +1,22437 @@ +@charset "UTF-8"; +/* Bulma Utilities */ +@import url("https://fonts.googleapis.com/css?family=Nunito:400,700"); +:root { + --bulma-control-radius: var(--bulma-radius); + --bulma-control-radius-small: var(--bulma-radius-small); + --bulma-control-border-width: 1px; + --bulma-control-height: 2.5em; + --bulma-control-line-height: 1.5; + --bulma-control-padding-vertical: calc(0.5em - 1px); + --bulma-control-padding-horizontal: calc(0.75em - 1px); + --bulma-control-size: var(--bulma-size-normal); + --bulma-control-focus-shadow-l: 50%; +} + +/* Bulma Themes */ +:root { + --bulma-scheme-h: 221; + --bulma-scheme-s: 14%; + --bulma-light-l: 90%; + --bulma-light-invert-l: 20%; + --bulma-dark-l: 20%; + --bulma-dark-invert-l: 90%; + --bulma-soft-l: 90%; + --bulma-bold-l: 20%; + --bulma-soft-invert-l: 20%; + --bulma-bold-invert-l: 90%; + --bulma-hover-background-l-delta: -5%; + --bulma-active-background-l-delta: -10%; + --bulma-hover-border-l-delta: -10%; + --bulma-active-border-l-delta: -20%; + --bulma-hover-color-l-delta: -5%; + --bulma-active-color-l-delta: -10%; + --bulma-hover-shadow-a-delta: -0.05; + --bulma-active-shadow-a-delta: -0.1; + --bulma-scheme-brightness: light; + --bulma-scheme-main-l: 100%; + --bulma-scheme-main-bis-l: 98%; + --bulma-scheme-main-ter-l: 96%; + --bulma-background-l: 96%; + --bulma-border-weak-l: 93%; + --bulma-border-l: 86%; + --bulma-text-weak-l: 48%; + --bulma-text-l: 29%; + --bulma-text-strong-l: 21%; + --bulma-text-title-l: 14%; + --bulma-scheme-invert-ter-l: 14%; + --bulma-scheme-invert-bis-l: 7%; + --bulma-scheme-invert-l: 4%; + --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace; + --bulma-size-small: 0.75rem; + --bulma-size-normal: 1rem; + --bulma-size-medium: 1.25rem; + --bulma-size-large: 1.5rem; + --bulma-weight-light: 300; + --bulma-weight-normal: 400; + --bulma-weight-medium: 500; + --bulma-weight-semibold: 600; + --bulma-weight-bold: 700; + --bulma-weight-extrabold: 800; + --bulma-block-spacing: 1.5rem; + --bulma-duration: 294ms; + --bulma-easing: ease-out; + --bulma-radius-small: 0.25rem; + --bulma-radius: 0.375rem; + --bulma-radius-medium: 0.5em; + --bulma-radius-large: 0.75rem; + --bulma-radius-rounded: 9999px; + --bulma-speed: 86ms; + --bulma-loading-color: var(--bulma-border); + --bulma-burger-h: var(--bulma-link-h); + --bulma-burger-s: var(--bulma-link-s); + --bulma-burger-l: var(--bulma-link-l); + --bulma-burger-border-radius: 0.5em; + --bulma-burger-gap: 5px; + --bulma-burger-item-height: 2px; + --bulma-burger-item-width: 20px; + --bulma-white: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-base: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-rgb: 255, 255, 255; + --bulma-white-h: 221deg; + --bulma-white-s: 14%; + --bulma-white-l: 100%; + --bulma-white-invert-l: 4%; + --bulma-white-invert: hsl(221, 14%, 4%); + --bulma-white-on-scheme-l: 35%; + --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1); + --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-rgb: 9, 10, 12; + --bulma-black-h: 221deg; + --bulma-black-s: 14%; + --bulma-black-l: 4%; + --bulma-black-invert-l: 100%; + --bulma-black-invert: hsl(221, 14%, 100%); + --bulma-black-on-scheme-l: 4%; + --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1); + --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-rgb: 243, 244, 246; + --bulma-light-h: 221deg; + --bulma-light-s: 14%; + --bulma-light-l: 96%; + --bulma-light-invert-l: 21%; + --bulma-light-invert: hsl(221, 14%, 21%); + --bulma-light-on-scheme-l: 36%; + --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1); + --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-rgb: 46, 51, 61; + --bulma-dark-h: 221deg; + --bulma-dark-s: 14%; + --bulma-dark-l: 21%; + --bulma-dark-invert-l: 96%; + --bulma-dark-invert: hsl(221, 14%, 96%); + --bulma-dark-on-scheme-l: 21%; + --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1); + --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-rgb: 64, 70, 84; + --bulma-text-h: 221deg; + --bulma-text-s: 14%; + --bulma-text-l: 29%; + --bulma-text-00-l: 0%; + --bulma-text-05-l: 4%; + --bulma-text-10-l: 9%; + --bulma-text-15-l: 14%; + --bulma-text-20-l: 19%; + --bulma-text-25-l: 24%; + --bulma-text-30-l: 29%; + --bulma-text-35-l: 34%; + --bulma-text-40-l: 39%; + --bulma-text-45-l: 44%; + --bulma-text-50-l: 49%; + --bulma-text-55-l: 54%; + --bulma-text-60-l: 59%; + --bulma-text-65-l: 64%; + --bulma-text-70-l: 69%; + --bulma-text-75-l: 74%; + --bulma-text-80-l: 79%; + --bulma-text-85-l: 84%; + --bulma-text-90-l: 89%; + --bulma-text-95-l: 94%; + --bulma-text-100-l: 100%; + --bulma-text-00: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-l), 1); + --bulma-text-00-invert-l: var(--bulma-text-60-l); + --bulma-text-00-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-invert-l), 1); + --bulma-text-05: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-l), 1); + --bulma-text-05-invert-l: var(--bulma-text-60-l); + --bulma-text-05-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-invert-l), 1); + --bulma-text-10: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-l), 1); + --bulma-text-10-invert-l: var(--bulma-text-70-l); + --bulma-text-10-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-invert-l), 1); + --bulma-text-15: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-l), 1); + --bulma-text-15-invert-l: var(--bulma-text-75-l); + --bulma-text-15-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-invert-l), 1); + --bulma-text-20: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-l), 1); + --bulma-text-20-invert-l: var(--bulma-text-85-l); + --bulma-text-20-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-invert-l), 1); + --bulma-text-25: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-l), 1); + --bulma-text-25-invert-l: var(--bulma-text-95-l); + --bulma-text-25-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-invert-l), 1); + --bulma-text-30: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-l), 1); + --bulma-text-30-invert-l: var(--bulma-text-100-l); + --bulma-text-30-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-invert-l), 1); + --bulma-text-35: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-l), 1); + --bulma-text-35-invert-l: var(--bulma-text-100-l); + --bulma-text-35-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-invert-l), 1); + --bulma-text-40: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-l), 1); + --bulma-text-40-invert-l: var(--bulma-text-100-l); + --bulma-text-40-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-invert-l), 1); + --bulma-text-45: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-l), 1); + --bulma-text-45-invert-l: var(--bulma-text-100-l); + --bulma-text-45-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-invert-l), 1); + --bulma-text-50: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-l), 1); + --bulma-text-50-invert-l: var(--bulma-text-100-l); + --bulma-text-50-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-invert-l), 1); + --bulma-text-55: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-l), 1); + --bulma-text-55-invert-l: var(--bulma-text-100-l); + --bulma-text-55-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-invert-l), 1); + --bulma-text-60: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-l), 1); + --bulma-text-60-invert-l: var(--bulma-text-05-l); + --bulma-text-60-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-invert-l), 1); + --bulma-text-65: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-l), 1); + --bulma-text-65-invert-l: var(--bulma-text-05-l); + --bulma-text-65-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-invert-l), 1); + --bulma-text-70: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-l), 1); + --bulma-text-70-invert-l: var(--bulma-text-10-l); + --bulma-text-70-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-invert-l), 1); + --bulma-text-75: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-l), 1); + --bulma-text-75-invert-l: var(--bulma-text-15-l); + --bulma-text-75-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-invert-l), 1); + --bulma-text-80: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-l), 1); + --bulma-text-80-invert-l: var(--bulma-text-15-l); + --bulma-text-80-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-invert-l), 1); + --bulma-text-85: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-l), 1); + --bulma-text-85-invert-l: var(--bulma-text-20-l); + --bulma-text-85-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-invert-l), 1); + --bulma-text-90: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-l), 1); + --bulma-text-90-invert-l: var(--bulma-text-20-l); + --bulma-text-90-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-invert-l), 1); + --bulma-text-95: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-l), 1); + --bulma-text-95-invert-l: var(--bulma-text-25-l); + --bulma-text-95-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-invert-l), 1); + --bulma-text-100: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-l), 1); + --bulma-text-100-invert-l: var(--bulma-text-30-l); + --bulma-text-100-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-invert-l), 1); + --bulma-text-invert-l: var(--bulma-text-100-l); + --bulma-text-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-invert-l), 1); + --bulma-text-light-l: var(--bulma-text-90-l); + --bulma-text-light: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-l), 1); + --bulma-text-light-invert-l: var(--bulma-text-20-l); + --bulma-text-light-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-invert-l), 1); + --bulma-text-dark-l: var(--bulma-text-10-l); + --bulma-text-dark: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-l), 1); + --bulma-text-dark-invert-l: var(--bulma-text-70-l); + --bulma-text-dark-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-invert-l), 1); + --bulma-text-soft: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-l), 1); + --bulma-text-bold: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-l), 1); + --bulma-text-soft-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-invert-l), 1); + --bulma-text-bold-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-invert-l), 1); + --bulma-text-on-scheme-l: 29%; + --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1); + --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-rgb: 171, 199, 255; + --bulma-primary-h: 220deg; + --bulma-primary-s: 100%; + --bulma-primary-l: 84%; + --bulma-primary-00-l: 0%; + --bulma-primary-05-l: 4%; + --bulma-primary-10-l: 9%; + --bulma-primary-15-l: 14%; + --bulma-primary-20-l: 19%; + --bulma-primary-25-l: 24%; + --bulma-primary-30-l: 29%; + --bulma-primary-35-l: 34%; + --bulma-primary-40-l: 39%; + --bulma-primary-45-l: 44%; + --bulma-primary-50-l: 49%; + --bulma-primary-55-l: 54%; + --bulma-primary-60-l: 59%; + --bulma-primary-65-l: 64%; + --bulma-primary-70-l: 69%; + --bulma-primary-75-l: 74%; + --bulma-primary-80-l: 79%; + --bulma-primary-85-l: 84%; + --bulma-primary-90-l: 89%; + --bulma-primary-95-l: 94%; + --bulma-primary-100-l: 100%; + --bulma-primary-00: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-l), 1); + --bulma-primary-00-invert-l: var(--bulma-primary-65-l); + --bulma-primary-00-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-invert-l), 1); + --bulma-primary-05: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-l), 1); + --bulma-primary-05-invert-l: var(--bulma-primary-70-l); + --bulma-primary-05-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-invert-l), 1); + --bulma-primary-10: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-l), 1); + --bulma-primary-10-invert-l: var(--bulma-primary-75-l); + --bulma-primary-10-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-invert-l), 1); + --bulma-primary-15: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-l), 1); + --bulma-primary-15-invert-l: var(--bulma-primary-80-l); + --bulma-primary-15-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-invert-l), 1); + --bulma-primary-20: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-l), 1); + --bulma-primary-20-invert-l: var(--bulma-primary-80-l); + --bulma-primary-20-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-invert-l), 1); + --bulma-primary-25: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-l), 1); + --bulma-primary-25-invert-l: var(--bulma-primary-90-l); + --bulma-primary-25-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-invert-l), 1); + --bulma-primary-30: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-l), 1); + --bulma-primary-30-invert-l: var(--bulma-primary-95-l); + --bulma-primary-30-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-invert-l), 1); + --bulma-primary-35: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-l), 1); + --bulma-primary-35-invert-l: var(--bulma-primary-100-l); + --bulma-primary-35-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-invert-l), 1); + --bulma-primary-40: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-l), 1); + --bulma-primary-40-invert-l: var(--bulma-primary-100-l); + --bulma-primary-40-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-invert-l), 1); + --bulma-primary-45: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-l), 1); + --bulma-primary-45-invert-l: var(--bulma-primary-100-l); + --bulma-primary-45-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-invert-l), 1); + --bulma-primary-50: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-l), 1); + --bulma-primary-50-invert-l: var(--bulma-primary-100-l); + --bulma-primary-50-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-invert-l), 1); + --bulma-primary-55: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-l), 1); + --bulma-primary-55-invert-l: var(--bulma-primary-100-l); + --bulma-primary-55-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-invert-l), 1); + --bulma-primary-60: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-l), 1); + --bulma-primary-60-invert-l: var(--bulma-primary-100-l); + --bulma-primary-60-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-invert-l), 1); + --bulma-primary-65: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-l), 1); + --bulma-primary-65-invert-l: var(--bulma-primary-00-l); + --bulma-primary-65-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-invert-l), 1); + --bulma-primary-70: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-l), 1); + --bulma-primary-70-invert-l: var(--bulma-primary-05-l); + --bulma-primary-70-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-invert-l), 1); + --bulma-primary-75: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1); + --bulma-primary-75-invert-l: var(--bulma-primary-10-l); + --bulma-primary-75-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-invert-l), 1); + --bulma-primary-80: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-l), 1); + --bulma-primary-80-invert-l: var(--bulma-primary-20-l); + --bulma-primary-80-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-invert-l), 1); + --bulma-primary-85: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-l), 1); + --bulma-primary-85-invert-l: var(--bulma-primary-20-l); + --bulma-primary-85-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-invert-l), 1); + --bulma-primary-90: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-l), 1); + --bulma-primary-90-invert-l: var(--bulma-primary-25-l); + --bulma-primary-90-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-invert-l), 1); + --bulma-primary-95: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-l), 1); + --bulma-primary-95-invert-l: var(--bulma-primary-30-l); + --bulma-primary-95-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-invert-l), 1); + --bulma-primary-100: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-l), 1); + --bulma-primary-100-invert-l: var(--bulma-primary-35-l); + --bulma-primary-100-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-invert-l), 1); + --bulma-primary-invert-l: var(--bulma-primary-20-l); + --bulma-primary-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-invert-l), 1); + --bulma-primary-light-l: var(--bulma-primary-90-l); + --bulma-primary-light: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-l), 1); + --bulma-primary-light-invert-l: var(--bulma-primary-25-l); + --bulma-primary-light-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-invert-l), 1); + --bulma-primary-dark-l: var(--bulma-primary-10-l); + --bulma-primary-dark: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-l), 1); + --bulma-primary-dark-invert-l: var(--bulma-primary-75-l); + --bulma-primary-dark-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-invert-l), 1); + --bulma-primary-soft: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-l), 1); + --bulma-primary-bold: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-l), 1); + --bulma-primary-soft-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-invert-l), 1); + --bulma-primary-bold-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-invert-l), 1); + --bulma-primary-on-scheme-l: 43.5294117647%; + --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1); + --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-rgb: 237, 177, 255; + --bulma-link-h: 286deg; + --bulma-link-s: 100%; + --bulma-link-l: 85%; + --bulma-link-00-l: 0%; + --bulma-link-05-l: 5%; + --bulma-link-10-l: 10%; + --bulma-link-15-l: 15%; + --bulma-link-20-l: 20%; + --bulma-link-25-l: 25%; + --bulma-link-30-l: 30%; + --bulma-link-35-l: 35%; + --bulma-link-40-l: 40%; + --bulma-link-45-l: 45%; + --bulma-link-50-l: 50%; + --bulma-link-55-l: 55%; + --bulma-link-60-l: 60%; + --bulma-link-65-l: 65%; + --bulma-link-70-l: 70%; + --bulma-link-75-l: 75%; + --bulma-link-80-l: 80%; + --bulma-link-85-l: 85%; + --bulma-link-90-l: 90%; + --bulma-link-95-l: 95%; + --bulma-link-100-l: 100%; + --bulma-link-00: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-l), 1); + --bulma-link-00-invert-l: var(--bulma-link-65-l); + --bulma-link-00-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-invert-l), 1); + --bulma-link-05: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-l), 1); + --bulma-link-05-invert-l: var(--bulma-link-70-l); + --bulma-link-05-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-invert-l), 1); + --bulma-link-10: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-l), 1); + --bulma-link-10-invert-l: var(--bulma-link-75-l); + --bulma-link-10-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-invert-l), 1); + --bulma-link-15: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-l), 1); + --bulma-link-15-invert-l: var(--bulma-link-80-l); + --bulma-link-15-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-invert-l), 1); + --bulma-link-20: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-l), 1); + --bulma-link-20-invert-l: var(--bulma-link-85-l); + --bulma-link-20-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-invert-l), 1); + --bulma-link-25: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-l), 1); + --bulma-link-25-invert-l: var(--bulma-link-90-l); + --bulma-link-25-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-invert-l), 1); + --bulma-link-30: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-l), 1); + --bulma-link-30-invert-l: var(--bulma-link-95-l); + --bulma-link-30-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-invert-l), 1); + --bulma-link-35: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-l), 1); + --bulma-link-35-invert-l: var(--bulma-link-100-l); + --bulma-link-35-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-invert-l), 1); + --bulma-link-40: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-l), 1); + --bulma-link-40-invert-l: var(--bulma-link-100-l); + --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1); + --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1); + --bulma-link-45-invert-l: var(--bulma-link-100-l); + --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1); + --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1); + --bulma-link-50-invert-l: var(--bulma-link-100-l); + --bulma-link-50-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-invert-l), 1); + --bulma-link-55: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-l), 1); + --bulma-link-55-invert-l: var(--bulma-link-100-l); + --bulma-link-55-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-invert-l), 1); + --bulma-link-60: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-l), 1); + --bulma-link-60-invert-l: var(--bulma-link-100-l); + --bulma-link-60-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-invert-l), 1); + --bulma-link-65: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-l), 1); + --bulma-link-65-invert-l: var(--bulma-link-00-l); + --bulma-link-65-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-invert-l), 1); + --bulma-link-70: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-l), 1); + --bulma-link-70-invert-l: var(--bulma-link-05-l); + --bulma-link-70-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-invert-l), 1); + --bulma-link-75: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-l), 1); + --bulma-link-75-invert-l: var(--bulma-link-10-l); + --bulma-link-75-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-invert-l), 1); + --bulma-link-80: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-l), 1); + --bulma-link-80-invert-l: var(--bulma-link-15-l); + --bulma-link-80-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-invert-l), 1); + --bulma-link-85: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-l), 1); + --bulma-link-85-invert-l: var(--bulma-link-20-l); + --bulma-link-85-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-invert-l), 1); + --bulma-link-90: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-l), 1); + --bulma-link-90-invert-l: var(--bulma-link-25-l); + --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1); + --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1); + --bulma-link-95-invert-l: var(--bulma-link-30-l); + --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1); + --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1); + --bulma-link-100-invert-l: var(--bulma-link-30-l); + --bulma-link-100-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-invert-l), 1); + --bulma-link-invert-l: var(--bulma-link-20-l); + --bulma-link-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-invert-l), 1); + --bulma-link-light-l: var(--bulma-link-90-l); + --bulma-link-light: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-l), 1); + --bulma-link-light-invert-l: var(--bulma-link-25-l); + --bulma-link-light-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-invert-l), 1); + --bulma-link-dark-l: var(--bulma-link-10-l); + --bulma-link-dark: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-l), 1); + --bulma-link-dark-invert-l: var(--bulma-link-75-l); + --bulma-link-dark-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-invert-l), 1); + --bulma-link-soft: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-l), 1); + --bulma-link-bold: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-l), 1); + --bulma-link-soft-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-invert-l), 1); + --bulma-link-bold-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-invert-l), 1); + --bulma-link-on-scheme-l: 39.7058823529%; + --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1); + --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-rgb: 103, 21, 239; + --bulma-info-h: 263deg; + --bulma-info-s: 87%; + --bulma-info-l: 51%; + --bulma-info-00-l: 1%; + --bulma-info-05-l: 6%; + --bulma-info-10-l: 11%; + --bulma-info-15-l: 16%; + --bulma-info-20-l: 21%; + --bulma-info-25-l: 26%; + --bulma-info-30-l: 31%; + --bulma-info-35-l: 36%; + --bulma-info-40-l: 41%; + --bulma-info-45-l: 46%; + --bulma-info-50-l: 51%; + --bulma-info-55-l: 56%; + --bulma-info-60-l: 61%; + --bulma-info-65-l: 66%; + --bulma-info-70-l: 71%; + --bulma-info-75-l: 76%; + --bulma-info-80-l: 81%; + --bulma-info-85-l: 86%; + --bulma-info-90-l: 91%; + --bulma-info-95-l: 96%; + --bulma-info-100-l: 100%; + --bulma-info-00: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-l), 1); + --bulma-info-00-invert-l: var(--bulma-info-70-l); + --bulma-info-00-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-invert-l), 1); + --bulma-info-05: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-l), 1); + --bulma-info-05-invert-l: var(--bulma-info-70-l); + --bulma-info-05-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-invert-l), 1); + --bulma-info-10: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-l), 1); + --bulma-info-10-invert-l: var(--bulma-info-75-l); + --bulma-info-10-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-invert-l), 1); + --bulma-info-15: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-l), 1); + --bulma-info-15-invert-l: var(--bulma-info-75-l); + --bulma-info-15-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-invert-l), 1); + --bulma-info-20: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-l), 1); + --bulma-info-20-invert-l: var(--bulma-info-80-l); + --bulma-info-20-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-invert-l), 1); + --bulma-info-25: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-l), 1); + --bulma-info-25-invert-l: var(--bulma-info-85-l); + --bulma-info-25-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-invert-l), 1); + --bulma-info-30: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-l), 1); + --bulma-info-30-invert-l: var(--bulma-info-85-l); + --bulma-info-30-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-invert-l), 1); + --bulma-info-35: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-l), 1); + --bulma-info-35-invert-l: var(--bulma-info-90-l); + --bulma-info-35-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-invert-l), 1); + --bulma-info-40: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-l), 1); + --bulma-info-40-invert-l: var(--bulma-info-95-l); + --bulma-info-40-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-invert-l), 1); + --bulma-info-45: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-l), 1); + --bulma-info-45-invert-l: var(--bulma-info-100-l); + --bulma-info-45-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-invert-l), 1); + --bulma-info-50: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-l), 1); + --bulma-info-50-invert-l: var(--bulma-info-100-l); + --bulma-info-50-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-invert-l), 1); + --bulma-info-55: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-l), 1); + --bulma-info-55-invert-l: var(--bulma-info-100-l); + --bulma-info-55-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-invert-l), 1); + --bulma-info-60: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-l), 1); + --bulma-info-60-invert-l: var(--bulma-info-100-l); + --bulma-info-60-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-invert-l), 1); + --bulma-info-65: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-l), 1); + --bulma-info-65-invert-l: var(--bulma-info-100-l); + --bulma-info-65-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-invert-l), 1); + --bulma-info-70: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-l), 1); + --bulma-info-70-invert-l: var(--bulma-info-05-l); + --bulma-info-70-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-invert-l), 1); + --bulma-info-75: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-l), 1); + --bulma-info-75-invert-l: var(--bulma-info-15-l); + --bulma-info-75-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-invert-l), 1); + --bulma-info-80: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-l), 1); + --bulma-info-80-invert-l: var(--bulma-info-20-l); + --bulma-info-80-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-invert-l), 1); + --bulma-info-85: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-l), 1); + --bulma-info-85-invert-l: var(--bulma-info-30-l); + --bulma-info-85-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-invert-l), 1); + --bulma-info-90: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-l), 1); + --bulma-info-90-invert-l: var(--bulma-info-35-l); + --bulma-info-90-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-invert-l), 1); + --bulma-info-95: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-l), 1); + --bulma-info-95-invert-l: var(--bulma-info-40-l); + --bulma-info-95-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-invert-l), 1); + --bulma-info-100: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-l), 1); + --bulma-info-100-invert-l: var(--bulma-info-45-l); + --bulma-info-100-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-invert-l), 1); + --bulma-info-invert-l: var(--bulma-info-100-l); + --bulma-info-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-invert-l), 1); + --bulma-info-light-l: var(--bulma-info-90-l); + --bulma-info-light: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-l), 1); + --bulma-info-light-invert-l: var(--bulma-info-35-l); + --bulma-info-light-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-invert-l), 1); + --bulma-info-dark-l: var(--bulma-info-10-l); + --bulma-info-dark: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-l), 1); + --bulma-info-dark-invert-l: var(--bulma-info-75-l); + --bulma-info-dark-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-invert-l), 1); + --bulma-info-soft: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-l), 1); + --bulma-info-bold: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-l), 1); + --bulma-info-soft-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-invert-l), 1); + --bulma-info-bold-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-invert-l), 1); + --bulma-info-on-scheme-l: 50.9803921569%; + --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1); + --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-rgb: 72, 199, 142; + --bulma-success-h: 153deg; + --bulma-success-s: 53%; + --bulma-success-l: 53%; + --bulma-success-00-l: 0%; + --bulma-success-05-l: 3%; + --bulma-success-10-l: 8%; + --bulma-success-15-l: 13%; + --bulma-success-20-l: 18%; + --bulma-success-25-l: 23%; + --bulma-success-30-l: 28%; + --bulma-success-35-l: 33%; + --bulma-success-40-l: 38%; + --bulma-success-45-l: 43%; + --bulma-success-50-l: 48%; + --bulma-success-55-l: 53%; + --bulma-success-60-l: 58%; + --bulma-success-65-l: 63%; + --bulma-success-70-l: 68%; + --bulma-success-75-l: 73%; + --bulma-success-80-l: 78%; + --bulma-success-85-l: 83%; + --bulma-success-90-l: 88%; + --bulma-success-95-l: 93%; + --bulma-success-100-l: 100%; + --bulma-success-00: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-l), 1); + --bulma-success-00-invert-l: var(--bulma-success-45-l); + --bulma-success-00-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-invert-l), 1); + --bulma-success-05: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-l), 1); + --bulma-success-05-invert-l: var(--bulma-success-45-l); + --bulma-success-05-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-invert-l), 1); + --bulma-success-10: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-l), 1); + --bulma-success-10-invert-l: var(--bulma-success-55-l); + --bulma-success-10-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-invert-l), 1); + --bulma-success-15: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-l), 1); + --bulma-success-15-invert-l: var(--bulma-success-75-l); + --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1); + --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1); + --bulma-success-20-invert-l: var(--bulma-success-90-l); + --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1); + --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1); + --bulma-success-25-invert-l: var(--bulma-success-100-l); + --bulma-success-25-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-invert-l), 1); + --bulma-success-30: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-l), 1); + --bulma-success-30-invert-l: var(--bulma-success-100-l); + --bulma-success-30-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-invert-l), 1); + --bulma-success-35: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-l), 1); + --bulma-success-35-invert-l: var(--bulma-success-100-l); + --bulma-success-35-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-invert-l), 1); + --bulma-success-40: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-l), 1); + --bulma-success-40-invert-l: var(--bulma-success-100-l); + --bulma-success-40-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-invert-l), 1); + --bulma-success-45: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-l), 1); + --bulma-success-45-invert-l: var(--bulma-success-05-l); + --bulma-success-45-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-invert-l), 1); + --bulma-success-50: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-l), 1); + --bulma-success-50-invert-l: var(--bulma-success-05-l); + --bulma-success-50-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-invert-l), 1); + --bulma-success-55: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-l), 1); + --bulma-success-55-invert-l: var(--bulma-success-10-l); + --bulma-success-55-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-invert-l), 1); + --bulma-success-60: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-l), 1); + --bulma-success-60-invert-l: var(--bulma-success-10-l); + --bulma-success-60-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-invert-l), 1); + --bulma-success-65: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-l), 1); + --bulma-success-65-invert-l: var(--bulma-success-10-l); + --bulma-success-65-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-invert-l), 1); + --bulma-success-70: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-l), 1); + --bulma-success-70-invert-l: var(--bulma-success-10-l); + --bulma-success-70-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-invert-l), 1); + --bulma-success-75: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-l), 1); + --bulma-success-75-invert-l: var(--bulma-success-15-l); + --bulma-success-75-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-invert-l), 1); + --bulma-success-80: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-l), 1); + --bulma-success-80-invert-l: var(--bulma-success-15-l); + --bulma-success-80-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-invert-l), 1); + --bulma-success-85: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-l), 1); + --bulma-success-85-invert-l: var(--bulma-success-15-l); + --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1); + --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1); + --bulma-success-90-invert-l: var(--bulma-success-20-l); + --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1); + --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1); + --bulma-success-95-invert-l: var(--bulma-success-20-l); + --bulma-success-95-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-invert-l), 1); + --bulma-success-100: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-l), 1); + --bulma-success-100-invert-l: var(--bulma-success-20-l); + --bulma-success-100-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-invert-l), 1); + --bulma-success-invert-l: var(--bulma-success-10-l); + --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1); + --bulma-success-light-l: var(--bulma-success-90-l); + --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1); + --bulma-success-light-invert-l: var(--bulma-success-20-l); + --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1); + --bulma-success-dark-l: var(--bulma-success-10-l); + --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1); + --bulma-success-dark-invert-l: var(--bulma-success-55-l); + --bulma-success-dark-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-invert-l), 1); + --bulma-success-soft: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-l), 1); + --bulma-success-bold: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-l), 1); + --bulma-success-soft-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-invert-l), 1); + --bulma-success-bold-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-invert-l), 1); + --bulma-success-on-scheme-l: 23%; + --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1); + --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-rgb: 255, 183, 15; + --bulma-warning-h: 42deg; + --bulma-warning-s: 100%; + --bulma-warning-l: 53%; + --bulma-warning-00-l: 0%; + --bulma-warning-05-l: 3%; + --bulma-warning-10-l: 8%; + --bulma-warning-15-l: 13%; + --bulma-warning-20-l: 18%; + --bulma-warning-25-l: 23%; + --bulma-warning-30-l: 28%; + --bulma-warning-35-l: 33%; + --bulma-warning-40-l: 38%; + --bulma-warning-45-l: 43%; + --bulma-warning-50-l: 48%; + --bulma-warning-55-l: 53%; + --bulma-warning-60-l: 58%; + --bulma-warning-65-l: 63%; + --bulma-warning-70-l: 68%; + --bulma-warning-75-l: 73%; + --bulma-warning-80-l: 78%; + --bulma-warning-85-l: 83%; + --bulma-warning-90-l: 88%; + --bulma-warning-95-l: 93%; + --bulma-warning-100-l: 100%; + --bulma-warning-00: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-l), 1); + --bulma-warning-00-invert-l: var(--bulma-warning-40-l); + --bulma-warning-00-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-invert-l), 1); + --bulma-warning-05: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-l), 1); + --bulma-warning-05-invert-l: var(--bulma-warning-45-l); + --bulma-warning-05-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-invert-l), 1); + --bulma-warning-10: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-l), 1); + --bulma-warning-10-invert-l: var(--bulma-warning-50-l); + --bulma-warning-10-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-invert-l), 1); + --bulma-warning-15: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-l), 1); + --bulma-warning-15-invert-l: var(--bulma-warning-70-l); + --bulma-warning-15-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-invert-l), 1); + --bulma-warning-20: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-l), 1); + --bulma-warning-20-invert-l: var(--bulma-warning-100-l); + --bulma-warning-20-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-invert-l), 1); + --bulma-warning-25: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-l), 1); + --bulma-warning-25-invert-l: var(--bulma-warning-100-l); + --bulma-warning-25-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-invert-l), 1); + --bulma-warning-30: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-l), 1); + --bulma-warning-30-invert-l: var(--bulma-warning-100-l); + --bulma-warning-30-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-invert-l), 1); + --bulma-warning-35: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-l), 1); + --bulma-warning-35-invert-l: var(--bulma-warning-100-l); + --bulma-warning-35-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-invert-l), 1); + --bulma-warning-40: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-l), 1); + --bulma-warning-40-invert-l: var(--bulma-warning-00-l); + --bulma-warning-40-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-invert-l), 1); + --bulma-warning-45: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-l), 1); + --bulma-warning-45-invert-l: var(--bulma-warning-05-l); + --bulma-warning-45-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-invert-l), 1); + --bulma-warning-50: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-l), 1); + --bulma-warning-50-invert-l: var(--bulma-warning-10-l); + --bulma-warning-50-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-invert-l), 1); + --bulma-warning-55: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-l), 1); + --bulma-warning-55-invert-l: var(--bulma-warning-10-l); + --bulma-warning-55-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-invert-l), 1); + --bulma-warning-60: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-l), 1); + --bulma-warning-60-invert-l: var(--bulma-warning-10-l); + --bulma-warning-60-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-invert-l), 1); + --bulma-warning-65: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-l), 1); + --bulma-warning-65-invert-l: var(--bulma-warning-10-l); + --bulma-warning-65-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-invert-l), 1); + --bulma-warning-70: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-l), 1); + --bulma-warning-70-invert-l: var(--bulma-warning-15-l); + --bulma-warning-70-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-invert-l), 1); + --bulma-warning-75: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-l), 1); + --bulma-warning-75-invert-l: var(--bulma-warning-15-l); + --bulma-warning-75-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-invert-l), 1); + --bulma-warning-80: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-l), 1); + --bulma-warning-80-invert-l: var(--bulma-warning-15-l); + --bulma-warning-80-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-invert-l), 1); + --bulma-warning-85: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-l), 1); + --bulma-warning-85-invert-l: var(--bulma-warning-15-l); + --bulma-warning-85-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-invert-l), 1); + --bulma-warning-90: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-l), 1); + --bulma-warning-90-invert-l: var(--bulma-warning-15-l); + --bulma-warning-90-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-invert-l), 1); + --bulma-warning-95: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-l), 1); + --bulma-warning-95-invert-l: var(--bulma-warning-15-l); + --bulma-warning-95-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-invert-l), 1); + --bulma-warning-100: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-l), 1); + --bulma-warning-100-invert-l: var(--bulma-warning-20-l); + --bulma-warning-100-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-invert-l), 1); + --bulma-warning-invert-l: var(--bulma-warning-10-l); + --bulma-warning-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-invert-l), 1); + --bulma-warning-light-l: var(--bulma-warning-90-l); + --bulma-warning-light: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-l), 1); + --bulma-warning-light-invert-l: var(--bulma-warning-15-l); + --bulma-warning-light-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-invert-l), 1); + --bulma-warning-dark-l: var(--bulma-warning-10-l); + --bulma-warning-dark: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-l), 1); + --bulma-warning-dark-invert-l: var(--bulma-warning-50-l); + --bulma-warning-dark-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-invert-l), 1); + --bulma-warning-soft: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-l), 1); + --bulma-warning-bold: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-l), 1); + --bulma-warning-soft-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-invert-l), 1); + --bulma-warning-bold-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-invert-l), 1); + --bulma-warning-on-scheme-l: 23%; + --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1); + --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-rgb: 255, 102, 133; + --bulma-danger-h: 348deg; + --bulma-danger-s: 100%; + --bulma-danger-l: 70%; + --bulma-danger-00-l: 0%; + --bulma-danger-05-l: 5%; + --bulma-danger-10-l: 10%; + --bulma-danger-15-l: 15%; + --bulma-danger-20-l: 20%; + --bulma-danger-25-l: 25%; + --bulma-danger-30-l: 30%; + --bulma-danger-35-l: 35%; + --bulma-danger-40-l: 40%; + --bulma-danger-45-l: 45%; + --bulma-danger-50-l: 50%; + --bulma-danger-55-l: 55%; + --bulma-danger-60-l: 60%; + --bulma-danger-65-l: 65%; + --bulma-danger-70-l: 70%; + --bulma-danger-75-l: 75%; + --bulma-danger-80-l: 80%; + --bulma-danger-85-l: 85%; + --bulma-danger-90-l: 90%; + --bulma-danger-95-l: 95%; + --bulma-danger-100-l: 100%; + --bulma-danger-00: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-l), 1); + --bulma-danger-00-invert-l: var(--bulma-danger-65-l); + --bulma-danger-00-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-invert-l), 1); + --bulma-danger-05: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-l), 1); + --bulma-danger-05-invert-l: var(--bulma-danger-70-l); + --bulma-danger-05-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-invert-l), 1); + --bulma-danger-10: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-l), 1); + --bulma-danger-10-invert-l: var(--bulma-danger-75-l); + --bulma-danger-10-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-invert-l), 1); + --bulma-danger-15: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-l), 1); + --bulma-danger-15-invert-l: var(--bulma-danger-80-l); + --bulma-danger-15-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-invert-l), 1); + --bulma-danger-20: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-l), 1); + --bulma-danger-20-invert-l: var(--bulma-danger-85-l); + --bulma-danger-20-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-invert-l), 1); + --bulma-danger-25: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-l), 1); + --bulma-danger-25-invert-l: var(--bulma-danger-90-l); + --bulma-danger-25-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-invert-l), 1); + --bulma-danger-30: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-l), 1); + --bulma-danger-30-invert-l: var(--bulma-danger-100-l); + --bulma-danger-30-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-invert-l), 1); + --bulma-danger-35: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-l), 1); + --bulma-danger-35-invert-l: var(--bulma-danger-100-l); + --bulma-danger-35-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-invert-l), 1); + --bulma-danger-40: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-l), 1); + --bulma-danger-40-invert-l: var(--bulma-danger-100-l); + --bulma-danger-40-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-invert-l), 1); + --bulma-danger-45: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-l), 1); + --bulma-danger-45-invert-l: var(--bulma-danger-100-l); + --bulma-danger-45-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-invert-l), 1); + --bulma-danger-50: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-l), 1); + --bulma-danger-50-invert-l: var(--bulma-danger-100-l); + --bulma-danger-50-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-invert-l), 1); + --bulma-danger-55: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-l), 1); + --bulma-danger-55-invert-l: var(--bulma-danger-100-l); + --bulma-danger-55-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-invert-l), 1); + --bulma-danger-60: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-l), 1); + --bulma-danger-60-invert-l: var(--bulma-danger-100-l); + --bulma-danger-60-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-invert-l), 1); + --bulma-danger-65: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-l), 1); + --bulma-danger-65-invert-l: var(--bulma-danger-00-l); + --bulma-danger-65-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-invert-l), 1); + --bulma-danger-70: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-l), 1); + --bulma-danger-70-invert-l: var(--bulma-danger-05-l); + --bulma-danger-70-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-invert-l), 1); + --bulma-danger-75: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-l), 1); + --bulma-danger-75-invert-l: var(--bulma-danger-10-l); + --bulma-danger-75-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-invert-l), 1); + --bulma-danger-80: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-l), 1); + --bulma-danger-80-invert-l: var(--bulma-danger-15-l); + --bulma-danger-80-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-invert-l), 1); + --bulma-danger-85: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-l), 1); + --bulma-danger-85-invert-l: var(--bulma-danger-20-l); + --bulma-danger-85-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-invert-l), 1); + --bulma-danger-90: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-l), 1); + --bulma-danger-90-invert-l: var(--bulma-danger-25-l); + --bulma-danger-90-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-invert-l), 1); + --bulma-danger-95: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-l), 1); + --bulma-danger-95-invert-l: var(--bulma-danger-25-l); + --bulma-danger-95-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-invert-l), 1); + --bulma-danger-100: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-l), 1); + --bulma-danger-100-invert-l: var(--bulma-danger-30-l); + --bulma-danger-100-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-invert-l), 1); + --bulma-danger-invert-l: var(--bulma-danger-05-l); + --bulma-danger-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-invert-l), 1); + --bulma-danger-light-l: var(--bulma-danger-90-l); + --bulma-danger-light: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-l), 1); + --bulma-danger-light-invert-l: var(--bulma-danger-25-l); + --bulma-danger-light-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-invert-l), 1); + --bulma-danger-dark-l: var(--bulma-danger-10-l); + --bulma-danger-dark: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-l), 1); + --bulma-danger-dark-invert-l: var(--bulma-danger-75-l); + --bulma-danger-dark-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-invert-l), 1); + --bulma-danger-soft: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-l), 1); + --bulma-danger-bold: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-l), 1); + --bulma-danger-soft-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-invert-l), 1); + --bulma-danger-bold-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-invert-l), 1); + --bulma-danger-on-scheme-l: 40%; + --bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1); + --bulma-black-bis: hsl(221, 14%, 9%); + --bulma-black-ter: hsl(221, 14%, 14%); + --bulma-grey-darker: hsl(221, 14%, 21%); + --bulma-grey-dark: hsl(221, 14%, 29%); + --bulma-grey: hsl(221, 14%, 48%); + --bulma-grey-light: hsl(221, 14%, 71%); + --bulma-grey-lighter: hsl(221, 14%, 86%); + --bulma-white-ter: hsl(221, 14%, 96%); + --bulma-white-bis: hsl(221, 14%, 98%); + --bulma-shadow-h: 221deg; + --bulma-shadow-s: 14%; + --bulma-shadow-l: 4%; + --bulma-size-1: 3rem; + --bulma-size-2: 2.5rem; + --bulma-size-3: 2rem; + --bulma-size-4: 1.5rem; + --bulma-size-5: 1.25rem; + --bulma-size-6: 1rem; + --bulma-size-7: 0.75rem; + --bulma-scheme-main: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l)); + --bulma-scheme-main-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l)); + --bulma-scheme-main-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l)); + --bulma-background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l)); + --bulma-background-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-hover-background-l-delta))); + --bulma-background-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-active-background-l-delta))); + --bulma-border-weak: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l)); + --bulma-border: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l)); + --bulma-border-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-hover-border-l-delta))); + --bulma-border-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-active-border-l-delta))); + --bulma-text-weak: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l)); + --bulma-text: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l)); + --bulma-text-strong: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l)); + --bulma-scheme-invert-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-ter-l)); + --bulma-scheme-invert-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-bis-l)); + --bulma-scheme-invert: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l)); + --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)); + --bulma-link-text: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l)); + --bulma-link-text-hover: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-hover-color-l-delta))); + --bulma-link-text-active: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-active-color-l-delta))); + --bulma-focus-h: var(--bulma-link-h); + --bulma-focus-s: var(--bulma-link-s); + --bulma-focus-l: var(--bulma-link-l); + --bulma-focus-offset: 1px; + --bulma-focus-style: solid; + --bulma-focus-width: 2px; + --bulma-focus-shadow-size: 0 0 0 0.1875em; + --bulma-focus-shadow-alpha: 0.25; + --bulma-code: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l)); + --bulma-code-background: var(--bulma-background); + --bulma-pre: var(--bulma-text); + --bulma-pre-background: var(--bulma-background); + --bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1), 0 0px 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.02); +} + +@media (prefers-color-scheme: light) { + :root { + --bulma-scheme-h: 221; + --bulma-scheme-s: 14%; + --bulma-light-l: 90%; + --bulma-light-invert-l: 20%; + --bulma-dark-l: 20%; + --bulma-dark-invert-l: 90%; + --bulma-soft-l: 90%; + --bulma-bold-l: 20%; + --bulma-soft-invert-l: 20%; + --bulma-bold-invert-l: 90%; + --bulma-hover-background-l-delta: -5%; + --bulma-active-background-l-delta: -10%; + --bulma-hover-border-l-delta: -10%; + --bulma-active-border-l-delta: -20%; + --bulma-hover-color-l-delta: -5%; + --bulma-active-color-l-delta: -10%; + --bulma-hover-shadow-a-delta: -0.05; + --bulma-active-shadow-a-delta: -0.1; + --bulma-scheme-brightness: light; + --bulma-scheme-main-l: 100%; + --bulma-scheme-main-bis-l: 98%; + --bulma-scheme-main-ter-l: 96%; + --bulma-background-l: 96%; + --bulma-border-weak-l: 93%; + --bulma-border-l: 86%; + --bulma-text-weak-l: 48%; + --bulma-text-l: 29%; + --bulma-text-strong-l: 21%; + --bulma-text-title-l: 14%; + --bulma-scheme-invert-ter-l: 14%; + --bulma-scheme-invert-bis-l: 7%; + --bulma-scheme-invert-l: 4%; + --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace; + --bulma-size-small: 0.75rem; + --bulma-size-normal: 1rem; + --bulma-size-medium: 1.25rem; + --bulma-size-large: 1.5rem; + --bulma-weight-light: 300; + --bulma-weight-normal: 400; + --bulma-weight-medium: 500; + --bulma-weight-semibold: 600; + --bulma-weight-bold: 700; + --bulma-weight-extrabold: 800; + --bulma-block-spacing: 1.5rem; + --bulma-duration: 294ms; + --bulma-easing: ease-out; + --bulma-radius-small: 0.25rem; + --bulma-radius: 0.375rem; + --bulma-radius-medium: 0.5em; + --bulma-radius-large: 0.75rem; + --bulma-radius-rounded: 9999px; + --bulma-speed: 86ms; + --bulma-loading-color: var(--bulma-border); + --bulma-burger-h: var(--bulma-link-h); + --bulma-burger-s: var(--bulma-link-s); + --bulma-burger-l: var(--bulma-link-l); + --bulma-burger-border-radius: 0.5em; + --bulma-burger-gap: 5px; + --bulma-burger-item-height: 2px; + --bulma-burger-item-width: 20px; + --bulma-white: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-base: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-rgb: 255, 255, 255; + --bulma-white-h: 221deg; + --bulma-white-s: 14%; + --bulma-white-l: 100%; + --bulma-white-invert-l: 4%; + --bulma-white-invert: hsl(221, 14%, 4%); + --bulma-white-on-scheme-l: 35%; + --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1); + --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-rgb: 9, 10, 12; + --bulma-black-h: 221deg; + --bulma-black-s: 14%; + --bulma-black-l: 4%; + --bulma-black-invert-l: 100%; + --bulma-black-invert: hsl(221, 14%, 100%); + --bulma-black-on-scheme-l: 4%; + --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1); + --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-rgb: 243, 244, 246; + --bulma-light-h: 221deg; + --bulma-light-s: 14%; + --bulma-light-l: 96%; + --bulma-light-invert-l: 21%; + --bulma-light-invert: hsl(221, 14%, 21%); + --bulma-light-on-scheme-l: 36%; + --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1); + --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-rgb: 46, 51, 61; + --bulma-dark-h: 221deg; + --bulma-dark-s: 14%; + --bulma-dark-l: 21%; + --bulma-dark-invert-l: 96%; + --bulma-dark-invert: hsl(221, 14%, 96%); + --bulma-dark-on-scheme-l: 21%; + --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1); + --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-rgb: 64, 70, 84; + --bulma-text-h: 221deg; + --bulma-text-s: 14%; + --bulma-text-l: 29%; + --bulma-text-00-l: 0%; + --bulma-text-05-l: 4%; + --bulma-text-10-l: 9%; + --bulma-text-15-l: 14%; + --bulma-text-20-l: 19%; + --bulma-text-25-l: 24%; + --bulma-text-30-l: 29%; + --bulma-text-35-l: 34%; + --bulma-text-40-l: 39%; + --bulma-text-45-l: 44%; + --bulma-text-50-l: 49%; + --bulma-text-55-l: 54%; + --bulma-text-60-l: 59%; + --bulma-text-65-l: 64%; + --bulma-text-70-l: 69%; + --bulma-text-75-l: 74%; + --bulma-text-80-l: 79%; + --bulma-text-85-l: 84%; + --bulma-text-90-l: 89%; + --bulma-text-95-l: 94%; + --bulma-text-100-l: 100%; + --bulma-text-00: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-l), 1); + --bulma-text-00-invert-l: var(--bulma-text-60-l); + --bulma-text-00-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-invert-l), 1); + --bulma-text-05: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-l), 1); + --bulma-text-05-invert-l: var(--bulma-text-60-l); + --bulma-text-05-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-invert-l), 1); + --bulma-text-10: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-l), 1); + --bulma-text-10-invert-l: var(--bulma-text-70-l); + --bulma-text-10-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-invert-l), 1); + --bulma-text-15: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-l), 1); + --bulma-text-15-invert-l: var(--bulma-text-75-l); + --bulma-text-15-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-invert-l), 1); + --bulma-text-20: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-l), 1); + --bulma-text-20-invert-l: var(--bulma-text-85-l); + --bulma-text-20-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-invert-l), 1); + --bulma-text-25: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-l), 1); + --bulma-text-25-invert-l: var(--bulma-text-95-l); + --bulma-text-25-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-invert-l), 1); + --bulma-text-30: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-l), 1); + --bulma-text-30-invert-l: var(--bulma-text-100-l); + --bulma-text-30-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-invert-l), 1); + --bulma-text-35: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-l), 1); + --bulma-text-35-invert-l: var(--bulma-text-100-l); + --bulma-text-35-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-invert-l), 1); + --bulma-text-40: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-l), 1); + --bulma-text-40-invert-l: var(--bulma-text-100-l); + --bulma-text-40-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-invert-l), 1); + --bulma-text-45: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-l), 1); + --bulma-text-45-invert-l: var(--bulma-text-100-l); + --bulma-text-45-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-invert-l), 1); + --bulma-text-50: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-l), 1); + --bulma-text-50-invert-l: var(--bulma-text-100-l); + --bulma-text-50-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-invert-l), 1); + --bulma-text-55: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-l), 1); + --bulma-text-55-invert-l: var(--bulma-text-100-l); + --bulma-text-55-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-invert-l), 1); + --bulma-text-60: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-l), 1); + --bulma-text-60-invert-l: var(--bulma-text-05-l); + --bulma-text-60-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-invert-l), 1); + --bulma-text-65: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-l), 1); + --bulma-text-65-invert-l: var(--bulma-text-05-l); + --bulma-text-65-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-invert-l), 1); + --bulma-text-70: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-l), 1); + --bulma-text-70-invert-l: var(--bulma-text-10-l); + --bulma-text-70-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-invert-l), 1); + --bulma-text-75: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-l), 1); + --bulma-text-75-invert-l: var(--bulma-text-15-l); + --bulma-text-75-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-invert-l), 1); + --bulma-text-80: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-l), 1); + --bulma-text-80-invert-l: var(--bulma-text-15-l); + --bulma-text-80-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-invert-l), 1); + --bulma-text-85: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-l), 1); + --bulma-text-85-invert-l: var(--bulma-text-20-l); + --bulma-text-85-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-invert-l), 1); + --bulma-text-90: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-l), 1); + --bulma-text-90-invert-l: var(--bulma-text-20-l); + --bulma-text-90-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-invert-l), 1); + --bulma-text-95: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-l), 1); + --bulma-text-95-invert-l: var(--bulma-text-25-l); + --bulma-text-95-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-invert-l), 1); + --bulma-text-100: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-l), 1); + --bulma-text-100-invert-l: var(--bulma-text-30-l); + --bulma-text-100-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-invert-l), 1); + --bulma-text-invert-l: var(--bulma-text-100-l); + --bulma-text-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-invert-l), 1); + --bulma-text-light-l: var(--bulma-text-90-l); + --bulma-text-light: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-l), 1); + --bulma-text-light-invert-l: var(--bulma-text-20-l); + --bulma-text-light-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-invert-l), 1); + --bulma-text-dark-l: var(--bulma-text-10-l); + --bulma-text-dark: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-l), 1); + --bulma-text-dark-invert-l: var(--bulma-text-70-l); + --bulma-text-dark-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-invert-l), 1); + --bulma-text-soft: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-l), 1); + --bulma-text-bold: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-l), 1); + --bulma-text-soft-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-invert-l), 1); + --bulma-text-bold-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-invert-l), 1); + --bulma-text-on-scheme-l: 29%; + --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1); + --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-rgb: 171, 199, 255; + --bulma-primary-h: 220deg; + --bulma-primary-s: 100%; + --bulma-primary-l: 84%; + --bulma-primary-00-l: 0%; + --bulma-primary-05-l: 4%; + --bulma-primary-10-l: 9%; + --bulma-primary-15-l: 14%; + --bulma-primary-20-l: 19%; + --bulma-primary-25-l: 24%; + --bulma-primary-30-l: 29%; + --bulma-primary-35-l: 34%; + --bulma-primary-40-l: 39%; + --bulma-primary-45-l: 44%; + --bulma-primary-50-l: 49%; + --bulma-primary-55-l: 54%; + --bulma-primary-60-l: 59%; + --bulma-primary-65-l: 64%; + --bulma-primary-70-l: 69%; + --bulma-primary-75-l: 74%; + --bulma-primary-80-l: 79%; + --bulma-primary-85-l: 84%; + --bulma-primary-90-l: 89%; + --bulma-primary-95-l: 94%; + --bulma-primary-100-l: 100%; + --bulma-primary-00: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-l), 1); + --bulma-primary-00-invert-l: var(--bulma-primary-65-l); + --bulma-primary-00-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-invert-l), 1); + --bulma-primary-05: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-l), 1); + --bulma-primary-05-invert-l: var(--bulma-primary-70-l); + --bulma-primary-05-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-invert-l), 1); + --bulma-primary-10: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-l), 1); + --bulma-primary-10-invert-l: var(--bulma-primary-75-l); + --bulma-primary-10-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-invert-l), 1); + --bulma-primary-15: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-l), 1); + --bulma-primary-15-invert-l: var(--bulma-primary-80-l); + --bulma-primary-15-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-invert-l), 1); + --bulma-primary-20: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-l), 1); + --bulma-primary-20-invert-l: var(--bulma-primary-80-l); + --bulma-primary-20-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-invert-l), 1); + --bulma-primary-25: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-l), 1); + --bulma-primary-25-invert-l: var(--bulma-primary-90-l); + --bulma-primary-25-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-invert-l), 1); + --bulma-primary-30: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-l), 1); + --bulma-primary-30-invert-l: var(--bulma-primary-95-l); + --bulma-primary-30-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-invert-l), 1); + --bulma-primary-35: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-l), 1); + --bulma-primary-35-invert-l: var(--bulma-primary-100-l); + --bulma-primary-35-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-invert-l), 1); + --bulma-primary-40: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-l), 1); + --bulma-primary-40-invert-l: var(--bulma-primary-100-l); + --bulma-primary-40-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-invert-l), 1); + --bulma-primary-45: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-l), 1); + --bulma-primary-45-invert-l: var(--bulma-primary-100-l); + --bulma-primary-45-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-invert-l), 1); + --bulma-primary-50: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-l), 1); + --bulma-primary-50-invert-l: var(--bulma-primary-100-l); + --bulma-primary-50-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-invert-l), 1); + --bulma-primary-55: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-l), 1); + --bulma-primary-55-invert-l: var(--bulma-primary-100-l); + --bulma-primary-55-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-invert-l), 1); + --bulma-primary-60: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-l), 1); + --bulma-primary-60-invert-l: var(--bulma-primary-100-l); + --bulma-primary-60-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-invert-l), 1); + --bulma-primary-65: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-l), 1); + --bulma-primary-65-invert-l: var(--bulma-primary-00-l); + --bulma-primary-65-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-invert-l), 1); + --bulma-primary-70: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-l), 1); + --bulma-primary-70-invert-l: var(--bulma-primary-05-l); + --bulma-primary-70-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-invert-l), 1); + --bulma-primary-75: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1); + --bulma-primary-75-invert-l: var(--bulma-primary-10-l); + --bulma-primary-75-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-invert-l), 1); + --bulma-primary-80: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-l), 1); + --bulma-primary-80-invert-l: var(--bulma-primary-20-l); + --bulma-primary-80-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-invert-l), 1); + --bulma-primary-85: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-l), 1); + --bulma-primary-85-invert-l: var(--bulma-primary-20-l); + --bulma-primary-85-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-invert-l), 1); + --bulma-primary-90: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-l), 1); + --bulma-primary-90-invert-l: var(--bulma-primary-25-l); + --bulma-primary-90-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-invert-l), 1); + --bulma-primary-95: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-l), 1); + --bulma-primary-95-invert-l: var(--bulma-primary-30-l); + --bulma-primary-95-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-invert-l), 1); + --bulma-primary-100: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-l), 1); + --bulma-primary-100-invert-l: var(--bulma-primary-35-l); + --bulma-primary-100-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-invert-l), 1); + --bulma-primary-invert-l: var(--bulma-primary-20-l); + --bulma-primary-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-invert-l), 1); + --bulma-primary-light-l: var(--bulma-primary-90-l); + --bulma-primary-light: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-l), 1); + --bulma-primary-light-invert-l: var(--bulma-primary-25-l); + --bulma-primary-light-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-invert-l), 1); + --bulma-primary-dark-l: var(--bulma-primary-10-l); + --bulma-primary-dark: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-l), 1); + --bulma-primary-dark-invert-l: var(--bulma-primary-75-l); + --bulma-primary-dark-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-invert-l), 1); + --bulma-primary-soft: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-l), 1); + --bulma-primary-bold: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-l), 1); + --bulma-primary-soft-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-invert-l), 1); + --bulma-primary-bold-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-invert-l), 1); + --bulma-primary-on-scheme-l: 43.5294117647%; + --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1); + --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-rgb: 237, 177, 255; + --bulma-link-h: 286deg; + --bulma-link-s: 100%; + --bulma-link-l: 85%; + --bulma-link-00-l: 0%; + --bulma-link-05-l: 5%; + --bulma-link-10-l: 10%; + --bulma-link-15-l: 15%; + --bulma-link-20-l: 20%; + --bulma-link-25-l: 25%; + --bulma-link-30-l: 30%; + --bulma-link-35-l: 35%; + --bulma-link-40-l: 40%; + --bulma-link-45-l: 45%; + --bulma-link-50-l: 50%; + --bulma-link-55-l: 55%; + --bulma-link-60-l: 60%; + --bulma-link-65-l: 65%; + --bulma-link-70-l: 70%; + --bulma-link-75-l: 75%; + --bulma-link-80-l: 80%; + --bulma-link-85-l: 85%; + --bulma-link-90-l: 90%; + --bulma-link-95-l: 95%; + --bulma-link-100-l: 100%; + --bulma-link-00: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-l), 1); + --bulma-link-00-invert-l: var(--bulma-link-65-l); + --bulma-link-00-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-invert-l), 1); + --bulma-link-05: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-l), 1); + --bulma-link-05-invert-l: var(--bulma-link-70-l); + --bulma-link-05-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-invert-l), 1); + --bulma-link-10: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-l), 1); + --bulma-link-10-invert-l: var(--bulma-link-75-l); + --bulma-link-10-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-invert-l), 1); + --bulma-link-15: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-l), 1); + --bulma-link-15-invert-l: var(--bulma-link-80-l); + --bulma-link-15-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-invert-l), 1); + --bulma-link-20: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-l), 1); + --bulma-link-20-invert-l: var(--bulma-link-85-l); + --bulma-link-20-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-invert-l), 1); + --bulma-link-25: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-l), 1); + --bulma-link-25-invert-l: var(--bulma-link-90-l); + --bulma-link-25-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-invert-l), 1); + --bulma-link-30: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-l), 1); + --bulma-link-30-invert-l: var(--bulma-link-95-l); + --bulma-link-30-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-invert-l), 1); + --bulma-link-35: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-l), 1); + --bulma-link-35-invert-l: var(--bulma-link-100-l); + --bulma-link-35-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-invert-l), 1); + --bulma-link-40: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-l), 1); + --bulma-link-40-invert-l: var(--bulma-link-100-l); + --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1); + --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1); + --bulma-link-45-invert-l: var(--bulma-link-100-l); + --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1); + --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1); + --bulma-link-50-invert-l: var(--bulma-link-100-l); + --bulma-link-50-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-invert-l), 1); + --bulma-link-55: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-l), 1); + --bulma-link-55-invert-l: var(--bulma-link-100-l); + --bulma-link-55-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-invert-l), 1); + --bulma-link-60: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-l), 1); + --bulma-link-60-invert-l: var(--bulma-link-100-l); + --bulma-link-60-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-invert-l), 1); + --bulma-link-65: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-l), 1); + --bulma-link-65-invert-l: var(--bulma-link-00-l); + --bulma-link-65-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-invert-l), 1); + --bulma-link-70: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-l), 1); + --bulma-link-70-invert-l: var(--bulma-link-05-l); + --bulma-link-70-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-invert-l), 1); + --bulma-link-75: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-l), 1); + --bulma-link-75-invert-l: var(--bulma-link-10-l); + --bulma-link-75-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-invert-l), 1); + --bulma-link-80: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-l), 1); + --bulma-link-80-invert-l: var(--bulma-link-15-l); + --bulma-link-80-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-invert-l), 1); + --bulma-link-85: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-l), 1); + --bulma-link-85-invert-l: var(--bulma-link-20-l); + --bulma-link-85-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-invert-l), 1); + --bulma-link-90: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-l), 1); + --bulma-link-90-invert-l: var(--bulma-link-25-l); + --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1); + --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1); + --bulma-link-95-invert-l: var(--bulma-link-30-l); + --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1); + --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1); + --bulma-link-100-invert-l: var(--bulma-link-30-l); + --bulma-link-100-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-invert-l), 1); + --bulma-link-invert-l: var(--bulma-link-20-l); + --bulma-link-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-invert-l), 1); + --bulma-link-light-l: var(--bulma-link-90-l); + --bulma-link-light: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-l), 1); + --bulma-link-light-invert-l: var(--bulma-link-25-l); + --bulma-link-light-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-invert-l), 1); + --bulma-link-dark-l: var(--bulma-link-10-l); + --bulma-link-dark: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-l), 1); + --bulma-link-dark-invert-l: var(--bulma-link-75-l); + --bulma-link-dark-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-invert-l), 1); + --bulma-link-soft: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-l), 1); + --bulma-link-bold: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-l), 1); + --bulma-link-soft-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-invert-l), 1); + --bulma-link-bold-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-invert-l), 1); + --bulma-link-on-scheme-l: 39.7058823529%; + --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1); + --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-rgb: 103, 21, 239; + --bulma-info-h: 263deg; + --bulma-info-s: 87%; + --bulma-info-l: 51%; + --bulma-info-00-l: 1%; + --bulma-info-05-l: 6%; + --bulma-info-10-l: 11%; + --bulma-info-15-l: 16%; + --bulma-info-20-l: 21%; + --bulma-info-25-l: 26%; + --bulma-info-30-l: 31%; + --bulma-info-35-l: 36%; + --bulma-info-40-l: 41%; + --bulma-info-45-l: 46%; + --bulma-info-50-l: 51%; + --bulma-info-55-l: 56%; + --bulma-info-60-l: 61%; + --bulma-info-65-l: 66%; + --bulma-info-70-l: 71%; + --bulma-info-75-l: 76%; + --bulma-info-80-l: 81%; + --bulma-info-85-l: 86%; + --bulma-info-90-l: 91%; + --bulma-info-95-l: 96%; + --bulma-info-100-l: 100%; + --bulma-info-00: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-l), 1); + --bulma-info-00-invert-l: var(--bulma-info-70-l); + --bulma-info-00-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-invert-l), 1); + --bulma-info-05: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-l), 1); + --bulma-info-05-invert-l: var(--bulma-info-70-l); + --bulma-info-05-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-invert-l), 1); + --bulma-info-10: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-l), 1); + --bulma-info-10-invert-l: var(--bulma-info-75-l); + --bulma-info-10-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-invert-l), 1); + --bulma-info-15: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-l), 1); + --bulma-info-15-invert-l: var(--bulma-info-75-l); + --bulma-info-15-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-invert-l), 1); + --bulma-info-20: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-l), 1); + --bulma-info-20-invert-l: var(--bulma-info-80-l); + --bulma-info-20-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-invert-l), 1); + --bulma-info-25: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-l), 1); + --bulma-info-25-invert-l: var(--bulma-info-85-l); + --bulma-info-25-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-invert-l), 1); + --bulma-info-30: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-l), 1); + --bulma-info-30-invert-l: var(--bulma-info-85-l); + --bulma-info-30-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-invert-l), 1); + --bulma-info-35: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-l), 1); + --bulma-info-35-invert-l: var(--bulma-info-90-l); + --bulma-info-35-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-invert-l), 1); + --bulma-info-40: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-l), 1); + --bulma-info-40-invert-l: var(--bulma-info-95-l); + --bulma-info-40-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-invert-l), 1); + --bulma-info-45: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-l), 1); + --bulma-info-45-invert-l: var(--bulma-info-100-l); + --bulma-info-45-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-invert-l), 1); + --bulma-info-50: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-l), 1); + --bulma-info-50-invert-l: var(--bulma-info-100-l); + --bulma-info-50-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-invert-l), 1); + --bulma-info-55: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-l), 1); + --bulma-info-55-invert-l: var(--bulma-info-100-l); + --bulma-info-55-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-invert-l), 1); + --bulma-info-60: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-l), 1); + --bulma-info-60-invert-l: var(--bulma-info-100-l); + --bulma-info-60-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-invert-l), 1); + --bulma-info-65: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-l), 1); + --bulma-info-65-invert-l: var(--bulma-info-100-l); + --bulma-info-65-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-invert-l), 1); + --bulma-info-70: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-l), 1); + --bulma-info-70-invert-l: var(--bulma-info-05-l); + --bulma-info-70-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-invert-l), 1); + --bulma-info-75: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-l), 1); + --bulma-info-75-invert-l: var(--bulma-info-15-l); + --bulma-info-75-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-invert-l), 1); + --bulma-info-80: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-l), 1); + --bulma-info-80-invert-l: var(--bulma-info-20-l); + --bulma-info-80-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-invert-l), 1); + --bulma-info-85: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-l), 1); + --bulma-info-85-invert-l: var(--bulma-info-30-l); + --bulma-info-85-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-invert-l), 1); + --bulma-info-90: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-l), 1); + --bulma-info-90-invert-l: var(--bulma-info-35-l); + --bulma-info-90-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-invert-l), 1); + --bulma-info-95: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-l), 1); + --bulma-info-95-invert-l: var(--bulma-info-40-l); + --bulma-info-95-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-invert-l), 1); + --bulma-info-100: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-l), 1); + --bulma-info-100-invert-l: var(--bulma-info-45-l); + --bulma-info-100-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-invert-l), 1); + --bulma-info-invert-l: var(--bulma-info-100-l); + --bulma-info-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-invert-l), 1); + --bulma-info-light-l: var(--bulma-info-90-l); + --bulma-info-light: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-l), 1); + --bulma-info-light-invert-l: var(--bulma-info-35-l); + --bulma-info-light-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-invert-l), 1); + --bulma-info-dark-l: var(--bulma-info-10-l); + --bulma-info-dark: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-l), 1); + --bulma-info-dark-invert-l: var(--bulma-info-75-l); + --bulma-info-dark-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-invert-l), 1); + --bulma-info-soft: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-l), 1); + --bulma-info-bold: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-l), 1); + --bulma-info-soft-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-invert-l), 1); + --bulma-info-bold-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-invert-l), 1); + --bulma-info-on-scheme-l: 50.9803921569%; + --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1); + --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-rgb: 72, 199, 142; + --bulma-success-h: 153deg; + --bulma-success-s: 53%; + --bulma-success-l: 53%; + --bulma-success-00-l: 0%; + --bulma-success-05-l: 3%; + --bulma-success-10-l: 8%; + --bulma-success-15-l: 13%; + --bulma-success-20-l: 18%; + --bulma-success-25-l: 23%; + --bulma-success-30-l: 28%; + --bulma-success-35-l: 33%; + --bulma-success-40-l: 38%; + --bulma-success-45-l: 43%; + --bulma-success-50-l: 48%; + --bulma-success-55-l: 53%; + --bulma-success-60-l: 58%; + --bulma-success-65-l: 63%; + --bulma-success-70-l: 68%; + --bulma-success-75-l: 73%; + --bulma-success-80-l: 78%; + --bulma-success-85-l: 83%; + --bulma-success-90-l: 88%; + --bulma-success-95-l: 93%; + --bulma-success-100-l: 100%; + --bulma-success-00: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-l), 1); + --bulma-success-00-invert-l: var(--bulma-success-45-l); + --bulma-success-00-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-invert-l), 1); + --bulma-success-05: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-l), 1); + --bulma-success-05-invert-l: var(--bulma-success-45-l); + --bulma-success-05-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-invert-l), 1); + --bulma-success-10: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-l), 1); + --bulma-success-10-invert-l: var(--bulma-success-55-l); + --bulma-success-10-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-invert-l), 1); + --bulma-success-15: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-l), 1); + --bulma-success-15-invert-l: var(--bulma-success-75-l); + --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1); + --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1); + --bulma-success-20-invert-l: var(--bulma-success-90-l); + --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1); + --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1); + --bulma-success-25-invert-l: var(--bulma-success-100-l); + --bulma-success-25-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-invert-l), 1); + --bulma-success-30: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-l), 1); + --bulma-success-30-invert-l: var(--bulma-success-100-l); + --bulma-success-30-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-invert-l), 1); + --bulma-success-35: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-l), 1); + --bulma-success-35-invert-l: var(--bulma-success-100-l); + --bulma-success-35-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-invert-l), 1); + --bulma-success-40: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-l), 1); + --bulma-success-40-invert-l: var(--bulma-success-100-l); + --bulma-success-40-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-invert-l), 1); + --bulma-success-45: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-l), 1); + --bulma-success-45-invert-l: var(--bulma-success-05-l); + --bulma-success-45-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-invert-l), 1); + --bulma-success-50: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-l), 1); + --bulma-success-50-invert-l: var(--bulma-success-05-l); + --bulma-success-50-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-invert-l), 1); + --bulma-success-55: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-l), 1); + --bulma-success-55-invert-l: var(--bulma-success-10-l); + --bulma-success-55-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-invert-l), 1); + --bulma-success-60: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-l), 1); + --bulma-success-60-invert-l: var(--bulma-success-10-l); + --bulma-success-60-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-invert-l), 1); + --bulma-success-65: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-l), 1); + --bulma-success-65-invert-l: var(--bulma-success-10-l); + --bulma-success-65-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-invert-l), 1); + --bulma-success-70: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-l), 1); + --bulma-success-70-invert-l: var(--bulma-success-10-l); + --bulma-success-70-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-invert-l), 1); + --bulma-success-75: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-l), 1); + --bulma-success-75-invert-l: var(--bulma-success-15-l); + --bulma-success-75-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-invert-l), 1); + --bulma-success-80: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-l), 1); + --bulma-success-80-invert-l: var(--bulma-success-15-l); + --bulma-success-80-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-invert-l), 1); + --bulma-success-85: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-l), 1); + --bulma-success-85-invert-l: var(--bulma-success-15-l); + --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1); + --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1); + --bulma-success-90-invert-l: var(--bulma-success-20-l); + --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1); + --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1); + --bulma-success-95-invert-l: var(--bulma-success-20-l); + --bulma-success-95-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-invert-l), 1); + --bulma-success-100: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-l), 1); + --bulma-success-100-invert-l: var(--bulma-success-20-l); + --bulma-success-100-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-invert-l), 1); + --bulma-success-invert-l: var(--bulma-success-10-l); + --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1); + --bulma-success-light-l: var(--bulma-success-90-l); + --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1); + --bulma-success-light-invert-l: var(--bulma-success-20-l); + --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1); + --bulma-success-dark-l: var(--bulma-success-10-l); + --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1); + --bulma-success-dark-invert-l: var(--bulma-success-55-l); + --bulma-success-dark-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-invert-l), 1); + --bulma-success-soft: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-l), 1); + --bulma-success-bold: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-l), 1); + --bulma-success-soft-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-invert-l), 1); + --bulma-success-bold-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-invert-l), 1); + --bulma-success-on-scheme-l: 23%; + --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1); + --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-rgb: 255, 183, 15; + --bulma-warning-h: 42deg; + --bulma-warning-s: 100%; + --bulma-warning-l: 53%; + --bulma-warning-00-l: 0%; + --bulma-warning-05-l: 3%; + --bulma-warning-10-l: 8%; + --bulma-warning-15-l: 13%; + --bulma-warning-20-l: 18%; + --bulma-warning-25-l: 23%; + --bulma-warning-30-l: 28%; + --bulma-warning-35-l: 33%; + --bulma-warning-40-l: 38%; + --bulma-warning-45-l: 43%; + --bulma-warning-50-l: 48%; + --bulma-warning-55-l: 53%; + --bulma-warning-60-l: 58%; + --bulma-warning-65-l: 63%; + --bulma-warning-70-l: 68%; + --bulma-warning-75-l: 73%; + --bulma-warning-80-l: 78%; + --bulma-warning-85-l: 83%; + --bulma-warning-90-l: 88%; + --bulma-warning-95-l: 93%; + --bulma-warning-100-l: 100%; + --bulma-warning-00: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-l), 1); + --bulma-warning-00-invert-l: var(--bulma-warning-40-l); + --bulma-warning-00-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-invert-l), 1); + --bulma-warning-05: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-l), 1); + --bulma-warning-05-invert-l: var(--bulma-warning-45-l); + --bulma-warning-05-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-invert-l), 1); + --bulma-warning-10: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-l), 1); + --bulma-warning-10-invert-l: var(--bulma-warning-50-l); + --bulma-warning-10-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-invert-l), 1); + --bulma-warning-15: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-l), 1); + --bulma-warning-15-invert-l: var(--bulma-warning-70-l); + --bulma-warning-15-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-invert-l), 1); + --bulma-warning-20: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-l), 1); + --bulma-warning-20-invert-l: var(--bulma-warning-100-l); + --bulma-warning-20-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-invert-l), 1); + --bulma-warning-25: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-l), 1); + --bulma-warning-25-invert-l: var(--bulma-warning-100-l); + --bulma-warning-25-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-invert-l), 1); + --bulma-warning-30: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-l), 1); + --bulma-warning-30-invert-l: var(--bulma-warning-100-l); + --bulma-warning-30-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-invert-l), 1); + --bulma-warning-35: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-l), 1); + --bulma-warning-35-invert-l: var(--bulma-warning-100-l); + --bulma-warning-35-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-invert-l), 1); + --bulma-warning-40: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-l), 1); + --bulma-warning-40-invert-l: var(--bulma-warning-00-l); + --bulma-warning-40-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-invert-l), 1); + --bulma-warning-45: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-l), 1); + --bulma-warning-45-invert-l: var(--bulma-warning-05-l); + --bulma-warning-45-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-invert-l), 1); + --bulma-warning-50: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-l), 1); + --bulma-warning-50-invert-l: var(--bulma-warning-10-l); + --bulma-warning-50-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-invert-l), 1); + --bulma-warning-55: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-l), 1); + --bulma-warning-55-invert-l: var(--bulma-warning-10-l); + --bulma-warning-55-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-invert-l), 1); + --bulma-warning-60: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-l), 1); + --bulma-warning-60-invert-l: var(--bulma-warning-10-l); + --bulma-warning-60-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-invert-l), 1); + --bulma-warning-65: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-l), 1); + --bulma-warning-65-invert-l: var(--bulma-warning-10-l); + --bulma-warning-65-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-invert-l), 1); + --bulma-warning-70: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-l), 1); + --bulma-warning-70-invert-l: var(--bulma-warning-15-l); + --bulma-warning-70-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-invert-l), 1); + --bulma-warning-75: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-l), 1); + --bulma-warning-75-invert-l: var(--bulma-warning-15-l); + --bulma-warning-75-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-invert-l), 1); + --bulma-warning-80: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-l), 1); + --bulma-warning-80-invert-l: var(--bulma-warning-15-l); + --bulma-warning-80-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-invert-l), 1); + --bulma-warning-85: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-l), 1); + --bulma-warning-85-invert-l: var(--bulma-warning-15-l); + --bulma-warning-85-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-invert-l), 1); + --bulma-warning-90: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-l), 1); + --bulma-warning-90-invert-l: var(--bulma-warning-15-l); + --bulma-warning-90-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-invert-l), 1); + --bulma-warning-95: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-l), 1); + --bulma-warning-95-invert-l: var(--bulma-warning-15-l); + --bulma-warning-95-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-invert-l), 1); + --bulma-warning-100: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-l), 1); + --bulma-warning-100-invert-l: var(--bulma-warning-20-l); + --bulma-warning-100-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-invert-l), 1); + --bulma-warning-invert-l: var(--bulma-warning-10-l); + --bulma-warning-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-invert-l), 1); + --bulma-warning-light-l: var(--bulma-warning-90-l); + --bulma-warning-light: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-l), 1); + --bulma-warning-light-invert-l: var(--bulma-warning-15-l); + --bulma-warning-light-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-invert-l), 1); + --bulma-warning-dark-l: var(--bulma-warning-10-l); + --bulma-warning-dark: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-l), 1); + --bulma-warning-dark-invert-l: var(--bulma-warning-50-l); + --bulma-warning-dark-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-invert-l), 1); + --bulma-warning-soft: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-l), 1); + --bulma-warning-bold: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-l), 1); + --bulma-warning-soft-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-invert-l), 1); + --bulma-warning-bold-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-invert-l), 1); + --bulma-warning-on-scheme-l: 23%; + --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1); + --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-rgb: 255, 102, 133; + --bulma-danger-h: 348deg; + --bulma-danger-s: 100%; + --bulma-danger-l: 70%; + --bulma-danger-00-l: 0%; + --bulma-danger-05-l: 5%; + --bulma-danger-10-l: 10%; + --bulma-danger-15-l: 15%; + --bulma-danger-20-l: 20%; + --bulma-danger-25-l: 25%; + --bulma-danger-30-l: 30%; + --bulma-danger-35-l: 35%; + --bulma-danger-40-l: 40%; + --bulma-danger-45-l: 45%; + --bulma-danger-50-l: 50%; + --bulma-danger-55-l: 55%; + --bulma-danger-60-l: 60%; + --bulma-danger-65-l: 65%; + --bulma-danger-70-l: 70%; + --bulma-danger-75-l: 75%; + --bulma-danger-80-l: 80%; + --bulma-danger-85-l: 85%; + --bulma-danger-90-l: 90%; + --bulma-danger-95-l: 95%; + --bulma-danger-100-l: 100%; + --bulma-danger-00: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-l), 1); + --bulma-danger-00-invert-l: var(--bulma-danger-65-l); + --bulma-danger-00-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-invert-l), 1); + --bulma-danger-05: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-l), 1); + --bulma-danger-05-invert-l: var(--bulma-danger-70-l); + --bulma-danger-05-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-invert-l), 1); + --bulma-danger-10: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-l), 1); + --bulma-danger-10-invert-l: var(--bulma-danger-75-l); + --bulma-danger-10-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-invert-l), 1); + --bulma-danger-15: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-l), 1); + --bulma-danger-15-invert-l: var(--bulma-danger-80-l); + --bulma-danger-15-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-invert-l), 1); + --bulma-danger-20: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-l), 1); + --bulma-danger-20-invert-l: var(--bulma-danger-85-l); + --bulma-danger-20-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-invert-l), 1); + --bulma-danger-25: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-l), 1); + --bulma-danger-25-invert-l: var(--bulma-danger-90-l); + --bulma-danger-25-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-invert-l), 1); + --bulma-danger-30: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-l), 1); + --bulma-danger-30-invert-l: var(--bulma-danger-100-l); + --bulma-danger-30-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-invert-l), 1); + --bulma-danger-35: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-l), 1); + --bulma-danger-35-invert-l: var(--bulma-danger-100-l); + --bulma-danger-35-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-invert-l), 1); + --bulma-danger-40: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-l), 1); + --bulma-danger-40-invert-l: var(--bulma-danger-100-l); + --bulma-danger-40-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-invert-l), 1); + --bulma-danger-45: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-l), 1); + --bulma-danger-45-invert-l: var(--bulma-danger-100-l); + --bulma-danger-45-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-invert-l), 1); + --bulma-danger-50: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-l), 1); + --bulma-danger-50-invert-l: var(--bulma-danger-100-l); + --bulma-danger-50-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-invert-l), 1); + --bulma-danger-55: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-l), 1); + --bulma-danger-55-invert-l: var(--bulma-danger-100-l); + --bulma-danger-55-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-invert-l), 1); + --bulma-danger-60: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-l), 1); + --bulma-danger-60-invert-l: var(--bulma-danger-100-l); + --bulma-danger-60-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-invert-l), 1); + --bulma-danger-65: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-l), 1); + --bulma-danger-65-invert-l: var(--bulma-danger-00-l); + --bulma-danger-65-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-invert-l), 1); + --bulma-danger-70: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-l), 1); + --bulma-danger-70-invert-l: var(--bulma-danger-05-l); + --bulma-danger-70-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-invert-l), 1); + --bulma-danger-75: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-l), 1); + --bulma-danger-75-invert-l: var(--bulma-danger-10-l); + --bulma-danger-75-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-invert-l), 1); + --bulma-danger-80: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-l), 1); + --bulma-danger-80-invert-l: var(--bulma-danger-15-l); + --bulma-danger-80-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-invert-l), 1); + --bulma-danger-85: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-l), 1); + --bulma-danger-85-invert-l: var(--bulma-danger-20-l); + --bulma-danger-85-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-invert-l), 1); + --bulma-danger-90: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-l), 1); + --bulma-danger-90-invert-l: var(--bulma-danger-25-l); + --bulma-danger-90-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-invert-l), 1); + --bulma-danger-95: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-l), 1); + --bulma-danger-95-invert-l: var(--bulma-danger-25-l); + --bulma-danger-95-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-invert-l), 1); + --bulma-danger-100: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-l), 1); + --bulma-danger-100-invert-l: var(--bulma-danger-30-l); + --bulma-danger-100-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-invert-l), 1); + --bulma-danger-invert-l: var(--bulma-danger-05-l); + --bulma-danger-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-invert-l), 1); + --bulma-danger-light-l: var(--bulma-danger-90-l); + --bulma-danger-light: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-l), 1); + --bulma-danger-light-invert-l: var(--bulma-danger-25-l); + --bulma-danger-light-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-invert-l), 1); + --bulma-danger-dark-l: var(--bulma-danger-10-l); + --bulma-danger-dark: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-l), 1); + --bulma-danger-dark-invert-l: var(--bulma-danger-75-l); + --bulma-danger-dark-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-invert-l), 1); + --bulma-danger-soft: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-l), 1); + --bulma-danger-bold: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-l), 1); + --bulma-danger-soft-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-invert-l), 1); + --bulma-danger-bold-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-invert-l), 1); + --bulma-danger-on-scheme-l: 40%; + --bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1); + --bulma-black-bis: hsl(221, 14%, 9%); + --bulma-black-ter: hsl(221, 14%, 14%); + --bulma-grey-darker: hsl(221, 14%, 21%); + --bulma-grey-dark: hsl(221, 14%, 29%); + --bulma-grey: hsl(221, 14%, 48%); + --bulma-grey-light: hsl(221, 14%, 71%); + --bulma-grey-lighter: hsl(221, 14%, 86%); + --bulma-white-ter: hsl(221, 14%, 96%); + --bulma-white-bis: hsl(221, 14%, 98%); + --bulma-shadow-h: 221deg; + --bulma-shadow-s: 14%; + --bulma-shadow-l: 4%; + --bulma-size-1: 3rem; + --bulma-size-2: 2.5rem; + --bulma-size-3: 2rem; + --bulma-size-4: 1.5rem; + --bulma-size-5: 1.25rem; + --bulma-size-6: 1rem; + --bulma-size-7: 0.75rem; + } +} +@media (prefers-color-scheme: dark) { + :root { + --bulma-white-on-scheme-l: 100%; + --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1); + --bulma-black-on-scheme-l: 0%; + --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1); + --bulma-light-on-scheme-l: 96%; + --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1); + --bulma-dark-on-scheme-l: 56%; + --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1); + --bulma-text-on-scheme-l: 54%; + --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1); + --bulma-primary-on-scheme-l: 83.5294117647%; + --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1); + --bulma-link-on-scheme-l: 84.7058823529%; + --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1); + --bulma-info-on-scheme-l: 70.9803921569%; + --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1); + --bulma-success-on-scheme-l: 53%; + --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1); + --bulma-warning-on-scheme-l: 53%; + --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1); + --bulma-danger-on-scheme-l: 70%; + --bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1); + --bulma-scheme-brightness: dark; + --bulma-scheme-main-l: 9%; + --bulma-scheme-main-bis-l: 11%; + --bulma-scheme-main-ter-l: 13%; + --bulma-soft-l: 20%; + --bulma-bold-l: 90%; + --bulma-soft-invert-l: 90%; + --bulma-bold-invert-l: 20%; + --bulma-background-l: 14%; + --bulma-border-weak-l: 21%; + --bulma-border-l: 24%; + --bulma-text-weak-l: 53%; + --bulma-text-l: 71%; + --bulma-text-strong-l: 93%; + --bulma-text-title-l: 100%; + --bulma-hover-background-l-delta: 5%; + --bulma-active-background-l-delta: 10%; + --bulma-hover-border-l-delta: 10%; + --bulma-active-border-l-delta: 20%; + --bulma-hover-color-l-delta: 5%; + --bulma-active-color-l-delta: 10%; + --bulma-shadow-h: 0deg; + --bulma-shadow-s: 0%; + --bulma-shadow-l: 100%; + } +} +[data-theme=light], +.theme-light { + --bulma-scheme-h: 221; + --bulma-scheme-s: 14%; + --bulma-light-l: 90%; + --bulma-light-invert-l: 20%; + --bulma-dark-l: 20%; + --bulma-dark-invert-l: 90%; + --bulma-soft-l: 90%; + --bulma-bold-l: 20%; + --bulma-soft-invert-l: 20%; + --bulma-bold-invert-l: 90%; + --bulma-hover-background-l-delta: -5%; + --bulma-active-background-l-delta: -10%; + --bulma-hover-border-l-delta: -10%; + --bulma-active-border-l-delta: -20%; + --bulma-hover-color-l-delta: -5%; + --bulma-active-color-l-delta: -10%; + --bulma-hover-shadow-a-delta: -0.05; + --bulma-active-shadow-a-delta: -0.1; + --bulma-scheme-brightness: light; + --bulma-scheme-main-l: 100%; + --bulma-scheme-main-bis-l: 98%; + --bulma-scheme-main-ter-l: 96%; + --bulma-background-l: 96%; + --bulma-border-weak-l: 93%; + --bulma-border-l: 86%; + --bulma-text-weak-l: 48%; + --bulma-text-l: 29%; + --bulma-text-strong-l: 21%; + --bulma-text-title-l: 14%; + --bulma-scheme-invert-ter-l: 14%; + --bulma-scheme-invert-bis-l: 7%; + --bulma-scheme-invert-l: 4%; + --bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif; + --bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace; + --bulma-size-small: 0.75rem; + --bulma-size-normal: 1rem; + --bulma-size-medium: 1.25rem; + --bulma-size-large: 1.5rem; + --bulma-weight-light: 300; + --bulma-weight-normal: 400; + --bulma-weight-medium: 500; + --bulma-weight-semibold: 600; + --bulma-weight-bold: 700; + --bulma-weight-extrabold: 800; + --bulma-block-spacing: 1.5rem; + --bulma-duration: 294ms; + --bulma-easing: ease-out; + --bulma-radius-small: 0.25rem; + --bulma-radius: 0.375rem; + --bulma-radius-medium: 0.5em; + --bulma-radius-large: 0.75rem; + --bulma-radius-rounded: 9999px; + --bulma-speed: 86ms; + --bulma-loading-color: var(--bulma-border); + --bulma-burger-h: var(--bulma-link-h); + --bulma-burger-s: var(--bulma-link-s); + --bulma-burger-l: var(--bulma-link-l); + --bulma-burger-border-radius: 0.5em; + --bulma-burger-gap: 5px; + --bulma-burger-item-height: 2px; + --bulma-burger-item-width: 20px; + --bulma-white: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-base: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-l), 1); + --bulma-white-rgb: 255, 255, 255; + --bulma-white-h: 221deg; + --bulma-white-s: 14%; + --bulma-white-l: 100%; + --bulma-white-invert-l: 4%; + --bulma-white-invert: hsl(221, 14%, 4%); + --bulma-white-on-scheme-l: 35%; + --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1); + --bulma-black: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-base: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-l), 1); + --bulma-black-rgb: 9, 10, 12; + --bulma-black-h: 221deg; + --bulma-black-s: 14%; + --bulma-black-l: 4%; + --bulma-black-invert-l: 100%; + --bulma-black-invert: hsl(221, 14%, 100%); + --bulma-black-on-scheme-l: 4%; + --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1); + --bulma-light: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-base: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-l), 1); + --bulma-light-rgb: 243, 244, 246; + --bulma-light-h: 221deg; + --bulma-light-s: 14%; + --bulma-light-l: 96%; + --bulma-light-invert-l: 21%; + --bulma-light-invert: hsl(221, 14%, 21%); + --bulma-light-on-scheme-l: 36%; + --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1); + --bulma-dark: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-base: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l), 1); + --bulma-dark-rgb: 46, 51, 61; + --bulma-dark-h: 221deg; + --bulma-dark-s: 14%; + --bulma-dark-l: 21%; + --bulma-dark-invert-l: 96%; + --bulma-dark-invert: hsl(221, 14%, 96%); + --bulma-dark-on-scheme-l: 21%; + --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1); + --bulma-text: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-base: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l), 1); + --bulma-text-rgb: 64, 70, 84; + --bulma-text-h: 221deg; + --bulma-text-s: 14%; + --bulma-text-l: 29%; + --bulma-text-00-l: 0%; + --bulma-text-05-l: 4%; + --bulma-text-10-l: 9%; + --bulma-text-15-l: 14%; + --bulma-text-20-l: 19%; + --bulma-text-25-l: 24%; + --bulma-text-30-l: 29%; + --bulma-text-35-l: 34%; + --bulma-text-40-l: 39%; + --bulma-text-45-l: 44%; + --bulma-text-50-l: 49%; + --bulma-text-55-l: 54%; + --bulma-text-60-l: 59%; + --bulma-text-65-l: 64%; + --bulma-text-70-l: 69%; + --bulma-text-75-l: 74%; + --bulma-text-80-l: 79%; + --bulma-text-85-l: 84%; + --bulma-text-90-l: 89%; + --bulma-text-95-l: 94%; + --bulma-text-100-l: 100%; + --bulma-text-00: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-l), 1); + --bulma-text-00-invert-l: var(--bulma-text-60-l); + --bulma-text-00-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-00-invert-l), 1); + --bulma-text-05: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-l), 1); + --bulma-text-05-invert-l: var(--bulma-text-60-l); + --bulma-text-05-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-05-invert-l), 1); + --bulma-text-10: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-l), 1); + --bulma-text-10-invert-l: var(--bulma-text-70-l); + --bulma-text-10-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-10-invert-l), 1); + --bulma-text-15: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-l), 1); + --bulma-text-15-invert-l: var(--bulma-text-75-l); + --bulma-text-15-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-15-invert-l), 1); + --bulma-text-20: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-l), 1); + --bulma-text-20-invert-l: var(--bulma-text-85-l); + --bulma-text-20-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-20-invert-l), 1); + --bulma-text-25: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-l), 1); + --bulma-text-25-invert-l: var(--bulma-text-95-l); + --bulma-text-25-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-25-invert-l), 1); + --bulma-text-30: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-l), 1); + --bulma-text-30-invert-l: var(--bulma-text-100-l); + --bulma-text-30-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-30-invert-l), 1); + --bulma-text-35: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-l), 1); + --bulma-text-35-invert-l: var(--bulma-text-100-l); + --bulma-text-35-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-35-invert-l), 1); + --bulma-text-40: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-l), 1); + --bulma-text-40-invert-l: var(--bulma-text-100-l); + --bulma-text-40-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-40-invert-l), 1); + --bulma-text-45: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-l), 1); + --bulma-text-45-invert-l: var(--bulma-text-100-l); + --bulma-text-45-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-45-invert-l), 1); + --bulma-text-50: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-l), 1); + --bulma-text-50-invert-l: var(--bulma-text-100-l); + --bulma-text-50-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-50-invert-l), 1); + --bulma-text-55: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-l), 1); + --bulma-text-55-invert-l: var(--bulma-text-100-l); + --bulma-text-55-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-55-invert-l), 1); + --bulma-text-60: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-l), 1); + --bulma-text-60-invert-l: var(--bulma-text-05-l); + --bulma-text-60-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-60-invert-l), 1); + --bulma-text-65: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-l), 1); + --bulma-text-65-invert-l: var(--bulma-text-05-l); + --bulma-text-65-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-65-invert-l), 1); + --bulma-text-70: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-l), 1); + --bulma-text-70-invert-l: var(--bulma-text-10-l); + --bulma-text-70-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-70-invert-l), 1); + --bulma-text-75: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-l), 1); + --bulma-text-75-invert-l: var(--bulma-text-15-l); + --bulma-text-75-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-75-invert-l), 1); + --bulma-text-80: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-l), 1); + --bulma-text-80-invert-l: var(--bulma-text-15-l); + --bulma-text-80-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-80-invert-l), 1); + --bulma-text-85: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-l), 1); + --bulma-text-85-invert-l: var(--bulma-text-20-l); + --bulma-text-85-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-85-invert-l), 1); + --bulma-text-90: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-l), 1); + --bulma-text-90-invert-l: var(--bulma-text-20-l); + --bulma-text-90-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-90-invert-l), 1); + --bulma-text-95: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-l), 1); + --bulma-text-95-invert-l: var(--bulma-text-25-l); + --bulma-text-95-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-95-invert-l), 1); + --bulma-text-100: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-l), 1); + --bulma-text-100-invert-l: var(--bulma-text-30-l); + --bulma-text-100-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-100-invert-l), 1); + --bulma-text-invert-l: var(--bulma-text-100-l); + --bulma-text-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-invert-l), 1); + --bulma-text-light-l: var(--bulma-text-90-l); + --bulma-text-light: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-l), 1); + --bulma-text-light-invert-l: var(--bulma-text-20-l); + --bulma-text-light-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-light-invert-l), 1); + --bulma-text-dark-l: var(--bulma-text-10-l); + --bulma-text-dark: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-l), 1); + --bulma-text-dark-invert-l: var(--bulma-text-70-l); + --bulma-text-dark-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-dark-invert-l), 1); + --bulma-text-soft: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-l), 1); + --bulma-text-bold: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-l), 1); + --bulma-text-soft-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-soft-invert-l), 1); + --bulma-text-bold-invert: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-bold-invert-l), 1); + --bulma-text-on-scheme-l: 29%; + --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1); + --bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1); + --bulma-primary-rgb: 171, 199, 255; + --bulma-primary-h: 220deg; + --bulma-primary-s: 100%; + --bulma-primary-l: 84%; + --bulma-primary-00-l: 0%; + --bulma-primary-05-l: 4%; + --bulma-primary-10-l: 9%; + --bulma-primary-15-l: 14%; + --bulma-primary-20-l: 19%; + --bulma-primary-25-l: 24%; + --bulma-primary-30-l: 29%; + --bulma-primary-35-l: 34%; + --bulma-primary-40-l: 39%; + --bulma-primary-45-l: 44%; + --bulma-primary-50-l: 49%; + --bulma-primary-55-l: 54%; + --bulma-primary-60-l: 59%; + --bulma-primary-65-l: 64%; + --bulma-primary-70-l: 69%; + --bulma-primary-75-l: 74%; + --bulma-primary-80-l: 79%; + --bulma-primary-85-l: 84%; + --bulma-primary-90-l: 89%; + --bulma-primary-95-l: 94%; + --bulma-primary-100-l: 100%; + --bulma-primary-00: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-l), 1); + --bulma-primary-00-invert-l: var(--bulma-primary-65-l); + --bulma-primary-00-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-00-invert-l), 1); + --bulma-primary-05: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-l), 1); + --bulma-primary-05-invert-l: var(--bulma-primary-70-l); + --bulma-primary-05-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-05-invert-l), 1); + --bulma-primary-10: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-l), 1); + --bulma-primary-10-invert-l: var(--bulma-primary-75-l); + --bulma-primary-10-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-10-invert-l), 1); + --bulma-primary-15: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-l), 1); + --bulma-primary-15-invert-l: var(--bulma-primary-80-l); + --bulma-primary-15-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-15-invert-l), 1); + --bulma-primary-20: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-l), 1); + --bulma-primary-20-invert-l: var(--bulma-primary-80-l); + --bulma-primary-20-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-20-invert-l), 1); + --bulma-primary-25: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-l), 1); + --bulma-primary-25-invert-l: var(--bulma-primary-90-l); + --bulma-primary-25-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-25-invert-l), 1); + --bulma-primary-30: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-l), 1); + --bulma-primary-30-invert-l: var(--bulma-primary-95-l); + --bulma-primary-30-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-30-invert-l), 1); + --bulma-primary-35: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-l), 1); + --bulma-primary-35-invert-l: var(--bulma-primary-100-l); + --bulma-primary-35-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-35-invert-l), 1); + --bulma-primary-40: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-l), 1); + --bulma-primary-40-invert-l: var(--bulma-primary-100-l); + --bulma-primary-40-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-40-invert-l), 1); + --bulma-primary-45: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-l), 1); + --bulma-primary-45-invert-l: var(--bulma-primary-100-l); + --bulma-primary-45-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-45-invert-l), 1); + --bulma-primary-50: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-l), 1); + --bulma-primary-50-invert-l: var(--bulma-primary-100-l); + --bulma-primary-50-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-50-invert-l), 1); + --bulma-primary-55: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-l), 1); + --bulma-primary-55-invert-l: var(--bulma-primary-100-l); + --bulma-primary-55-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-55-invert-l), 1); + --bulma-primary-60: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-l), 1); + --bulma-primary-60-invert-l: var(--bulma-primary-100-l); + --bulma-primary-60-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-60-invert-l), 1); + --bulma-primary-65: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-l), 1); + --bulma-primary-65-invert-l: var(--bulma-primary-00-l); + --bulma-primary-65-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-65-invert-l), 1); + --bulma-primary-70: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-l), 1); + --bulma-primary-70-invert-l: var(--bulma-primary-05-l); + --bulma-primary-70-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-70-invert-l), 1); + --bulma-primary-75: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-l), 1); + --bulma-primary-75-invert-l: var(--bulma-primary-10-l); + --bulma-primary-75-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-75-invert-l), 1); + --bulma-primary-80: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-l), 1); + --bulma-primary-80-invert-l: var(--bulma-primary-20-l); + --bulma-primary-80-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-80-invert-l), 1); + --bulma-primary-85: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-l), 1); + --bulma-primary-85-invert-l: var(--bulma-primary-20-l); + --bulma-primary-85-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-85-invert-l), 1); + --bulma-primary-90: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-l), 1); + --bulma-primary-90-invert-l: var(--bulma-primary-25-l); + --bulma-primary-90-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-90-invert-l), 1); + --bulma-primary-95: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-l), 1); + --bulma-primary-95-invert-l: var(--bulma-primary-30-l); + --bulma-primary-95-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-95-invert-l), 1); + --bulma-primary-100: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-l), 1); + --bulma-primary-100-invert-l: var(--bulma-primary-35-l); + --bulma-primary-100-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-100-invert-l), 1); + --bulma-primary-invert-l: var(--bulma-primary-20-l); + --bulma-primary-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-invert-l), 1); + --bulma-primary-light-l: var(--bulma-primary-90-l); + --bulma-primary-light: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-l), 1); + --bulma-primary-light-invert-l: var(--bulma-primary-25-l); + --bulma-primary-light-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-light-invert-l), 1); + --bulma-primary-dark-l: var(--bulma-primary-10-l); + --bulma-primary-dark: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-l), 1); + --bulma-primary-dark-invert-l: var(--bulma-primary-75-l); + --bulma-primary-dark-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-dark-invert-l), 1); + --bulma-primary-soft: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-l), 1); + --bulma-primary-bold: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-l), 1); + --bulma-primary-soft-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-soft-invert-l), 1); + --bulma-primary-bold-invert: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-bold-invert-l), 1); + --bulma-primary-on-scheme-l: 43.5294117647%; + --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1); + --bulma-link: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-base: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l), 1); + --bulma-link-rgb: 237, 177, 255; + --bulma-link-h: 286deg; + --bulma-link-s: 100%; + --bulma-link-l: 85%; + --bulma-link-00-l: 0%; + --bulma-link-05-l: 5%; + --bulma-link-10-l: 10%; + --bulma-link-15-l: 15%; + --bulma-link-20-l: 20%; + --bulma-link-25-l: 25%; + --bulma-link-30-l: 30%; + --bulma-link-35-l: 35%; + --bulma-link-40-l: 40%; + --bulma-link-45-l: 45%; + --bulma-link-50-l: 50%; + --bulma-link-55-l: 55%; + --bulma-link-60-l: 60%; + --bulma-link-65-l: 65%; + --bulma-link-70-l: 70%; + --bulma-link-75-l: 75%; + --bulma-link-80-l: 80%; + --bulma-link-85-l: 85%; + --bulma-link-90-l: 90%; + --bulma-link-95-l: 95%; + --bulma-link-100-l: 100%; + --bulma-link-00: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-l), 1); + --bulma-link-00-invert-l: var(--bulma-link-65-l); + --bulma-link-00-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-00-invert-l), 1); + --bulma-link-05: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-l), 1); + --bulma-link-05-invert-l: var(--bulma-link-70-l); + --bulma-link-05-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-05-invert-l), 1); + --bulma-link-10: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-l), 1); + --bulma-link-10-invert-l: var(--bulma-link-75-l); + --bulma-link-10-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-10-invert-l), 1); + --bulma-link-15: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-l), 1); + --bulma-link-15-invert-l: var(--bulma-link-80-l); + --bulma-link-15-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-15-invert-l), 1); + --bulma-link-20: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-l), 1); + --bulma-link-20-invert-l: var(--bulma-link-85-l); + --bulma-link-20-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-20-invert-l), 1); + --bulma-link-25: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-l), 1); + --bulma-link-25-invert-l: var(--bulma-link-90-l); + --bulma-link-25-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-25-invert-l), 1); + --bulma-link-30: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-l), 1); + --bulma-link-30-invert-l: var(--bulma-link-95-l); + --bulma-link-30-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-30-invert-l), 1); + --bulma-link-35: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-l), 1); + --bulma-link-35-invert-l: var(--bulma-link-100-l); + --bulma-link-35-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-35-invert-l), 1); + --bulma-link-40: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-l), 1); + --bulma-link-40-invert-l: var(--bulma-link-100-l); + --bulma-link-40-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-40-invert-l), 1); + --bulma-link-45: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-l), 1); + --bulma-link-45-invert-l: var(--bulma-link-100-l); + --bulma-link-45-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-45-invert-l), 1); + --bulma-link-50: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-l), 1); + --bulma-link-50-invert-l: var(--bulma-link-100-l); + --bulma-link-50-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-50-invert-l), 1); + --bulma-link-55: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-l), 1); + --bulma-link-55-invert-l: var(--bulma-link-100-l); + --bulma-link-55-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-55-invert-l), 1); + --bulma-link-60: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-l), 1); + --bulma-link-60-invert-l: var(--bulma-link-100-l); + --bulma-link-60-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-60-invert-l), 1); + --bulma-link-65: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-l), 1); + --bulma-link-65-invert-l: var(--bulma-link-00-l); + --bulma-link-65-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-65-invert-l), 1); + --bulma-link-70: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-l), 1); + --bulma-link-70-invert-l: var(--bulma-link-05-l); + --bulma-link-70-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-70-invert-l), 1); + --bulma-link-75: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-l), 1); + --bulma-link-75-invert-l: var(--bulma-link-10-l); + --bulma-link-75-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-75-invert-l), 1); + --bulma-link-80: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-l), 1); + --bulma-link-80-invert-l: var(--bulma-link-15-l); + --bulma-link-80-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-80-invert-l), 1); + --bulma-link-85: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-l), 1); + --bulma-link-85-invert-l: var(--bulma-link-20-l); + --bulma-link-85-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-85-invert-l), 1); + --bulma-link-90: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-l), 1); + --bulma-link-90-invert-l: var(--bulma-link-25-l); + --bulma-link-90-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-90-invert-l), 1); + --bulma-link-95: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-l), 1); + --bulma-link-95-invert-l: var(--bulma-link-30-l); + --bulma-link-95-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-95-invert-l), 1); + --bulma-link-100: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-l), 1); + --bulma-link-100-invert-l: var(--bulma-link-30-l); + --bulma-link-100-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-100-invert-l), 1); + --bulma-link-invert-l: var(--bulma-link-20-l); + --bulma-link-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-invert-l), 1); + --bulma-link-light-l: var(--bulma-link-90-l); + --bulma-link-light: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-l), 1); + --bulma-link-light-invert-l: var(--bulma-link-25-l); + --bulma-link-light-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-light-invert-l), 1); + --bulma-link-dark-l: var(--bulma-link-10-l); + --bulma-link-dark: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-l), 1); + --bulma-link-dark-invert-l: var(--bulma-link-75-l); + --bulma-link-dark-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-dark-invert-l), 1); + --bulma-link-soft: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-l), 1); + --bulma-link-bold: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-l), 1); + --bulma-link-soft-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-soft-invert-l), 1); + --bulma-link-bold-invert: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-bold-invert-l), 1); + --bulma-link-on-scheme-l: 39.7058823529%; + --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1); + --bulma-info: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-base: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l), 1); + --bulma-info-rgb: 103, 21, 239; + --bulma-info-h: 263deg; + --bulma-info-s: 87%; + --bulma-info-l: 51%; + --bulma-info-00-l: 1%; + --bulma-info-05-l: 6%; + --bulma-info-10-l: 11%; + --bulma-info-15-l: 16%; + --bulma-info-20-l: 21%; + --bulma-info-25-l: 26%; + --bulma-info-30-l: 31%; + --bulma-info-35-l: 36%; + --bulma-info-40-l: 41%; + --bulma-info-45-l: 46%; + --bulma-info-50-l: 51%; + --bulma-info-55-l: 56%; + --bulma-info-60-l: 61%; + --bulma-info-65-l: 66%; + --bulma-info-70-l: 71%; + --bulma-info-75-l: 76%; + --bulma-info-80-l: 81%; + --bulma-info-85-l: 86%; + --bulma-info-90-l: 91%; + --bulma-info-95-l: 96%; + --bulma-info-100-l: 100%; + --bulma-info-00: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-l), 1); + --bulma-info-00-invert-l: var(--bulma-info-70-l); + --bulma-info-00-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-00-invert-l), 1); + --bulma-info-05: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-l), 1); + --bulma-info-05-invert-l: var(--bulma-info-70-l); + --bulma-info-05-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-05-invert-l), 1); + --bulma-info-10: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-l), 1); + --bulma-info-10-invert-l: var(--bulma-info-75-l); + --bulma-info-10-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-10-invert-l), 1); + --bulma-info-15: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-l), 1); + --bulma-info-15-invert-l: var(--bulma-info-75-l); + --bulma-info-15-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-15-invert-l), 1); + --bulma-info-20: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-l), 1); + --bulma-info-20-invert-l: var(--bulma-info-80-l); + --bulma-info-20-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-20-invert-l), 1); + --bulma-info-25: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-l), 1); + --bulma-info-25-invert-l: var(--bulma-info-85-l); + --bulma-info-25-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-25-invert-l), 1); + --bulma-info-30: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-l), 1); + --bulma-info-30-invert-l: var(--bulma-info-85-l); + --bulma-info-30-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-30-invert-l), 1); + --bulma-info-35: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-l), 1); + --bulma-info-35-invert-l: var(--bulma-info-90-l); + --bulma-info-35-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-35-invert-l), 1); + --bulma-info-40: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-l), 1); + --bulma-info-40-invert-l: var(--bulma-info-95-l); + --bulma-info-40-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-40-invert-l), 1); + --bulma-info-45: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-l), 1); + --bulma-info-45-invert-l: var(--bulma-info-100-l); + --bulma-info-45-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-45-invert-l), 1); + --bulma-info-50: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-l), 1); + --bulma-info-50-invert-l: var(--bulma-info-100-l); + --bulma-info-50-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-50-invert-l), 1); + --bulma-info-55: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-l), 1); + --bulma-info-55-invert-l: var(--bulma-info-100-l); + --bulma-info-55-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-55-invert-l), 1); + --bulma-info-60: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-l), 1); + --bulma-info-60-invert-l: var(--bulma-info-100-l); + --bulma-info-60-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-60-invert-l), 1); + --bulma-info-65: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-l), 1); + --bulma-info-65-invert-l: var(--bulma-info-100-l); + --bulma-info-65-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-65-invert-l), 1); + --bulma-info-70: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-l), 1); + --bulma-info-70-invert-l: var(--bulma-info-05-l); + --bulma-info-70-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-70-invert-l), 1); + --bulma-info-75: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-l), 1); + --bulma-info-75-invert-l: var(--bulma-info-15-l); + --bulma-info-75-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-75-invert-l), 1); + --bulma-info-80: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-l), 1); + --bulma-info-80-invert-l: var(--bulma-info-20-l); + --bulma-info-80-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-80-invert-l), 1); + --bulma-info-85: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-l), 1); + --bulma-info-85-invert-l: var(--bulma-info-30-l); + --bulma-info-85-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-85-invert-l), 1); + --bulma-info-90: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-l), 1); + --bulma-info-90-invert-l: var(--bulma-info-35-l); + --bulma-info-90-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-90-invert-l), 1); + --bulma-info-95: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-l), 1); + --bulma-info-95-invert-l: var(--bulma-info-40-l); + --bulma-info-95-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-95-invert-l), 1); + --bulma-info-100: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-l), 1); + --bulma-info-100-invert-l: var(--bulma-info-45-l); + --bulma-info-100-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-100-invert-l), 1); + --bulma-info-invert-l: var(--bulma-info-100-l); + --bulma-info-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-invert-l), 1); + --bulma-info-light-l: var(--bulma-info-90-l); + --bulma-info-light: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-l), 1); + --bulma-info-light-invert-l: var(--bulma-info-35-l); + --bulma-info-light-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-light-invert-l), 1); + --bulma-info-dark-l: var(--bulma-info-10-l); + --bulma-info-dark: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-l), 1); + --bulma-info-dark-invert-l: var(--bulma-info-75-l); + --bulma-info-dark-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-dark-invert-l), 1); + --bulma-info-soft: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-l), 1); + --bulma-info-bold: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-l), 1); + --bulma-info-soft-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-soft-invert-l), 1); + --bulma-info-bold-invert: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-bold-invert-l), 1); + --bulma-info-on-scheme-l: 50.9803921569%; + --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1); + --bulma-success: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-base: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l), 1); + --bulma-success-rgb: 72, 199, 142; + --bulma-success-h: 153deg; + --bulma-success-s: 53%; + --bulma-success-l: 53%; + --bulma-success-00-l: 0%; + --bulma-success-05-l: 3%; + --bulma-success-10-l: 8%; + --bulma-success-15-l: 13%; + --bulma-success-20-l: 18%; + --bulma-success-25-l: 23%; + --bulma-success-30-l: 28%; + --bulma-success-35-l: 33%; + --bulma-success-40-l: 38%; + --bulma-success-45-l: 43%; + --bulma-success-50-l: 48%; + --bulma-success-55-l: 53%; + --bulma-success-60-l: 58%; + --bulma-success-65-l: 63%; + --bulma-success-70-l: 68%; + --bulma-success-75-l: 73%; + --bulma-success-80-l: 78%; + --bulma-success-85-l: 83%; + --bulma-success-90-l: 88%; + --bulma-success-95-l: 93%; + --bulma-success-100-l: 100%; + --bulma-success-00: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-l), 1); + --bulma-success-00-invert-l: var(--bulma-success-45-l); + --bulma-success-00-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-00-invert-l), 1); + --bulma-success-05: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-l), 1); + --bulma-success-05-invert-l: var(--bulma-success-45-l); + --bulma-success-05-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-05-invert-l), 1); + --bulma-success-10: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-l), 1); + --bulma-success-10-invert-l: var(--bulma-success-55-l); + --bulma-success-10-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-10-invert-l), 1); + --bulma-success-15: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-l), 1); + --bulma-success-15-invert-l: var(--bulma-success-75-l); + --bulma-success-15-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-15-invert-l), 1); + --bulma-success-20: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-l), 1); + --bulma-success-20-invert-l: var(--bulma-success-90-l); + --bulma-success-20-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-20-invert-l), 1); + --bulma-success-25: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-l), 1); + --bulma-success-25-invert-l: var(--bulma-success-100-l); + --bulma-success-25-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-25-invert-l), 1); + --bulma-success-30: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-l), 1); + --bulma-success-30-invert-l: var(--bulma-success-100-l); + --bulma-success-30-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-30-invert-l), 1); + --bulma-success-35: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-l), 1); + --bulma-success-35-invert-l: var(--bulma-success-100-l); + --bulma-success-35-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-35-invert-l), 1); + --bulma-success-40: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-l), 1); + --bulma-success-40-invert-l: var(--bulma-success-100-l); + --bulma-success-40-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-40-invert-l), 1); + --bulma-success-45: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-l), 1); + --bulma-success-45-invert-l: var(--bulma-success-05-l); + --bulma-success-45-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-45-invert-l), 1); + --bulma-success-50: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-l), 1); + --bulma-success-50-invert-l: var(--bulma-success-05-l); + --bulma-success-50-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-50-invert-l), 1); + --bulma-success-55: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-l), 1); + --bulma-success-55-invert-l: var(--bulma-success-10-l); + --bulma-success-55-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-55-invert-l), 1); + --bulma-success-60: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-l), 1); + --bulma-success-60-invert-l: var(--bulma-success-10-l); + --bulma-success-60-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-60-invert-l), 1); + --bulma-success-65: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-l), 1); + --bulma-success-65-invert-l: var(--bulma-success-10-l); + --bulma-success-65-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-65-invert-l), 1); + --bulma-success-70: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-l), 1); + --bulma-success-70-invert-l: var(--bulma-success-10-l); + --bulma-success-70-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-70-invert-l), 1); + --bulma-success-75: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-l), 1); + --bulma-success-75-invert-l: var(--bulma-success-15-l); + --bulma-success-75-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-75-invert-l), 1); + --bulma-success-80: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-l), 1); + --bulma-success-80-invert-l: var(--bulma-success-15-l); + --bulma-success-80-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-80-invert-l), 1); + --bulma-success-85: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-l), 1); + --bulma-success-85-invert-l: var(--bulma-success-15-l); + --bulma-success-85-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-85-invert-l), 1); + --bulma-success-90: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-l), 1); + --bulma-success-90-invert-l: var(--bulma-success-20-l); + --bulma-success-90-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-90-invert-l), 1); + --bulma-success-95: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-l), 1); + --bulma-success-95-invert-l: var(--bulma-success-20-l); + --bulma-success-95-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-95-invert-l), 1); + --bulma-success-100: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-l), 1); + --bulma-success-100-invert-l: var(--bulma-success-20-l); + --bulma-success-100-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-100-invert-l), 1); + --bulma-success-invert-l: var(--bulma-success-10-l); + --bulma-success-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-invert-l), 1); + --bulma-success-light-l: var(--bulma-success-90-l); + --bulma-success-light: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-l), 1); + --bulma-success-light-invert-l: var(--bulma-success-20-l); + --bulma-success-light-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-light-invert-l), 1); + --bulma-success-dark-l: var(--bulma-success-10-l); + --bulma-success-dark: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-l), 1); + --bulma-success-dark-invert-l: var(--bulma-success-55-l); + --bulma-success-dark-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-dark-invert-l), 1); + --bulma-success-soft: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-l), 1); + --bulma-success-bold: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-l), 1); + --bulma-success-soft-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-soft-invert-l), 1); + --bulma-success-bold-invert: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-bold-invert-l), 1); + --bulma-success-on-scheme-l: 23%; + --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1); + --bulma-warning: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-base: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-l), 1); + --bulma-warning-rgb: 255, 183, 15; + --bulma-warning-h: 42deg; + --bulma-warning-s: 100%; + --bulma-warning-l: 53%; + --bulma-warning-00-l: 0%; + --bulma-warning-05-l: 3%; + --bulma-warning-10-l: 8%; + --bulma-warning-15-l: 13%; + --bulma-warning-20-l: 18%; + --bulma-warning-25-l: 23%; + --bulma-warning-30-l: 28%; + --bulma-warning-35-l: 33%; + --bulma-warning-40-l: 38%; + --bulma-warning-45-l: 43%; + --bulma-warning-50-l: 48%; + --bulma-warning-55-l: 53%; + --bulma-warning-60-l: 58%; + --bulma-warning-65-l: 63%; + --bulma-warning-70-l: 68%; + --bulma-warning-75-l: 73%; + --bulma-warning-80-l: 78%; + --bulma-warning-85-l: 83%; + --bulma-warning-90-l: 88%; + --bulma-warning-95-l: 93%; + --bulma-warning-100-l: 100%; + --bulma-warning-00: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-l), 1); + --bulma-warning-00-invert-l: var(--bulma-warning-40-l); + --bulma-warning-00-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-00-invert-l), 1); + --bulma-warning-05: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-l), 1); + --bulma-warning-05-invert-l: var(--bulma-warning-45-l); + --bulma-warning-05-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-05-invert-l), 1); + --bulma-warning-10: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-l), 1); + --bulma-warning-10-invert-l: var(--bulma-warning-50-l); + --bulma-warning-10-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-10-invert-l), 1); + --bulma-warning-15: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-l), 1); + --bulma-warning-15-invert-l: var(--bulma-warning-70-l); + --bulma-warning-15-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-15-invert-l), 1); + --bulma-warning-20: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-l), 1); + --bulma-warning-20-invert-l: var(--bulma-warning-100-l); + --bulma-warning-20-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-20-invert-l), 1); + --bulma-warning-25: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-l), 1); + --bulma-warning-25-invert-l: var(--bulma-warning-100-l); + --bulma-warning-25-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-25-invert-l), 1); + --bulma-warning-30: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-l), 1); + --bulma-warning-30-invert-l: var(--bulma-warning-100-l); + --bulma-warning-30-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-30-invert-l), 1); + --bulma-warning-35: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-l), 1); + --bulma-warning-35-invert-l: var(--bulma-warning-100-l); + --bulma-warning-35-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-35-invert-l), 1); + --bulma-warning-40: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-l), 1); + --bulma-warning-40-invert-l: var(--bulma-warning-00-l); + --bulma-warning-40-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-40-invert-l), 1); + --bulma-warning-45: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-l), 1); + --bulma-warning-45-invert-l: var(--bulma-warning-05-l); + --bulma-warning-45-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-45-invert-l), 1); + --bulma-warning-50: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-l), 1); + --bulma-warning-50-invert-l: var(--bulma-warning-10-l); + --bulma-warning-50-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-50-invert-l), 1); + --bulma-warning-55: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-l), 1); + --bulma-warning-55-invert-l: var(--bulma-warning-10-l); + --bulma-warning-55-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-55-invert-l), 1); + --bulma-warning-60: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-l), 1); + --bulma-warning-60-invert-l: var(--bulma-warning-10-l); + --bulma-warning-60-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-60-invert-l), 1); + --bulma-warning-65: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-l), 1); + --bulma-warning-65-invert-l: var(--bulma-warning-10-l); + --bulma-warning-65-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-65-invert-l), 1); + --bulma-warning-70: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-l), 1); + --bulma-warning-70-invert-l: var(--bulma-warning-15-l); + --bulma-warning-70-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-70-invert-l), 1); + --bulma-warning-75: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-l), 1); + --bulma-warning-75-invert-l: var(--bulma-warning-15-l); + --bulma-warning-75-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-75-invert-l), 1); + --bulma-warning-80: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-l), 1); + --bulma-warning-80-invert-l: var(--bulma-warning-15-l); + --bulma-warning-80-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-80-invert-l), 1); + --bulma-warning-85: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-l), 1); + --bulma-warning-85-invert-l: var(--bulma-warning-15-l); + --bulma-warning-85-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-85-invert-l), 1); + --bulma-warning-90: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-l), 1); + --bulma-warning-90-invert-l: var(--bulma-warning-15-l); + --bulma-warning-90-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-90-invert-l), 1); + --bulma-warning-95: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-l), 1); + --bulma-warning-95-invert-l: var(--bulma-warning-15-l); + --bulma-warning-95-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-95-invert-l), 1); + --bulma-warning-100: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-l), 1); + --bulma-warning-100-invert-l: var(--bulma-warning-20-l); + --bulma-warning-100-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-100-invert-l), 1); + --bulma-warning-invert-l: var(--bulma-warning-10-l); + --bulma-warning-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-invert-l), 1); + --bulma-warning-light-l: var(--bulma-warning-90-l); + --bulma-warning-light: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-l), 1); + --bulma-warning-light-invert-l: var(--bulma-warning-15-l); + --bulma-warning-light-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-light-invert-l), 1); + --bulma-warning-dark-l: var(--bulma-warning-10-l); + --bulma-warning-dark: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-l), 1); + --bulma-warning-dark-invert-l: var(--bulma-warning-50-l); + --bulma-warning-dark-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-dark-invert-l), 1); + --bulma-warning-soft: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-l), 1); + --bulma-warning-bold: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-l), 1); + --bulma-warning-soft-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-soft-invert-l), 1); + --bulma-warning-bold-invert: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-bold-invert-l), 1); + --bulma-warning-on-scheme-l: 23%; + --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1); + --bulma-danger: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-base: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l), 1); + --bulma-danger-rgb: 255, 102, 133; + --bulma-danger-h: 348deg; + --bulma-danger-s: 100%; + --bulma-danger-l: 70%; + --bulma-danger-00-l: 0%; + --bulma-danger-05-l: 5%; + --bulma-danger-10-l: 10%; + --bulma-danger-15-l: 15%; + --bulma-danger-20-l: 20%; + --bulma-danger-25-l: 25%; + --bulma-danger-30-l: 30%; + --bulma-danger-35-l: 35%; + --bulma-danger-40-l: 40%; + --bulma-danger-45-l: 45%; + --bulma-danger-50-l: 50%; + --bulma-danger-55-l: 55%; + --bulma-danger-60-l: 60%; + --bulma-danger-65-l: 65%; + --bulma-danger-70-l: 70%; + --bulma-danger-75-l: 75%; + --bulma-danger-80-l: 80%; + --bulma-danger-85-l: 85%; + --bulma-danger-90-l: 90%; + --bulma-danger-95-l: 95%; + --bulma-danger-100-l: 100%; + --bulma-danger-00: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-l), 1); + --bulma-danger-00-invert-l: var(--bulma-danger-65-l); + --bulma-danger-00-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-00-invert-l), 1); + --bulma-danger-05: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-l), 1); + --bulma-danger-05-invert-l: var(--bulma-danger-70-l); + --bulma-danger-05-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-05-invert-l), 1); + --bulma-danger-10: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-l), 1); + --bulma-danger-10-invert-l: var(--bulma-danger-75-l); + --bulma-danger-10-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-10-invert-l), 1); + --bulma-danger-15: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-l), 1); + --bulma-danger-15-invert-l: var(--bulma-danger-80-l); + --bulma-danger-15-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-15-invert-l), 1); + --bulma-danger-20: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-l), 1); + --bulma-danger-20-invert-l: var(--bulma-danger-85-l); + --bulma-danger-20-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-20-invert-l), 1); + --bulma-danger-25: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-l), 1); + --bulma-danger-25-invert-l: var(--bulma-danger-90-l); + --bulma-danger-25-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-25-invert-l), 1); + --bulma-danger-30: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-l), 1); + --bulma-danger-30-invert-l: var(--bulma-danger-100-l); + --bulma-danger-30-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-30-invert-l), 1); + --bulma-danger-35: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-l), 1); + --bulma-danger-35-invert-l: var(--bulma-danger-100-l); + --bulma-danger-35-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-35-invert-l), 1); + --bulma-danger-40: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-l), 1); + --bulma-danger-40-invert-l: var(--bulma-danger-100-l); + --bulma-danger-40-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-40-invert-l), 1); + --bulma-danger-45: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-l), 1); + --bulma-danger-45-invert-l: var(--bulma-danger-100-l); + --bulma-danger-45-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-45-invert-l), 1); + --bulma-danger-50: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-l), 1); + --bulma-danger-50-invert-l: var(--bulma-danger-100-l); + --bulma-danger-50-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-50-invert-l), 1); + --bulma-danger-55: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-l), 1); + --bulma-danger-55-invert-l: var(--bulma-danger-100-l); + --bulma-danger-55-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-55-invert-l), 1); + --bulma-danger-60: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-l), 1); + --bulma-danger-60-invert-l: var(--bulma-danger-100-l); + --bulma-danger-60-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-60-invert-l), 1); + --bulma-danger-65: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-l), 1); + --bulma-danger-65-invert-l: var(--bulma-danger-00-l); + --bulma-danger-65-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-65-invert-l), 1); + --bulma-danger-70: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-l), 1); + --bulma-danger-70-invert-l: var(--bulma-danger-05-l); + --bulma-danger-70-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-70-invert-l), 1); + --bulma-danger-75: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-l), 1); + --bulma-danger-75-invert-l: var(--bulma-danger-10-l); + --bulma-danger-75-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-75-invert-l), 1); + --bulma-danger-80: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-l), 1); + --bulma-danger-80-invert-l: var(--bulma-danger-15-l); + --bulma-danger-80-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-80-invert-l), 1); + --bulma-danger-85: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-l), 1); + --bulma-danger-85-invert-l: var(--bulma-danger-20-l); + --bulma-danger-85-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-85-invert-l), 1); + --bulma-danger-90: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-l), 1); + --bulma-danger-90-invert-l: var(--bulma-danger-25-l); + --bulma-danger-90-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-90-invert-l), 1); + --bulma-danger-95: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-l), 1); + --bulma-danger-95-invert-l: var(--bulma-danger-25-l); + --bulma-danger-95-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-95-invert-l), 1); + --bulma-danger-100: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-l), 1); + --bulma-danger-100-invert-l: var(--bulma-danger-30-l); + --bulma-danger-100-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-100-invert-l), 1); + --bulma-danger-invert-l: var(--bulma-danger-05-l); + --bulma-danger-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-invert-l), 1); + --bulma-danger-light-l: var(--bulma-danger-90-l); + --bulma-danger-light: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-l), 1); + --bulma-danger-light-invert-l: var(--bulma-danger-25-l); + --bulma-danger-light-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-light-invert-l), 1); + --bulma-danger-dark-l: var(--bulma-danger-10-l); + --bulma-danger-dark: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-l), 1); + --bulma-danger-dark-invert-l: var(--bulma-danger-75-l); + --bulma-danger-dark-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-dark-invert-l), 1); + --bulma-danger-soft: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-l), 1); + --bulma-danger-bold: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-l), 1); + --bulma-danger-soft-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-soft-invert-l), 1); + --bulma-danger-bold-invert: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-bold-invert-l), 1); + --bulma-danger-on-scheme-l: 40%; + --bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1); + --bulma-black-bis: hsl(221, 14%, 9%); + --bulma-black-ter: hsl(221, 14%, 14%); + --bulma-grey-darker: hsl(221, 14%, 21%); + --bulma-grey-dark: hsl(221, 14%, 29%); + --bulma-grey: hsl(221, 14%, 48%); + --bulma-grey-light: hsl(221, 14%, 71%); + --bulma-grey-lighter: hsl(221, 14%, 86%); + --bulma-white-ter: hsl(221, 14%, 96%); + --bulma-white-bis: hsl(221, 14%, 98%); + --bulma-shadow-h: 221deg; + --bulma-shadow-s: 14%; + --bulma-shadow-l: 4%; + --bulma-size-1: 3rem; + --bulma-size-2: 2.5rem; + --bulma-size-3: 2rem; + --bulma-size-4: 1.5rem; + --bulma-size-5: 1.25rem; + --bulma-size-6: 1rem; + --bulma-size-7: 0.75rem; + --bulma-scheme-main: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l)); + --bulma-scheme-main-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l)); + --bulma-scheme-main-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l)); + --bulma-background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l)); + --bulma-background-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-hover-background-l-delta))); + --bulma-background-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-active-background-l-delta))); + --bulma-border-weak: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l)); + --bulma-border: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l)); + --bulma-border-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-hover-border-l-delta))); + --bulma-border-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-active-border-l-delta))); + --bulma-text-weak: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l)); + --bulma-text: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l)); + --bulma-text-strong: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l)); + --bulma-scheme-invert-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-ter-l)); + --bulma-scheme-invert-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-bis-l)); + --bulma-scheme-invert: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l)); + --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)); + --bulma-link-text: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l)); + --bulma-link-text-hover: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-hover-color-l-delta))); + --bulma-link-text-active: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-active-color-l-delta))); + --bulma-focus-h: var(--bulma-link-h); + --bulma-focus-s: var(--bulma-link-s); + --bulma-focus-l: var(--bulma-link-l); + --bulma-focus-offset: 1px; + --bulma-focus-style: solid; + --bulma-focus-width: 2px; + --bulma-focus-shadow-size: 0 0 0 0.1875em; + --bulma-focus-shadow-alpha: 0.25; + --bulma-code: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l)); + --bulma-code-background: var(--bulma-background); + --bulma-pre: var(--bulma-text); + --bulma-pre-background: var(--bulma-background); + --bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1), 0 0px 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.02); +} + +[data-theme=dark], +.theme-dark { + --bulma-white-on-scheme-l: 100%; + --bulma-white-on-scheme: hsla(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l), 1); + --bulma-black-on-scheme-l: 0%; + --bulma-black-on-scheme: hsla(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l), 1); + --bulma-light-on-scheme-l: 96%; + --bulma-light-on-scheme: hsla(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l), 1); + --bulma-dark-on-scheme-l: 56%; + --bulma-dark-on-scheme: hsla(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l), 1); + --bulma-text-on-scheme-l: 54%; + --bulma-text-on-scheme: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l), 1); + --bulma-primary-on-scheme-l: 83.5294117647%; + --bulma-primary-on-scheme: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l), 1); + --bulma-link-on-scheme-l: 84.7058823529%; + --bulma-link-on-scheme: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 1); + --bulma-info-on-scheme-l: 70.9803921569%; + --bulma-info-on-scheme: hsla(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l), 1); + --bulma-success-on-scheme-l: 53%; + --bulma-success-on-scheme: hsla(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l), 1); + --bulma-warning-on-scheme-l: 53%; + --bulma-warning-on-scheme: hsla(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l), 1); + --bulma-danger-on-scheme-l: 70%; + --bulma-danger-on-scheme: hsla(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l), 1); + --bulma-scheme-brightness: dark; + --bulma-scheme-main-l: 9%; + --bulma-scheme-main-bis-l: 11%; + --bulma-scheme-main-ter-l: 13%; + --bulma-soft-l: 20%; + --bulma-bold-l: 90%; + --bulma-soft-invert-l: 90%; + --bulma-bold-invert-l: 20%; + --bulma-background-l: 14%; + --bulma-border-weak-l: 21%; + --bulma-border-l: 24%; + --bulma-text-weak-l: 53%; + --bulma-text-l: 71%; + --bulma-text-strong-l: 93%; + --bulma-text-title-l: 100%; + --bulma-hover-background-l-delta: 5%; + --bulma-active-background-l-delta: 10%; + --bulma-hover-border-l-delta: 10%; + --bulma-active-border-l-delta: 20%; + --bulma-hover-color-l-delta: 5%; + --bulma-active-color-l-delta: 10%; + --bulma-shadow-h: 0deg; + --bulma-shadow-s: 0%; + --bulma-shadow-l: 100%; + --bulma-scheme-main: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l)); + --bulma-scheme-main-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l)); + --bulma-scheme-main-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l)); + --bulma-background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l)); + --bulma-background-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-hover-background-l-delta))); + --bulma-background-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-background-l) + var(--bulma-active-background-l-delta))); + --bulma-border-weak: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l)); + --bulma-border: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l)); + --bulma-border-hover: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-hover-border-l-delta))); + --bulma-border-active: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), calc(var(--bulma-border-l) + var(--bulma-active-border-l-delta))); + --bulma-text-weak: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l)); + --bulma-text: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l)); + --bulma-text-strong: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l)); + --bulma-scheme-invert-ter: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-ter-l)); + --bulma-scheme-invert-bis: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-bis-l)); + --bulma-scheme-invert: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l)); + --bulma-link: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l)); + --bulma-link-text: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l)); + --bulma-link-text-hover: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-hover-color-l-delta))); + --bulma-link-text-active: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-link-on-scheme-l) + var(--bulma-active-color-l-delta))); + --bulma-focus-h: var(--bulma-link-h); + --bulma-focus-s: var(--bulma-link-s); + --bulma-focus-l: var(--bulma-link-l); + --bulma-focus-offset: 1px; + --bulma-focus-style: solid; + --bulma-focus-width: 2px; + --bulma-focus-shadow-size: 0 0 0 0.1875em; + --bulma-focus-shadow-alpha: 0.25; + --bulma-code: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l)); + --bulma-code-background: var(--bulma-background); + --bulma-pre: var(--bulma-text); + --bulma-pre-background: var(--bulma-background); + --bulma-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.1), 0 0px 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.02); +} + +/* 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; +} + +:root { + --bulma-body-background-color: var(--bulma-scheme-main); + --bulma-body-size: 1em; + --bulma-body-min-width: 300px; + --bulma-body-rendering: optimizeLegibility; + --bulma-body-family: var(--bulma-family-primary); + --bulma-body-overflow-x: hidden; + --bulma-body-overflow-y: scroll; + --bulma-body-color: var(--bulma-text); + --bulma-body-font-size: 1em; + --bulma-body-weight: var(--bulma-weight-normal); + --bulma-body-line-height: 1.5; + --bulma-code-family: var(--bulma-family-code); + --bulma-code-padding: 0.25em 0.5em 0.25em; + --bulma-code-weight: normal; + --bulma-code-size: 0.875em; + --bulma-small-font-size: 0.875em; + --bulma-hr-background-color: var(--bulma-background); + --bulma-hr-height: 2px; + --bulma-hr-margin: 1.5rem 0; + --bulma-strong-color: var(--bulma-text-strong); + --bulma-strong-weight: var(--bulma-weight-semibold); + --bulma-pre-font-size: 0.875em; + --bulma-pre-padding: 1.25rem 1.5rem; + --bulma-pre-code-font-size: 1em; +} + +html { + background-color: var(--bulma-body-background-color); + font-size: var(--bulma-body-size); + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + min-width: var(--bulma-body-min-width); + overflow-x: var(--bulma-body-overflow-x); + overflow-y: var(--bulma-body-overflow-y); + text-rendering: var(--bulma-body-rendering); + text-size-adjust: 100%; +} + +article, +aside, +figure, +footer, +header, +hgroup, +section { + display: block; +} + +body, +button, +input, +optgroup, +select, +textarea { + font-family: var(--bulma-body-family); +} + +code, +pre { + -moz-osx-font-smoothing: auto; + -webkit-font-smoothing: auto; + font-family: var(--bulma-code-family); +} + +body { + color: var(--bulma-body-color); + font-size: var(--bulma-body-font-size); + font-weight: var(--bulma-body-weight); + line-height: var(--bulma-body-line-height); +} + +a, +button { + cursor: pointer; +} +a:focus-visible, +button:focus-visible { + outline-color: hsl(var(--bulma-focus-h), var(--bulma-focus-s), var(--bulma-focus-l)); + outline-offset: var(--bulma-focus-offset); + outline-style: var(--bulma-focus-style); + outline-width: var(--bulma-focus-width); +} +a:focus-visible:active, +button:focus-visible:active { + outline-width: 1px; +} +a:active, +button:active { + outline-width: 1px; +} + +a { + color: var(--bulma-link-text); + cursor: pointer; + text-decoration: none; + transition-duration: var(--bulma-duration); + transition-property: background-color, border-color, color; +} +a strong { + color: currentColor; +} + +button { + appearance: none; + background: none; + border: none; + color: inherit; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; + transition-duration: var(--bulma-duration); + transition-property: background-color, border-color, color; +} + +code { + background-color: var(--bulma-code-background); + border-radius: 0.5em; + color: var(--bulma-code); + font-size: var(--bulma-code-size); + font-weight: var(--bulma-code-weight); + padding: var(--bulma-code-padding); +} + +hr { + background-color: var(--bulma-hr-background-color); + border: none; + display: block; + height: var(--bulma-hr-height); + margin: var(--bulma-hr-margin); +} + +img { + height: auto; + max-width: 100%; +} + +input[type=checkbox], +input[type=radio] { + vertical-align: baseline; +} + +small { + font-size: var(--bulma-small-font-size); +} + +span { + font-style: inherit; + font-weight: inherit; +} + +strong { + color: var(--bulma-strong-color); + font-weight: var(--bulma-strong-weight); +} + +svg { + height: auto; + width: auto; +} + +fieldset { + border: none; +} + +pre { + -webkit-overflow-scrolling: touch; + background-color: var(--bulma-pre-background); + color: var(--bulma-pre); + font-size: var(--bulma-pre-font-size); + overflow-x: auto; + padding: var(--bulma-pre-padding); + white-space: pre; + word-wrap: normal; +} +pre code { + background-color: transparent; + color: currentColor; + font-size: var(--bulma-pre-code-font-size); + padding: 0; +} + +table td, +table th { + vertical-align: top; +} +table td:not([align]), +table th:not([align]) { + text-align: inherit; +} +table th { + color: var(--bulma-text-strong); +} + +@keyframes spinAround { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} +@keyframes pulsate { + 50% { + opacity: 0.5; + } +} +/* Bulma Elements */ +.navbar-link:not(.is-arrowless)::after, .select:not(.is-multiple):not(.is-loading)::after { + border: 0.125em solid var(--bulma-link); + 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; + transition-duration: var(--bulma-duration); + transition-property: border-color; + width: 0.625em; +} + +.skeleton-block:not(:last-child), .media:not(:last-child), .level:not(:last-child), .fixed-grid:not(:last-child), .grid:not(:last-child), .tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .card:not(:last-child), .breadcrumb:not(:last-child), .field:not(:last-child), .file:not(:last-child), .title:not(:last-child), +.subtitle:not(:last-child), .tags:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .buttons:not(:last-child), .box:not(:last-child), .block:not(:last-child) { + margin-bottom: var(--bulma-block-spacing); +} + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis, .file-cta, +.file-name, .select select, .input, .textarea, .button { + align-items: center; + appearance: none; + border-color: transparent; + border-style: solid; + border-width: var(--bulma-control-border-width); + border-radius: var(--bulma-control-radius); + box-shadow: none; + display: inline-flex; + font-size: var(--bulma-control-size); + height: var(--bulma-control-height); + justify-content: flex-start; + line-height: var(--bulma-control-line-height); + padding-bottom: var(--bulma-control-padding-vertical); + padding-left: var(--bulma-control-padding-horizontal); + padding-right: var(--bulma-control-padding-horizontal); + padding-top: var(--bulma-control-padding-vertical); + position: relative; + transition-duration: var(--bulma-duration); + transition-property: background-color, border-color, box-shadow, color; + vertical-align: top; +} +.pagination-previous:focus, +.pagination-next:focus, +.pagination-link:focus, +.pagination-ellipsis:focus, .file-cta:focus, +.file-name:focus, .select select:focus, .input:focus, .textarea:focus, .button:focus, .pagination-previous:focus-visible, +.pagination-next:focus-visible, +.pagination-link:focus-visible, +.pagination-ellipsis:focus-visible, .file-cta:focus-visible, +.file-name:focus-visible, .select select:focus-visible, .input:focus-visible, .textarea:focus-visible, .button:focus-visible, .pagination-previous:focus-within, +.pagination-next:focus-within, +.pagination-link:focus-within, +.pagination-ellipsis:focus-within, .file-cta:focus-within, +.file-name:focus-within, .select select:focus-within, .input:focus-within, .textarea:focus-within, .button:focus-within, .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.input, .is-focused.textarea, .is-focused.button, .pagination-previous:active, +.pagination-next:active, +.pagination-link:active, +.pagination-ellipsis:active, .file-cta:active, +.file-name:active, .select select:active, .input:active, .textarea: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.input, .is-active.textarea, .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].input, [disabled].textarea, [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] .input, fieldset[disabled] .textarea, fieldset[disabled] .button { + cursor: not-allowed; +} + +.modal-close { + --bulma-delete-dimensions: 1.25rem; + --bulma-delete-background-l: 0%; + --bulma-delete-background-alpha: 0.5; + --bulma-delete-color: var(--bulma-white); + appearance: none; + background-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-delete-background-l), var(--bulma-delete-background-alpha)); + border: none; + border-radius: var(--bulma-radius-rounded); + cursor: pointer; + pointer-events: auto; + display: inline-flex; + flex-grow: 0; + flex-shrink: 0; + font-size: 1em; + height: var(--bulma-delete-dimensions); + max-height: var(--bulma-delete-dimensions); + max-width: var(--bulma-delete-dimensions); + min-height: var(--bulma-delete-dimensions); + min-width: var(--bulma-delete-dimensions); + outline: none; + position: relative; + vertical-align: top; + width: var(--bulma-delete-dimensions); +} +.modal-close::before, .modal-close::after { + background-color: var(--bulma-delete-color); + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; +} +.modal-close::before { + height: 2px; + width: 50%; +} +.modal-close::after { + height: 50%; + width: 2px; +} +.modal-close:hover, .modal-close:focus { + --bulma-delete-background-alpha: 0.4; +} +.modal-close:active { + --bulma-delete-background-alpha: 0.5; +} +.is-small.modal-close { + --bulma-delete-dimensions: 1rem; +} +.is-medium.modal-close { + --bulma-delete-dimensions: 1.5rem; +} +.is-large.modal-close { + --bulma-delete-dimensions: 2rem; +} + +.control.is-loading::after, .select.is-loading::after, .button.is-loading::after { + animation: spinAround 500ms infinite linear; + border: 2px solid var(--bulma-loading-color); + border-radius: var(--bulma-radius-rounded); + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +.is-overlay, .hero-video, .modal, .modal-background { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; +} + +.navbar-burger, .menu-list a, +.menu-list button, +.menu-list .menu-item { + appearance: none; + background: none; + border: none; + color: inherit; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + +.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; +} + +.box { + --bulma-box-background-color: var(--bulma-scheme-main); + --bulma-box-color: var(--bulma-text); + --bulma-box-radius: var(--bulma-radius-large); + --bulma-box-shadow: var(--bulma-shadow); + --bulma-box-padding: 1.25rem; + --bulma-box-link-hover-shadow: 0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px var(--bulma-link); + --bulma-box-link-active-shadow: inset 0 1px 2px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2), 0 0 0 1px var(--bulma-link); +} + +.box { + background-color: var(--bulma-box-background-color); + border-radius: var(--bulma-box-radius); + box-shadow: var(--bulma-box-shadow); + color: var(--bulma-box-color); + display: block; + padding: var(--bulma-box-padding); +} + +a.box:hover, a.box:focus { + box-shadow: var(--bulma-box-link-hover-shadow); +} +a.box:active { + box-shadow: var(--bulma-box-link-active-shadow); +} + +.button { + --bulma-button-family: false; + --bulma-button-weight: var(--bulma-weight-medium); + --bulma-button-border-color: var(--bulma-border); + --bulma-button-border-style: solid; + --bulma-button-border-width: var(--bulma-control-border-width); + --bulma-button-padding-vertical: 0.5em; + --bulma-button-padding-horizontal: 1em; + --bulma-button-focus-border-color: var(--bulma-link-focus-border); + --bulma-button-focus-box-shadow-size: 0 0 0 0.125em; + --bulma-button-focus-box-shadow-color: hsla(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 0.25); + --bulma-button-active-color: var(--bulma-link-active); + --bulma-button-active-border-color: var(--bulma-link-active-border); + --bulma-button-text-color: var(--bulma-text); + --bulma-button-text-decoration: underline; + --bulma-button-text-hover-background-color: var(--bulma-background); + --bulma-button-text-hover-color: var(--bulma-text-strong); + --bulma-button-ghost-background: none; + --bulma-button-ghost-border-color: transparent; + --bulma-button-ghost-color: var(--bulma-link-text); + --bulma-button-ghost-decoration: none; + --bulma-button-ghost-hover-color: var(--bulma-link); + --bulma-button-ghost-hover-decoration: underline; + --bulma-button-disabled-background-color: var(--bulma-scheme-main); + --bulma-button-disabled-border-color: var(--bulma-border); + --bulma-button-disabled-shadow: none; + --bulma-button-disabled-opacity: 0.5; + --bulma-button-static-color: var(--bulma-text-weak); + --bulma-button-static-background-color: var(--bulma-scheme-main-ter); + --bulma-button-static-border-color: var(--bulma-border); +} + +.button { + --bulma-button-h: var(--bulma-scheme-h); + --bulma-button-s: var(--bulma-scheme-s); + --bulma-button-l: var(--bulma-scheme-main-l); + --bulma-button-background-l: var(--bulma-scheme-main-l); + --bulma-button-background-l-delta: 0%; + --bulma-button-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-button-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-button-color-l: var(--bulma-text-strong-l); + --bulma-button-border-l: var(--bulma-border-l); + --bulma-button-border-l-delta: 0%; + --bulma-button-hover-border-l-delta: var(--bulma-hover-border-l-delta); + --bulma-button-active-border-l-delta: var(--bulma-active-border-l-delta); + --bulma-button-focus-border-l-delta: var(--bulma-focus-border-l-delta); + --bulma-button-outer-shadow-h: 0; + --bulma-button-outer-shadow-s: 0%; + --bulma-button-outer-shadow-l: 20%; + --bulma-button-outer-shadow-a: 0.05; + --bulma-loading-color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l)); + background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-background-l) + var(--bulma-button-background-l-delta))); + border-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-border-l) + var(--bulma-button-border-l-delta))); + border-style: var(--bulma-button-border-style); + border-width: var(--bulma-button-border-width); + box-shadow: 0px 0.0625em 0.125em hsla(var(--bulma-button-outer-shadow-h), var(--bulma-button-outer-shadow-s), var(--bulma-button-outer-shadow-l), var(--bulma-button-outer-shadow-a)), 0px 0.125em 0.25em hsla(var(--bulma-button-outer-shadow-h), var(--bulma-button-outer-shadow-s), var(--bulma-button-outer-shadow-l), var(--bulma-button-outer-shadow-a)); + color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-color-l)); + cursor: pointer; + font-weight: var(--bulma-button-weight); + height: auto; + justify-content: center; + padding-bottom: calc(var(--bulma-button-padding-vertical) - var(--bulma-button-border-width)); + padding-left: calc(var(--bulma-button-padding-horizontal) - var(--bulma-button-border-width)); + padding-right: calc(var(--bulma-button-padding-horizontal) - var(--bulma-button-border-width)); + padding-top: calc(var(--bulma-button-padding-vertical) - var(--bulma-button-border-width)); + 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-inline-start: calc(-0.5 * var(--bulma-button-padding-horizontal)); + margin-inline-end: calc(var(--bulma-button-padding-horizontal) * 0.25); +} +.button .icon:last-child:not(:first-child) { + margin-inline-start: calc(var(--bulma-button-padding-horizontal) * 0.25); + margin-inline-end: calc(-0.5 * var(--bulma-button-padding-horizontal)); +} +.button .icon:first-child:last-child { + margin-inline-start: calc(-0.5 * var(--bulma-button-padding-horizontal)); + margin-inline-end: calc(-0.5 * var(--bulma-button-padding-horizontal)); +} +.button:hover, .button.is-hovered { + --bulma-button-background-l-delta: var(--bulma-button-hover-background-l-delta); + --bulma-button-border-l-delta: var(--bulma-button-hover-border-l-delta); +} +.button:focus-visible, .button.is-focused { + --bulma-button-border-width: 1px; + border-color: hsl(var(--bulma-focus-h), var(--bulma-focus-s), var(--bulma-focus-l)); + box-shadow: var(--bulma-focus-shadow-size) hsla(var(--bulma-focus-h), var(--bulma-focus-s), var(--bulma-focus-l), var(--bulma-focus-shadow-alpha)); +} +.button:active, .button.is-active { + --bulma-button-background-l-delta: var(--bulma-button-active-background-l-delta); + --bulma-button-border-l-delta: var(--bulma-button-active-border-l-delta); + --bulma-button-outer-shadow-a: 0; +} +.button[disabled], fieldset[disabled] .button { + background-color: var(--bulma-button-disabled-background-color); + border-color: var(--bulma-button-disabled-border-color); + box-shadow: var(--bulma-button-disabled-shadow); + opacity: var(--bulma-button-disabled-opacity); +} +.button.is-white { + --bulma-button-h: var(--bulma-white-h); + --bulma-button-s: var(--bulma-white-s); + --bulma-button-l: var(--bulma-white-l); + --bulma-button-background-l: var(--bulma-white-l); + --bulma-button-border-l: var(--bulma-white-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-white-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-white:focus-visible, .button.is-white.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-white.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-white.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-white[disabled], fieldset[disabled] .button.is-white { + background-color: var(--bulma-white); + border-color: var(--bulma-white); + box-shadow: none; +} +.button.is-black { + --bulma-button-h: var(--bulma-black-h); + --bulma-button-s: var(--bulma-black-s); + --bulma-button-l: var(--bulma-black-l); + --bulma-button-background-l: var(--bulma-black-l); + --bulma-button-border-l: var(--bulma-black-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-black-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-black:focus-visible, .button.is-black.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-black.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-black.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-black[disabled], fieldset[disabled] .button.is-black { + background-color: var(--bulma-black); + border-color: var(--bulma-black); + box-shadow: none; +} +.button.is-light { + --bulma-button-h: var(--bulma-light-h); + --bulma-button-s: var(--bulma-light-s); + --bulma-button-l: var(--bulma-light-l); + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-border-l: var(--bulma-light-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-light-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-light:focus-visible, .button.is-light.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-light.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-light.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-light[disabled], fieldset[disabled] .button.is-light { + background-color: var(--bulma-light); + border-color: var(--bulma-light); + box-shadow: none; +} +.button.is-dark { + --bulma-button-h: var(--bulma-dark-h); + --bulma-button-s: var(--bulma-dark-s); + --bulma-button-l: var(--bulma-dark-l); + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-border-l: var(--bulma-dark-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-dark-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-dark:focus-visible, .button.is-dark.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-dark.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-dark.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-dark[disabled], fieldset[disabled] .button.is-dark { + background-color: var(--bulma-dark); + border-color: var(--bulma-dark); + box-shadow: none; +} +.button.is-text { + --bulma-button-h: var(--bulma-text-h); + --bulma-button-s: var(--bulma-text-s); + --bulma-button-l: var(--bulma-text-l); + --bulma-button-background-l: var(--bulma-text-l); + --bulma-button-border-l: var(--bulma-text-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-text-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-text:focus-visible, .button.is-text.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-text.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-text-light-invert-l); +} +.button.is-text.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-text-dark-invert-l); +} +.button.is-text.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-text.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-text[disabled], fieldset[disabled] .button.is-text { + background-color: var(--bulma-text); + border-color: var(--bulma-text); + box-shadow: none; +} +.button.is-primary { + --bulma-button-h: var(--bulma-primary-h); + --bulma-button-s: var(--bulma-primary-s); + --bulma-button-l: var(--bulma-primary-l); + --bulma-button-background-l: var(--bulma-primary-l); + --bulma-button-border-l: var(--bulma-primary-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-primary-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-primary:focus-visible, .button.is-primary.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-primary.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-primary-light-invert-l); +} +.button.is-primary.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-primary-dark-invert-l); +} +.button.is-primary.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-primary.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-primary[disabled], fieldset[disabled] .button.is-primary { + background-color: var(--bulma-primary); + border-color: var(--bulma-primary); + box-shadow: none; +} +.button.is-link { + --bulma-button-h: var(--bulma-link-h); + --bulma-button-s: var(--bulma-link-s); + --bulma-button-l: var(--bulma-link-l); + --bulma-button-background-l: var(--bulma-link-l); + --bulma-button-border-l: var(--bulma-link-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-link-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-link:focus-visible, .button.is-link.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-link.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-link-light-invert-l); +} +.button.is-link.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-link-dark-invert-l); +} +.button.is-link.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-link.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-link[disabled], fieldset[disabled] .button.is-link { + background-color: var(--bulma-link); + border-color: var(--bulma-link); + box-shadow: none; +} +.button.is-info { + --bulma-button-h: var(--bulma-info-h); + --bulma-button-s: var(--bulma-info-s); + --bulma-button-l: var(--bulma-info-l); + --bulma-button-background-l: var(--bulma-info-l); + --bulma-button-border-l: var(--bulma-info-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-info-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-info:focus-visible, .button.is-info.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-info.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-info-light-invert-l); +} +.button.is-info.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-info-dark-invert-l); +} +.button.is-info.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-info.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-info[disabled], fieldset[disabled] .button.is-info { + background-color: var(--bulma-info); + border-color: var(--bulma-info); + box-shadow: none; +} +.button.is-success { + --bulma-button-h: var(--bulma-success-h); + --bulma-button-s: var(--bulma-success-s); + --bulma-button-l: var(--bulma-success-l); + --bulma-button-background-l: var(--bulma-success-l); + --bulma-button-border-l: var(--bulma-success-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-success-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-success:focus-visible, .button.is-success.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-success.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-success-light-invert-l); +} +.button.is-success.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-success-dark-invert-l); +} +.button.is-success.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-success.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-success[disabled], fieldset[disabled] .button.is-success { + background-color: var(--bulma-success); + border-color: var(--bulma-success); + box-shadow: none; +} +.button.is-warning { + --bulma-button-h: var(--bulma-warning-h); + --bulma-button-s: var(--bulma-warning-s); + --bulma-button-l: var(--bulma-warning-l); + --bulma-button-background-l: var(--bulma-warning-l); + --bulma-button-border-l: var(--bulma-warning-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-warning-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-warning:focus-visible, .button.is-warning.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-warning.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-warning-light-invert-l); +} +.button.is-warning.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-warning-dark-invert-l); +} +.button.is-warning.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-warning.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-warning[disabled], fieldset[disabled] .button.is-warning { + background-color: var(--bulma-warning); + border-color: var(--bulma-warning); + box-shadow: none; +} +.button.is-danger { + --bulma-button-h: var(--bulma-danger-h); + --bulma-button-s: var(--bulma-danger-s); + --bulma-button-l: var(--bulma-danger-l); + --bulma-button-background-l: var(--bulma-danger-l); + --bulma-button-border-l: var(--bulma-danger-l); + --bulma-button-border-width: 0px; + --bulma-button-color-l: var(--bulma-danger-invert-l); + --bulma-button-outer-shadow-a: 0; +} +.button.is-danger:focus-visible, .button.is-danger.is-focused { + --bulma-button-border-width: 1px; +} +.button.is-danger.is-light { + --bulma-button-background-l: var(--bulma-light-l); + --bulma-button-color-l: var(--bulma-danger-light-invert-l); +} +.button.is-danger.is-dark { + --bulma-button-background-l: var(--bulma-dark-l); + --bulma-button-color-l: var(--bulma-danger-dark-invert-l); +} +.button.is-danger.is-soft { + --bulma-button-background-l: var(--bulma-soft-l); + --bulma-button-color-l: var(--bulma-soft-invert-l); +} +.button.is-danger.is-bold { + --bulma-button-background-l: var(--bulma-bold-l); + --bulma-button-color-l: var(--bulma-bold-invert-l); +} +.button.is-danger[disabled], fieldset[disabled] .button.is-danger { + background-color: var(--bulma-danger); + border-color: var(--bulma-danger); + box-shadow: none; +} +.button.is-outlined { + --bulma-button-border-width: max(1px, 0.0625em); + background-color: transparent; + border-color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l)); + color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-l)); +} +.button.is-outlined:hover { + --bulma-button-border-width: max(2px, 0.125em); + --bulma-button-outer-shadow-alpha: 1; +} +.button.is-inverted { + background-color: hsl(var(--bulma-button-h), var(--bulma-button-s), calc(var(--bulma-button-color-l) + var(--bulma-button-background-l-delta))); + color: hsl(var(--bulma-button-h), var(--bulma-button-s), var(--bulma-button-background-l)); +} +.button.is-text { + background-color: transparent; + border-color: transparent; + color: var(--bulma-button-text-color); + text-decoration: var(--bulma-button-text-decoration); +} +.button.is-text:hover, .button.is-text.is-hovered { + background-color: var(--bulma-button-text-hover-background-color); + color: var(--bulma-button-text-hover-color); +} +.button.is-text:active, .button.is-text.is-active { + color: var(--bulma-button-text-hover-color); +} +.button.is-text[disabled], fieldset[disabled] .button.is-text { + background-color: transparent; + border-color: transparent; + box-shadow: none; +} +.button.is-ghost { + background: var(--bulma-button-ghost-background); + border-color: var(--bulma-button-ghost-border-color); + box-shadow: none; + color: var(--bulma-button-ghost-color); + text-decoration: var(--bulma-button-ghost-decoration); +} +.button.is-ghost:hover, .button.is-ghost.is-hovered { + color: var(--bulma-button-ghost-hover-color); + text-decoration: var(--bulma-button-ghost-hover-decoration); +} +.button.is-small { + --bulma-control-size: var(--bulma-size-small); + --bulma-control-radius: var(--bulma-radius-small); +} +.button.is-normal { + --bulma-control-size: var(--bulma-size-normal); + --bulma-control-radius: var(--bulma-radius); +} +.button.is-medium { + --bulma-control-size: var(--bulma-size-medium); + --bulma-control-radius: var(--bulma-radius-medium); +} +.button.is-large { + --bulma-control-size: var(--bulma-size-large); + --bulma-control-radius: var(--bulma-radius-medium); +} +.button.is-fullwidth { + display: flex; + width: 100%; +} +.button.is-loading { + box-shadow: none; + 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: var(--bulma-button-static-background-color); + border-color: var(--bulma-button-static-border-color); + color: var(--bulma-button-static-color); + box-shadow: none; + pointer-events: none; +} +.button.is-rounded { + border-radius: var(--bulma-radius-rounded); + padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em); + padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em); +} + +.buttons { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + justify-content: flex-start; +} +.buttons.are-small { + --bulma-control-size: var(--bulma-size-small); + --bulma-control-radius: var(--bulma-radius-small); +} +.buttons.are-medium { + --bulma-control-size: var(--bulma-size-medium); + --bulma-control-radius: var(--bulma-radius-medium); +} +.buttons.are-large { + --bulma-control-size: var(--bulma-size-large); + --bulma-control-radius: var(--bulma-radius-large); +} +.buttons.has-addons { + gap: 0; +} +.buttons.has-addons .button:not(:first-child) { + border-end-start-radius: 0; + border-start-start-radius: 0; +} +.buttons.has-addons .button:not(:last-child) { + border-end-end-radius: 0; + border-start-end-radius: 0; + margin-inline-end: -1px; +} +.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-right { + justify-content: flex-end; +} + +@media screen and (max-width: 768px) { + .button.is-responsive.is-small { + font-size: calc(var(--bulma-size-small) * 0.75); + } + .button.is-responsive, + .button.is-responsive.is-normal { + font-size: calc(var(--bulma-size-small) * 0.875); + } + .button.is-responsive.is-medium { + font-size: var(--bulma-size-small); + } + .button.is-responsive.is-large { + font-size: var(--bulma-size-normal); + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .button.is-responsive.is-small { + font-size: calc(var(--bulma-size-small) * 0.875); + } + .button.is-responsive, + .button.is-responsive.is-normal { + font-size: var(--bulma-size-small); + } + .button.is-responsive.is-medium { + font-size: var(--bulma-size-normal); + } + .button.is-responsive.is-large { + font-size: var(--bulma-size-medium); + } +} +.content { + --bulma-content-heading-color: var(--bulma-text-strong); + --bulma-content-heading-weight: var(--bulma-weight-extrabold); + --bulma-content-heading-line-height: 1.125; + --bulma-content-block-margin-bottom: 1em; + --bulma-content-blockquote-background-color: var(--bulma-background); + --bulma-content-blockquote-border-left: 5px solid var(--bulma-border); + --bulma-content-blockquote-padding: 1.25em 1.5em; + --bulma-content-pre-padding: 1.25em 1.5em; + --bulma-content-table-cell-border: 1px solid var(--bulma-border); + --bulma-content-table-cell-border-width: 0 0 1px; + --bulma-content-table-cell-padding: 0.5em 0.75em; + --bulma-content-table-cell-heading-color: var(--bulma-text-strong); + --bulma-content-table-head-cell-border-width: 0 0 2px; + --bulma-content-table-head-cell-color: var(--bulma-text-strong); + --bulma-content-table-body-last-row-cell-border-bottom-width: 0; + --bulma-content-table-foot-cell-border-width: 2px 0 0; + --bulma-content-table-foot-cell-color: var(--bulma-text-strong); +} + +.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: var(--bulma-content-block-margin-bottom); +} +.content h1, +.content h2, +.content h3, +.content h4, +.content h5, +.content h6 { + color: var(--bulma-content-heading-color); + font-weight: var(--bulma-content-heading-weight); + line-height: var(--bulma-content-heading-line-height); +} +.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: var(--bulma-content-blockquote-background-color); + border-inline-start: var(--bulma-content-blockquote-border-left); + padding: var(--bulma-content-blockquote-padding); +} +.content ol { + list-style-position: outside; + margin-inline-start: 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-inline-start: 2em; + margin-top: 1em; +} +.content ul ul { + list-style-type: circle; + margin-bottom: 0.25em; + margin-top: 0.25em; +} +.content ul ul ul { + list-style-type: square; +} +.content dd { + margin-inline-start: 2em; +} +.content figure:not([class]) { + margin-left: 2em; + margin-right: 2em; + text-align: center; +} +.content figure:not([class]):not(:first-child) { + margin-top: 2em; +} +.content figure:not([class]):not(:last-child) { + margin-bottom: 2em; +} +.content figure:not([class]) img { + display: inline-block; +} +.content figure:not([class]) figcaption { + font-style: italic; +} +.content pre { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + padding: var(--bulma-content-pre-padding); + white-space: pre; + word-wrap: normal; +} +.content sup, +.content sub { + font-size: 75%; +} +.content table td, +.content table th { + border: var(--bulma-content-table-cell-border); + border-width: var(--bulma-content-table-cell-border-width); + padding: var(--bulma-content-table-cell-padding); + vertical-align: top; +} +.content table th { + color: var(--bulma-content-table-cell-heading-color); +} +.content table th:not([align]) { + text-align: inherit; +} +.content table thead td, +.content table thead th { + border-width: var(--bulma-content-table-head-cell-border-width); + color: var(--bulma-content-table-head-cell-color); +} +.content table tfoot td, +.content table tfoot th { + border-width: var(--bulma-content-table-foot-cell-border-width); + color: var(--bulma-content-table-foot-cell-color); +} +.content table tbody tr:last-child td, +.content table tbody tr:last-child th { + border-bottom-width: var(--bulma-content-table-body-last-row-cell-border-bottom-width); +} +.content .tabs li + li { + margin-top: 0; +} +.content.is-small { + font-size: var(--bulma-size-small); +} +.content.is-normal { + font-size: var(--bulma-size-normal); +} +.content.is-medium { + font-size: var(--bulma-size-medium); +} +.content.is-large { + font-size: var(--bulma-size-large); +} + +.delete { + --bulma-delete-dimensions: 1.25rem; + --bulma-delete-background-l: 0%; + --bulma-delete-background-alpha: 0.5; + --bulma-delete-color: var(--bulma-white); + appearance: none; + background-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-delete-background-l), var(--bulma-delete-background-alpha)); + border: none; + border-radius: var(--bulma-radius-rounded); + cursor: pointer; + pointer-events: auto; + display: inline-flex; + flex-grow: 0; + flex-shrink: 0; + font-size: 1em; + height: var(--bulma-delete-dimensions); + max-height: var(--bulma-delete-dimensions); + max-width: var(--bulma-delete-dimensions); + min-height: var(--bulma-delete-dimensions); + min-width: var(--bulma-delete-dimensions); + outline: none; + position: relative; + vertical-align: top; + width: var(--bulma-delete-dimensions); +} +.delete::before, .delete::after { + background-color: var(--bulma-delete-color); + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform-origin: center center; +} +.delete::before { + height: 2px; + width: 50%; +} +.delete::after { + height: 50%; + width: 2px; +} +.delete:hover, .delete:focus { + --bulma-delete-background-alpha: 0.4; +} +.delete:active { + --bulma-delete-background-alpha: 0.5; +} +.delete.is-small { + --bulma-delete-dimensions: 1rem; +} +.delete.is-medium { + --bulma-delete-dimensions: 1.5rem; +} +.delete.is-large { + --bulma-delete-dimensions: 2rem; +} + +.icon, +.icon-text { + --bulma-icon-dimensions: 1.5rem; + --bulma-icon-dimensions-small: 1rem; + --bulma-icon-dimensions-medium: 2rem; + --bulma-icon-dimensions-large: 3rem; + --bulma-icon-text-spacing: 0.25em; +} + +.icon { + align-items: center; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + height: var(--bulma-icon-dimensions); + transition-duration: var(--bulma-duration); + transition-property: color; + width: var(--bulma-icon-dimensions); +} +.icon.is-small { + height: var(--bulma-icon-dimensions-small); + width: var(--bulma-icon-dimensions-small); +} +.icon.is-medium { + height: var(--bulma-icon-dimensions-medium); + width: var(--bulma-icon-dimensions-medium); +} +.icon.is-large { + height: var(--bulma-icon-dimensions-large); + width: var(--bulma-icon-dimensions-large); +} + +.icon-text { + align-items: flex-start; + color: inherit; + display: inline-flex; + flex-wrap: wrap; + gap: var(--bulma-icon-text-spacing); + line-height: var(--bulma-icon-dimensions); + vertical-align: top; +} +.icon-text .icon { + flex-grow: 0; + flex-shrink: 0; +} + +div.icon-text { + display: flex; +} + +.image { + display: block; + position: relative; +} +.image img { + display: block; + height: auto; + width: 100%; +} +.image img.is-rounded { + border-radius: var(--bulma-radius-rounded); +} +.image.is-fullwidth { + width: 100%; +} +.image.is-square img, +.image.is-square .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-square { + aspect-ratio: 1; +} +.image.is-1by1 { + aspect-ratio: 1/1; +} +.image.is-1by1 img, +.image.is-1by1 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-5by4 { + aspect-ratio: 5/4; +} +.image.is-5by4 img, +.image.is-5by4 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-4by3 { + aspect-ratio: 4/3; +} +.image.is-4by3 img, +.image.is-4by3 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-3by2 { + aspect-ratio: 3/2; +} +.image.is-3by2 img, +.image.is-3by2 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-5by3 { + aspect-ratio: 5/3; +} +.image.is-5by3 img, +.image.is-5by3 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-16by9 { + aspect-ratio: 16/9; +} +.image.is-16by9 img, +.image.is-16by9 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-2by1 { + aspect-ratio: 2/1; +} +.image.is-2by1 img, +.image.is-2by1 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-3by1 { + aspect-ratio: 3/1; +} +.image.is-3by1 img, +.image.is-3by1 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-4by5 { + aspect-ratio: 4/5; +} +.image.is-4by5 img, +.image.is-4by5 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-3by4 { + aspect-ratio: 3/4; +} +.image.is-3by4 img, +.image.is-3by4 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-2by3 { + aspect-ratio: 2/3; +} +.image.is-2by3 img, +.image.is-2by3 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-3by5 { + aspect-ratio: 3/5; +} +.image.is-3by5 img, +.image.is-3by5 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-9by16 { + aspect-ratio: 9/16; +} +.image.is-9by16 img, +.image.is-9by16 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-1by2 { + aspect-ratio: 1/2; +} +.image.is-1by2 img, +.image.is-1by2 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.image.is-1by3 { + aspect-ratio: 1/3; +} +.image.is-1by3 img, +.image.is-1by3 .has-ratio { + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 100%; +} +.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; +} + +.loader { + animation: spinAround 500ms infinite linear; + border: 2px solid var(--bulma-border); + border-radius: var(--bulma-radius-rounded); + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1em; + position: relative; + width: 1em; +} + +.notification { + --bulma-notification-h: var(--bulma-scheme-h); + --bulma-notification-s: var(--bulma-scheme-s); + --bulma-notification-background-l: var(--bulma-background-l); + --bulma-notification-color-l: var(--bulma-text-strong-l); + --bulma-notification-code-background-color: var(--bulma-scheme-main); + --bulma-notification-radius: var(--bulma-radius); + --bulma-notification-padding: 1.375em 1.5em; +} + +.notification { + background-color: hsl(var(--bulma-notification-h), var(--bulma-notification-s), var(--bulma-notification-background-l)); + border-radius: var(--bulma-notification-radius); + color: hsl(var(--bulma-notification-h), var(--bulma-notification-s), var(--bulma-notification-color-l)); + padding: var(--bulma-notification-padding); + position: relative; +} +.notification a:not(.button):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; +} +.notification strong { + color: currentColor; +} +.notification code, +.notification pre { + background: var(--bulma-notification-code-background-color); +} +.notification pre code { + background: transparent; +} +.notification > .delete { + position: absolute; + inset-inline-end: 1rem; + top: 1rem; +} +.notification .title, +.notification .subtitle, +.notification .content { + color: currentColor; +} +.notification.is-white { + --bulma-notification-h: var(--bulma-white-h); + --bulma-notification-s: var(--bulma-white-s); + --bulma-notification-background-l: var(--bulma-white-l); + --bulma-notification-color-l: var(--bulma-white-invert-l); +} +.notification.is-white.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-white-light-invert-l); +} +.notification.is-white.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-white-dark-invert-l); +} +.notification.is-black { + --bulma-notification-h: var(--bulma-black-h); + --bulma-notification-s: var(--bulma-black-s); + --bulma-notification-background-l: var(--bulma-black-l); + --bulma-notification-color-l: var(--bulma-black-invert-l); +} +.notification.is-black.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-black-light-invert-l); +} +.notification.is-black.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-black-dark-invert-l); +} +.notification.is-light { + --bulma-notification-h: var(--bulma-light-h); + --bulma-notification-s: var(--bulma-light-s); + --bulma-notification-background-l: var(--bulma-light-l); + --bulma-notification-color-l: var(--bulma-light-invert-l); +} +.notification.is-light.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-light-light-invert-l); +} +.notification.is-light.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-light-dark-invert-l); +} +.notification.is-dark { + --bulma-notification-h: var(--bulma-dark-h); + --bulma-notification-s: var(--bulma-dark-s); + --bulma-notification-background-l: var(--bulma-dark-l); + --bulma-notification-color-l: var(--bulma-dark-invert-l); +} +.notification.is-dark.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-dark-light-invert-l); +} +.notification.is-dark.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-dark-dark-invert-l); +} +.notification.is-text { + --bulma-notification-h: var(--bulma-text-h); + --bulma-notification-s: var(--bulma-text-s); + --bulma-notification-background-l: var(--bulma-text-l); + --bulma-notification-color-l: var(--bulma-text-invert-l); +} +.notification.is-text.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-text-light-invert-l); +} +.notification.is-text.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-text-dark-invert-l); +} +.notification.is-primary { + --bulma-notification-h: var(--bulma-primary-h); + --bulma-notification-s: var(--bulma-primary-s); + --bulma-notification-background-l: var(--bulma-primary-l); + --bulma-notification-color-l: var(--bulma-primary-invert-l); +} +.notification.is-primary.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-primary-light-invert-l); +} +.notification.is-primary.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-primary-dark-invert-l); +} +.notification.is-link { + --bulma-notification-h: var(--bulma-link-h); + --bulma-notification-s: var(--bulma-link-s); + --bulma-notification-background-l: var(--bulma-link-l); + --bulma-notification-color-l: var(--bulma-link-invert-l); +} +.notification.is-link.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-link-light-invert-l); +} +.notification.is-link.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-link-dark-invert-l); +} +.notification.is-info { + --bulma-notification-h: var(--bulma-info-h); + --bulma-notification-s: var(--bulma-info-s); + --bulma-notification-background-l: var(--bulma-info-l); + --bulma-notification-color-l: var(--bulma-info-invert-l); +} +.notification.is-info.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-info-light-invert-l); +} +.notification.is-info.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-info-dark-invert-l); +} +.notification.is-success { + --bulma-notification-h: var(--bulma-success-h); + --bulma-notification-s: var(--bulma-success-s); + --bulma-notification-background-l: var(--bulma-success-l); + --bulma-notification-color-l: var(--bulma-success-invert-l); +} +.notification.is-success.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-success-light-invert-l); +} +.notification.is-success.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-success-dark-invert-l); +} +.notification.is-warning { + --bulma-notification-h: var(--bulma-warning-h); + --bulma-notification-s: var(--bulma-warning-s); + --bulma-notification-background-l: var(--bulma-warning-l); + --bulma-notification-color-l: var(--bulma-warning-invert-l); +} +.notification.is-warning.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-warning-light-invert-l); +} +.notification.is-warning.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-warning-dark-invert-l); +} +.notification.is-danger { + --bulma-notification-h: var(--bulma-danger-h); + --bulma-notification-s: var(--bulma-danger-s); + --bulma-notification-background-l: var(--bulma-danger-l); + --bulma-notification-color-l: var(--bulma-danger-invert-l); +} +.notification.is-danger.is-light { + --bulma-notification-background-l: 90%; + --bulma-notification-color-l: var(--bulma-danger-light-invert-l); +} +.notification.is-danger.is-dark { + --bulma-notification-background-l: 20%; + --bulma-notification-color-l: var(--bulma-danger-dark-invert-l); +} + +.progress { + --bulma-progress-border-radius: var(--bulma-radius-rounded); + --bulma-progress-bar-background-color: var(--bulma-border-weak); + --bulma-progress-value-background-color: var(--bulma-text); + --bulma-progress-indeterminate-duration: 1.5s; +} + +.progress { + appearance: none; + border: none; + border-radius: var(--bulma-progress-border-radius); + display: block; + height: var(--bulma-size-normal); + overflow: hidden; + padding: 0; + width: 100%; +} +.progress::-webkit-progress-bar { + background-color: var(--bulma-progress-bar-background-color); +} +.progress::-webkit-progress-value { + background-color: var(--bulma-progress-value-background-color); +} +.progress::-moz-progress-bar { + background-color: var(--bulma-progress-value-background-color); +} +.progress::-ms-fill { + background-color: var(--bulma-progress-value-background-color); + border: none; +} +.progress.is-white { + --bulma-progress-value-background-color: var(--bulma-white); +} +.progress.is-black { + --bulma-progress-value-background-color: var(--bulma-black); +} +.progress.is-light { + --bulma-progress-value-background-color: var(--bulma-light); +} +.progress.is-dark { + --bulma-progress-value-background-color: var(--bulma-dark); +} +.progress.is-text { + --bulma-progress-value-background-color: var(--bulma-text); +} +.progress.is-primary { + --bulma-progress-value-background-color: var(--bulma-primary); +} +.progress.is-link { + --bulma-progress-value-background-color: var(--bulma-link); +} +.progress.is-info { + --bulma-progress-value-background-color: var(--bulma-info); +} +.progress.is-success { + --bulma-progress-value-background-color: var(--bulma-success); +} +.progress.is-warning { + --bulma-progress-value-background-color: var(--bulma-warning); +} +.progress.is-danger { + --bulma-progress-value-background-color: var(--bulma-danger); +} +.progress:indeterminate { + animation-duration: var(--bulma-progress-indeterminate-duration); + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; + background-color: var(--bulma-progress-bar-background-color); + background-image: linear-gradient(to right, var(--bulma-progress-value-background-color) 30%, var(--bulma-progress-bar-background-color) 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: var(--bulma-size-small); +} +.progress.is-medium { + height: var(--bulma-size-medium); +} +.progress.is-large { + height: var(--bulma-size-large); +} + +@keyframes moveIndeterminate { + from { + background-position: 200% 0; + } + to { + background-position: -200% 0; + } +} +.table { + --bulma-table-color: var(--bulma-text-strong); + --bulma-table-background-color: var(--bulma-scheme-main); + --bulma-table-cell-border-color: var(--bulma-border); + --bulma-table-cell-border-style: solid; + --bulma-table-cell-border-width: 0 0 1px; + --bulma-table-cell-padding: 0.5em 0.75em; + --bulma-table-cell-heading-color: var(--bulma-text-strong); + --bulma-table-cell-text-align: left; + --bulma-table-head-cell-border-width: 0 0 2px; + --bulma-table-head-cell-color: var(--bulma-text-strong); + --bulma-table-foot-cell-border-width: 2px 0 0; + --bulma-table-foot-cell-color: var(--bulma-text-strong); + --bulma-table-head-background-color: transparent; + --bulma-table-body-background-color: transparent; + --bulma-table-foot-background-color: transparent; + --bulma-table-row-hover-background-color: var(--bulma-scheme-main-bis); + --bulma-table-row-active-background-color: var(--bulma-primary); + --bulma-table-row-active-color: var(--bulma-primary-invert); + --bulma-table-striped-row-even-background-color: var(--bulma-scheme-main-bis); + --bulma-table-striped-row-even-hover-background-color: var(--bulma-scheme-main-ter); +} + +.table { + background-color: var(--bulma-table-background-color); + color: var(--bulma-table-color); +} +.table td, +.table th { + background-color: var(--bulma-table-cell-background-color); + border-color: var(--bulma-table-cell-border-color); + border-style: var(--bulma-table-cell-border-style); + border-width: var(--bulma-table-cell-border-width); + color: var(--bulma-table-color); + padding: var(--bulma-table-cell-padding); + vertical-align: top; +} +.table td.is-white, +.table th.is-white { + --bulma-table-color: var(--bulma-white-invert); + --bulma-table-cell-heading-color: var(--bulma-white-invert); + --bulma-table-cell-background-color: var(--bulma-white); + --bulma-table-cell-border-color: var(--bulma-white); +} +.table td.is-black, +.table th.is-black { + --bulma-table-color: var(--bulma-black-invert); + --bulma-table-cell-heading-color: var(--bulma-black-invert); + --bulma-table-cell-background-color: var(--bulma-black); + --bulma-table-cell-border-color: var(--bulma-black); +} +.table td.is-light, +.table th.is-light { + --bulma-table-color: var(--bulma-light-invert); + --bulma-table-cell-heading-color: var(--bulma-light-invert); + --bulma-table-cell-background-color: var(--bulma-light); + --bulma-table-cell-border-color: var(--bulma-light); +} +.table td.is-dark, +.table th.is-dark { + --bulma-table-color: var(--bulma-dark-invert); + --bulma-table-cell-heading-color: var(--bulma-dark-invert); + --bulma-table-cell-background-color: var(--bulma-dark); + --bulma-table-cell-border-color: var(--bulma-dark); +} +.table td.is-text, +.table th.is-text { + --bulma-table-color: var(--bulma-text-invert); + --bulma-table-cell-heading-color: var(--bulma-text-invert); + --bulma-table-cell-background-color: var(--bulma-text); + --bulma-table-cell-border-color: var(--bulma-text); +} +.table td.is-primary, +.table th.is-primary { + --bulma-table-color: var(--bulma-primary-invert); + --bulma-table-cell-heading-color: var(--bulma-primary-invert); + --bulma-table-cell-background-color: var(--bulma-primary); + --bulma-table-cell-border-color: var(--bulma-primary); +} +.table td.is-link, +.table th.is-link { + --bulma-table-color: var(--bulma-link-invert); + --bulma-table-cell-heading-color: var(--bulma-link-invert); + --bulma-table-cell-background-color: var(--bulma-link); + --bulma-table-cell-border-color: var(--bulma-link); +} +.table td.is-info, +.table th.is-info { + --bulma-table-color: var(--bulma-info-invert); + --bulma-table-cell-heading-color: var(--bulma-info-invert); + --bulma-table-cell-background-color: var(--bulma-info); + --bulma-table-cell-border-color: var(--bulma-info); +} +.table td.is-success, +.table th.is-success { + --bulma-table-color: var(--bulma-success-invert); + --bulma-table-cell-heading-color: var(--bulma-success-invert); + --bulma-table-cell-background-color: var(--bulma-success); + --bulma-table-cell-border-color: var(--bulma-success); +} +.table td.is-warning, +.table th.is-warning { + --bulma-table-color: var(--bulma-warning-invert); + --bulma-table-cell-heading-color: var(--bulma-warning-invert); + --bulma-table-cell-background-color: var(--bulma-warning); + --bulma-table-cell-border-color: var(--bulma-warning); +} +.table td.is-danger, +.table th.is-danger { + --bulma-table-color: var(--bulma-danger-invert); + --bulma-table-cell-heading-color: var(--bulma-danger-invert); + --bulma-table-cell-background-color: var(--bulma-danger); + --bulma-table-cell-border-color: var(--bulma-danger); +} +.table td.is-narrow, +.table th.is-narrow { + white-space: nowrap; + width: 1%; +} +.table td.is-selected, +.table th.is-selected { + background-color: var(--bulma-table-row-active-background-color); + color: var(--bulma-table-row-active-color); +} +.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: var(--bulma-table-cell-heading-color); +} +.table th:not([align]) { + text-align: var(--bulma-table-cell-text-align); +} +.table tr.is-selected { + background-color: var(--bulma-table-row-active-background-color); + color: var(--bulma-table-row-active-color); +} +.table tr.is-selected a, +.table tr.is-selected strong { + color: currentColor; +} +.table tr.is-selected td, +.table tr.is-selected th { + border-color: var(--bulma-table-row-active-color); + color: currentColor; +} +.table tr.is-white { + --bulma-table-color: var(--bulma-white-invert); + --bulma-table-cell-heading-color: var(--bulma-white-invert); + --bulma-table-cell-background-color: var(--bulma-white); + --bulma-table-cell-border-color: var(--bulma-white); +} +.table tr.is-black { + --bulma-table-color: var(--bulma-black-invert); + --bulma-table-cell-heading-color: var(--bulma-black-invert); + --bulma-table-cell-background-color: var(--bulma-black); + --bulma-table-cell-border-color: var(--bulma-black); +} +.table tr.is-light { + --bulma-table-color: var(--bulma-light-invert); + --bulma-table-cell-heading-color: var(--bulma-light-invert); + --bulma-table-cell-background-color: var(--bulma-light); + --bulma-table-cell-border-color: var(--bulma-light); +} +.table tr.is-dark { + --bulma-table-color: var(--bulma-dark-invert); + --bulma-table-cell-heading-color: var(--bulma-dark-invert); + --bulma-table-cell-background-color: var(--bulma-dark); + --bulma-table-cell-border-color: var(--bulma-dark); +} +.table tr.is-text { + --bulma-table-color: var(--bulma-text-invert); + --bulma-table-cell-heading-color: var(--bulma-text-invert); + --bulma-table-cell-background-color: var(--bulma-text); + --bulma-table-cell-border-color: var(--bulma-text); +} +.table tr.is-primary { + --bulma-table-color: var(--bulma-primary-invert); + --bulma-table-cell-heading-color: var(--bulma-primary-invert); + --bulma-table-cell-background-color: var(--bulma-primary); + --bulma-table-cell-border-color: var(--bulma-primary); +} +.table tr.is-link { + --bulma-table-color: var(--bulma-link-invert); + --bulma-table-cell-heading-color: var(--bulma-link-invert); + --bulma-table-cell-background-color: var(--bulma-link); + --bulma-table-cell-border-color: var(--bulma-link); +} +.table tr.is-info { + --bulma-table-color: var(--bulma-info-invert); + --bulma-table-cell-heading-color: var(--bulma-info-invert); + --bulma-table-cell-background-color: var(--bulma-info); + --bulma-table-cell-border-color: var(--bulma-info); +} +.table tr.is-success { + --bulma-table-color: var(--bulma-success-invert); + --bulma-table-cell-heading-color: var(--bulma-success-invert); + --bulma-table-cell-background-color: var(--bulma-success); + --bulma-table-cell-border-color: var(--bulma-success); +} +.table tr.is-warning { + --bulma-table-color: var(--bulma-warning-invert); + --bulma-table-cell-heading-color: var(--bulma-warning-invert); + --bulma-table-cell-background-color: var(--bulma-warning); + --bulma-table-cell-border-color: var(--bulma-warning); +} +.table tr.is-danger { + --bulma-table-color: var(--bulma-danger-invert); + --bulma-table-cell-heading-color: var(--bulma-danger-invert); + --bulma-table-cell-background-color: var(--bulma-danger); + --bulma-table-cell-border-color: var(--bulma-danger); +} +.table thead { + background-color: var(--bulma-table-head-background-color); +} +.table thead td, +.table thead th { + border-width: var(--bulma-table-head-cell-border-width); + color: var(--bulma-table-head-cell-color); +} +.table tfoot { + background-color: var(--bulma-table-foot-background-color); +} +.table tfoot td, +.table tfoot th { + border-width: var(--bulma-table-foot-cell-border-width); + color: var(--bulma-table-foot-cell-color); +} +.table tbody { + background-color: var(--bulma-table-body-background-color); +} +.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: var(--bulma-table-row-hover-background-color); +} +.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover { + background-color: var(--bulma-table-row-hover-background-color); +} +.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) { + background-color: var(--bulma-table-striped-row-even-hover-background-color); +} +.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: var(--bulma-table-striped-row-even-background-color); +} + +.table-container { + -webkit-overflow-scrolling: touch; + overflow: auto; + overflow-y: hidden; + max-width: 100%; +} + +.tags { + align-items: center; + color: hsl(var(--bulma-tag-h), var(--bulma-tag-s), var(--bulma-tag-color-l)); + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + justify-content: flex-start; +} +.tags.are-medium .tag:not(.is-normal):not(.is-large) { + font-size: var(--bulma-size-normal); +} +.tags.are-large .tag:not(.is-normal):not(.is-medium) { + font-size: var(--bulma-size-medium); +} +.tags.is-centered { + gap: 0.25rem; + justify-content: center; +} +.tags.is-right { + justify-content: flex-end; +} +.tags.has-addons { + gap: 0; +} +.tags.has-addons .tag:not(:first-child) { + border-start-start-radius: 0; + border-end-start-radius: 0; +} +.tags.has-addons .tag:not(:last-child) { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + +.tag { + --bulma-tag-h: var(--bulma-scheme-h); + --bulma-tag-s: var(--bulma-scheme-s); + --bulma-tag-background-l: var(--bulma-background-l); + --bulma-tag-background-l-delta: 0%; + --bulma-tag-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-tag-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-tag-color-l: var(--bulma-text-l); + --bulma-tag-radius: var(--bulma-radius); + --bulma-tag-delete-margin: 1px; + align-items: center; + background-color: hsl(var(--bulma-tag-h), var(--bulma-tag-s), calc(var(--bulma-tag-background-l) + var(--bulma-tag-background-l-delta))); + border-radius: var(--bulma-radius); + color: hsl(var(--bulma-tag-h), var(--bulma-tag-s), var(--bulma-tag-color-l)); + display: inline-flex; + font-size: var(--bulma-size-small); + height: 2em; + justify-content: center; + line-height: 1.5; + padding-left: 0.75em; + padding-right: 0.75em; + white-space: nowrap; +} +.tag .delete { + margin-inline-start: 0.25rem; + margin-inline-end: -0.375rem; +} +.tag.is-white { + --bulma-tag-h: var(--bulma-white-h); + --bulma-tag-s: var(--bulma-white-s); + --bulma-tag-background-l: var(--bulma-white-l); + --bulma-tag-color-l: var(--bulma-white-invert-l); +} +.tag.is-white.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-white-light-invert-l); +} +.tag.is-black { + --bulma-tag-h: var(--bulma-black-h); + --bulma-tag-s: var(--bulma-black-s); + --bulma-tag-background-l: var(--bulma-black-l); + --bulma-tag-color-l: var(--bulma-black-invert-l); +} +.tag.is-black.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-black-light-invert-l); +} +.tag.is-light { + --bulma-tag-h: var(--bulma-light-h); + --bulma-tag-s: var(--bulma-light-s); + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-light-invert-l); +} +.tag.is-light.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-light-light-invert-l); +} +.tag.is-dark { + --bulma-tag-h: var(--bulma-dark-h); + --bulma-tag-s: var(--bulma-dark-s); + --bulma-tag-background-l: var(--bulma-dark-l); + --bulma-tag-color-l: var(--bulma-dark-invert-l); +} +.tag.is-dark.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-dark-light-invert-l); +} +.tag.is-text { + --bulma-tag-h: var(--bulma-text-h); + --bulma-tag-s: var(--bulma-text-s); + --bulma-tag-background-l: var(--bulma-text-l); + --bulma-tag-color-l: var(--bulma-text-invert-l); +} +.tag.is-text.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-text-light-invert-l); +} +.tag.is-primary { + --bulma-tag-h: var(--bulma-primary-h); + --bulma-tag-s: var(--bulma-primary-s); + --bulma-tag-background-l: var(--bulma-primary-l); + --bulma-tag-color-l: var(--bulma-primary-invert-l); +} +.tag.is-primary.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-primary-light-invert-l); +} +.tag.is-link { + --bulma-tag-h: var(--bulma-link-h); + --bulma-tag-s: var(--bulma-link-s); + --bulma-tag-background-l: var(--bulma-link-l); + --bulma-tag-color-l: var(--bulma-link-invert-l); +} +.tag.is-link.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-link-light-invert-l); +} +.tag.is-info { + --bulma-tag-h: var(--bulma-info-h); + --bulma-tag-s: var(--bulma-info-s); + --bulma-tag-background-l: var(--bulma-info-l); + --bulma-tag-color-l: var(--bulma-info-invert-l); +} +.tag.is-info.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-info-light-invert-l); +} +.tag.is-success { + --bulma-tag-h: var(--bulma-success-h); + --bulma-tag-s: var(--bulma-success-s); + --bulma-tag-background-l: var(--bulma-success-l); + --bulma-tag-color-l: var(--bulma-success-invert-l); +} +.tag.is-success.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-success-light-invert-l); +} +.tag.is-warning { + --bulma-tag-h: var(--bulma-warning-h); + --bulma-tag-s: var(--bulma-warning-s); + --bulma-tag-background-l: var(--bulma-warning-l); + --bulma-tag-color-l: var(--bulma-warning-invert-l); +} +.tag.is-warning.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-warning-light-invert-l); +} +.tag.is-danger { + --bulma-tag-h: var(--bulma-danger-h); + --bulma-tag-s: var(--bulma-danger-s); + --bulma-tag-background-l: var(--bulma-danger-l); + --bulma-tag-color-l: var(--bulma-danger-invert-l); +} +.tag.is-danger.is-light { + --bulma-tag-background-l: var(--bulma-light-l); + --bulma-tag-color-l: var(--bulma-danger-light-invert-l); +} +.tag.is-normal { + font-size: var(--bulma-size-small); +} +.tag.is-medium { + font-size: var(--bulma-size-normal); +} +.tag.is-large { + font-size: var(--bulma-size-medium); +} +.tag .icon:first-child:not(:last-child) { + margin-inline-start: -0.375em; + margin-inline-end: 0.1875em; +} +.tag .icon:last-child:not(:first-child) { + margin-inline-start: 0.1875em; + margin-inline-end: -0.375em; +} +.tag .icon:first-child:last-child { + margin-inline-start: -0.375em; + margin-inline-end: -0.375em; +} +.tag.is-delete { + margin-inline-start: var(--bulma-tag-delete-margin); + padding: 0; + position: relative; + width: 2em; +} +.tag.is-delete::before, .tag.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.is-delete::before { + height: 1px; + width: 50%; +} +.tag.is-delete::after { + height: 50%; + width: 1px; +} +.tag.is-rounded { + border-radius: var(--bulma-radius-rounded); +} + +a.tag, +button.tag, +.tag.is-hoverable { + cursor: pointer; +} +a.tag:hover, +button.tag:hover, +.tag.is-hoverable:hover { + --bulma-tag-background-l-delta: var(--bulma-tag-hover-background-l-delta); +} +a.tag:active, +button.tag:active, +.tag.is-hoverable:active { + --bulma-tag-background-l-delta: var(--bulma-tag-active-background-l-delta); +} + +.title, +.subtitle { + --bulma-title-color: var(--bulma-text-strong); + --bulma-title-family: false; + --bulma-title-size: var(--bulma-size-3); + --bulma-title-weight: var(--bulma-weight-extrabold); + --bulma-title-line-height: 1.125; + --bulma-title-strong-color: inherit; + --bulma-title-strong-weight: inherit; + --bulma-title-sub-size: 0.75em; + --bulma-title-sup-size: 0.75em; + --bulma-subtitle-color: var(--bulma-text); + --bulma-subtitle-family: false; + --bulma-subtitle-size: var(--bulma-size-5); + --bulma-subtitle-weight: var(--bulma-weight-normal); + --bulma-subtitle-line-height: 1.25; + --bulma-subtitle-strong-color: var(--bulma-text-strong); + --bulma-subtitle-strong-weight: var(--bulma-weight-semibold); +} + +.title, +.subtitle { + word-break: break-word; +} +.title em, +.title span, +.subtitle em, +.subtitle span { + font-weight: inherit; +} +.title sub, +.subtitle sub { + font-size: var(--bulma-title-sub-size); +} +.title sup, +.subtitle sup { + font-size: var(--bulma-title-sup-size); +} +.title .tag, +.subtitle .tag { + vertical-align: middle; +} + +.title { + color: var(--bulma-title-color); + font-size: var(--bulma-title-size); + font-weight: var(--bulma-title-weight); + line-height: var(--bulma-title-line-height); +} +.title strong { + color: var(--bulma-title-strong-color); + font-weight: var(--bulma-title-strong-weight); +} +.title:not(.is-spaced):has(+ .subtitle) { + margin-bottom: 0; +} +.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: var(--bulma-subtitle-color); + font-size: var(--bulma-subtitle-size); + font-weight: var(--bulma-subtitle-weight); + line-height: var(--bulma-subtitle-line-height); +} +.subtitle strong { + color: var(--bulma-subtitle-strong-color); + font-weight: var(--bulma-subtitle-strong-weight); +} +.subtitle:not(.is-spaced):has(+ .title) { + margin-bottom: 0; +} +.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; +} + +/* Bulma Form */ +.control, +.input, +.textarea, +.select select { + --bulma-input-h: var(--bulma-scheme-h); + --bulma-input-s: var(--bulma-scheme-s); + --bulma-input-l: var(--bulma-scheme-main-l); + --bulma-input-border-l: var(--bulma-border-l); + --bulma-input-border-l-delta: 0%; + --bulma-input-hover-border-l-delta: var(--bulma-hover-border-l-delta); + --bulma-input-active-border-l-delta: var(--bulma-active-border-l-delta); + --bulma-input-focus-h: var(--bulma-focus-h); + --bulma-input-focus-s: var(--bulma-focus-s); + --bulma-input-focus-l: var(--bulma-focus-l); + --bulma-input-focus-shadow-size: var(--bulma-focus-shadow-size); + --bulma-input-focus-shadow-alpha: var(--bulma-focus-shadow-alpha); + --bulma-input-color-l: var(--bulma-text-strong-l); + --bulma-input-background-l: var(--bulma-scheme-main-l); + --bulma-input-background-l-delta: 0%; + --bulma-input-height: var(--bulma-control-height); + --bulma-input-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05); + --bulma-input-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-strong-l), 0.3); + --bulma-input-disabled-color: var(--bulma-text-weak); + --bulma-input-disabled-background-color: var(--bulma-background); + --bulma-input-disabled-border-color: var(--bulma-background); + --bulma-input-disabled-placeholder-color: hsla(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-weak-l), 0.3); + --bulma-input-arrow: var(--bulma-link); + --bulma-input-icon-color: var(--bulma-text-light); + --bulma-input-icon-hover-color: var(--bulma-text-weak); + --bulma-input-icon-focus-color: var(--bulma-link); + --bulma-input-radius: var(--bulma-radius); +} + +.select select, .input, .textarea { + background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta))); + border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta))); + border-radius: var(--bulma-input-radius); + color: hsl(var(--bulma-input-h), var(--bulma-input-s), var(--bulma-input-color-l)); +} +.select select::-moz-placeholder, .input::-moz-placeholder, .textarea::-moz-placeholder { + color: var(--bulma-input-placeholder-color); +} +.select select::-webkit-input-placeholder, .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder { + color: var(--bulma-input-placeholder-color); +} +.select select:-moz-placeholder, .input:-moz-placeholder, .textarea:-moz-placeholder { + color: var(--bulma-input-placeholder-color); +} +.select select:-ms-input-placeholder, .input:-ms-input-placeholder, .textarea:-ms-input-placeholder { + color: var(--bulma-input-placeholder-color); +} +.select select:hover, .input:hover, .textarea:hover, .select select.is-hovered, .is-hovered.input, .is-hovered.textarea { + --bulma-input-border-l-delta: var(--bulma-input-hover-border-l-delta); +} +.select select:active, .input:active, .textarea:active, .select select.is-active, .is-active.input, .is-active.textarea { + --bulma-input-border-l-delta: var(--bulma-input-active-border-l-delta); +} +.select select:focus, .input:focus, .textarea:focus, .select select:focus-within, .input:focus-within, .textarea:focus-within, .select select.is-focused, .is-focused.input, .is-focused.textarea { + border-color: hsl(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l)); + box-shadow: var(--bulma-input-focus-shadow-size) hsla(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l), var(--bulma-input-focus-shadow-alpha)); +} +.select select[disabled], [disabled].input, [disabled].textarea, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .input, fieldset[disabled] .textarea { + background-color: var(--bulma-input-disabled-background-color); + border-color: var(--bulma-input-disabled-border-color); + box-shadow: none; + color: var(--bulma-input-disabled-color); +} +.select select[disabled]::-moz-placeholder, [disabled].input::-moz-placeholder, [disabled].textarea::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder, fieldset[disabled] .input::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder { + color: var(--bulma-input-disabled-placeholder-color); +} +.select select[disabled]::-webkit-input-placeholder, [disabled].input::-webkit-input-placeholder, [disabled].textarea::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder, fieldset[disabled] .input::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder { + color: var(--bulma-input-disabled-placeholder-color); +} +.select select[disabled]:-moz-placeholder, [disabled].input:-moz-placeholder, [disabled].textarea:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder, fieldset[disabled] .input:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder { + color: var(--bulma-input-disabled-placeholder-color); +} +.select select[disabled]:-ms-input-placeholder, [disabled].input:-ms-input-placeholder, [disabled].textarea:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder, fieldset[disabled] .input:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder { + color: var(--bulma-input-disabled-placeholder-color); +} + +/* Bulma Form */ +.textarea, .input { + --bulma-input-h: var(--bulma-scheme-h); + --bulma-input-s: var(--bulma-scheme-s); + --bulma-input-border-style: solid; + --bulma-input-border-width: 1px; + --bulma-input-border-l: var(--bulma-border-l); + box-shadow: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.05); + max-width: 100%; + width: 100%; +} +[readonly].textarea, [readonly].input { + box-shadow: none; +} +.is-white.textarea, .is-white.input { + --bulma-input-h: var(--bulma-white-h); + --bulma-input-s: var(--bulma-white-s); + --bulma-input-l: var(--bulma-white-l); + --bulma-input-focus-h: var(--bulma-white-h); + --bulma-input-focus-s: var(--bulma-white-s); + --bulma-input-focus-l: var(--bulma-white-l); + --bulma-input-border-l: var(--bulma-white-l); +} +.is-black.textarea, .is-black.input { + --bulma-input-h: var(--bulma-black-h); + --bulma-input-s: var(--bulma-black-s); + --bulma-input-l: var(--bulma-black-l); + --bulma-input-focus-h: var(--bulma-black-h); + --bulma-input-focus-s: var(--bulma-black-s); + --bulma-input-focus-l: var(--bulma-black-l); + --bulma-input-border-l: var(--bulma-black-l); +} +.is-light.textarea, .is-light.input { + --bulma-input-h: var(--bulma-light-h); + --bulma-input-s: var(--bulma-light-s); + --bulma-input-l: var(--bulma-light-l); + --bulma-input-focus-h: var(--bulma-light-h); + --bulma-input-focus-s: var(--bulma-light-s); + --bulma-input-focus-l: var(--bulma-light-l); + --bulma-input-border-l: var(--bulma-light-l); +} +.is-dark.textarea, .is-dark.input { + --bulma-input-h: var(--bulma-dark-h); + --bulma-input-s: var(--bulma-dark-s); + --bulma-input-l: var(--bulma-dark-l); + --bulma-input-focus-h: var(--bulma-dark-h); + --bulma-input-focus-s: var(--bulma-dark-s); + --bulma-input-focus-l: var(--bulma-dark-l); + --bulma-input-border-l: var(--bulma-dark-l); +} +.is-text.textarea, .is-text.input { + --bulma-input-h: var(--bulma-text-h); + --bulma-input-s: var(--bulma-text-s); + --bulma-input-l: var(--bulma-text-l); + --bulma-input-focus-h: var(--bulma-text-h); + --bulma-input-focus-s: var(--bulma-text-s); + --bulma-input-focus-l: var(--bulma-text-l); + --bulma-input-border-l: var(--bulma-text-l); +} +.is-primary.textarea, .is-primary.input { + --bulma-input-h: var(--bulma-primary-h); + --bulma-input-s: var(--bulma-primary-s); + --bulma-input-l: var(--bulma-primary-l); + --bulma-input-focus-h: var(--bulma-primary-h); + --bulma-input-focus-s: var(--bulma-primary-s); + --bulma-input-focus-l: var(--bulma-primary-l); + --bulma-input-border-l: var(--bulma-primary-l); +} +.is-link.textarea, .is-link.input { + --bulma-input-h: var(--bulma-link-h); + --bulma-input-s: var(--bulma-link-s); + --bulma-input-l: var(--bulma-link-l); + --bulma-input-focus-h: var(--bulma-link-h); + --bulma-input-focus-s: var(--bulma-link-s); + --bulma-input-focus-l: var(--bulma-link-l); + --bulma-input-border-l: var(--bulma-link-l); +} +.is-info.textarea, .is-info.input { + --bulma-input-h: var(--bulma-info-h); + --bulma-input-s: var(--bulma-info-s); + --bulma-input-l: var(--bulma-info-l); + --bulma-input-focus-h: var(--bulma-info-h); + --bulma-input-focus-s: var(--bulma-info-s); + --bulma-input-focus-l: var(--bulma-info-l); + --bulma-input-border-l: var(--bulma-info-l); +} +.is-success.textarea, .is-success.input { + --bulma-input-h: var(--bulma-success-h); + --bulma-input-s: var(--bulma-success-s); + --bulma-input-l: var(--bulma-success-l); + --bulma-input-focus-h: var(--bulma-success-h); + --bulma-input-focus-s: var(--bulma-success-s); + --bulma-input-focus-l: var(--bulma-success-l); + --bulma-input-border-l: var(--bulma-success-l); +} +.is-warning.textarea, .is-warning.input { + --bulma-input-h: var(--bulma-warning-h); + --bulma-input-s: var(--bulma-warning-s); + --bulma-input-l: var(--bulma-warning-l); + --bulma-input-focus-h: var(--bulma-warning-h); + --bulma-input-focus-s: var(--bulma-warning-s); + --bulma-input-focus-l: var(--bulma-warning-l); + --bulma-input-border-l: var(--bulma-warning-l); +} +.is-danger.textarea, .is-danger.input { + --bulma-input-h: var(--bulma-danger-h); + --bulma-input-s: var(--bulma-danger-s); + --bulma-input-l: var(--bulma-danger-l); + --bulma-input-focus-h: var(--bulma-danger-h); + --bulma-input-focus-s: var(--bulma-danger-s); + --bulma-input-focus-l: var(--bulma-danger-l); + --bulma-input-border-l: var(--bulma-danger-l); +} +.is-small.textarea, .is-small.input { + border-radius: var(--bulma-radius-small); + font-size: var(--bulma-size-small); +} +.is-medium.textarea, .is-medium.input { + font-size: var(--bulma-size-medium); +} +.is-large.textarea, .is-large.input { + font-size: var(--bulma-size-large); +} +.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: var(--bulma-radius-rounded); + 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 { + --bulma-textarea-padding: var(--bulma-control-padding-horizontal); + --bulma-textarea-max-height: 40em; + --bulma-textarea-min-height: 8em; + display: block; + max-width: 100%; + min-width: 100%; + padding: var(--bulma-textarea-padding); + resize: vertical; +} +.textarea:not([rows]) { + max-height: var(--bulma-textarea-max-height); + min-height: var(--bulma-textarea-min-height); +} +.textarea[rows] { + height: initial; +} +.textarea.has-fixed-size { + resize: none; +} + +/* Bulma Form */ +.radio, .checkbox { + cursor: pointer; + display: inline-block; + line-height: 1.25; + position: relative; +} +.radio input, .checkbox input { + cursor: pointer; +} +[disabled].radio, [disabled].checkbox, fieldset[disabled] .radio, fieldset[disabled] .checkbox, +.radio input[disabled], +.checkbox input[disabled] { + color: var(--bulma-text-weak); + cursor: not-allowed; +} + +.radio + .radio { + margin-inline-start: 0.5em; +} + +/* Bulma Form */ +.select { + --bulma-input-h: var(--bulma-scheme-h); + --bulma-input-s: var(--bulma-scheme-s); + --bulma-input-border-style: solid; + --bulma-input-border-width: 1px; + --bulma-input-border-l: var(--bulma-border-l); + display: inline-block; + max-width: 100%; + position: relative; + vertical-align: top; +} +.select:not(.is-multiple) { + height: var(--bulma-control-height); +} +.select:not(.is-multiple):not(.is-loading)::after { + inset-inline-end: 1.125em; + z-index: 4; +} +.select.is-rounded select { + border-radius: var(--bulma-radius-rounded); + padding-inline-start: 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: var(--bulma-background); +} +.select select:not([multiple]) { + padding-inline-end: 2.5em; +} +.select select[multiple] { + height: auto; + padding: 0; +} +.select select[multiple] option { + padding: 0.5em 1em; +} +.select.is-white { + --bulma-input-h: var(--bulma-white-h); + --bulma-input-s: var(--bulma-white-s); + --bulma-input-l: var(--bulma-white-l); + --bulma-input-focus-h: var(--bulma-white-h); + --bulma-input-focus-s: var(--bulma-white-s); + --bulma-input-focus-l: var(--bulma-white-l); + --bulma-input-border-l: var(--bulma-white-l); +} +.select.is-black { + --bulma-input-h: var(--bulma-black-h); + --bulma-input-s: var(--bulma-black-s); + --bulma-input-l: var(--bulma-black-l); + --bulma-input-focus-h: var(--bulma-black-h); + --bulma-input-focus-s: var(--bulma-black-s); + --bulma-input-focus-l: var(--bulma-black-l); + --bulma-input-border-l: var(--bulma-black-l); +} +.select.is-light { + --bulma-input-h: var(--bulma-light-h); + --bulma-input-s: var(--bulma-light-s); + --bulma-input-l: var(--bulma-light-l); + --bulma-input-focus-h: var(--bulma-light-h); + --bulma-input-focus-s: var(--bulma-light-s); + --bulma-input-focus-l: var(--bulma-light-l); + --bulma-input-border-l: var(--bulma-light-l); +} +.select.is-dark { + --bulma-input-h: var(--bulma-dark-h); + --bulma-input-s: var(--bulma-dark-s); + --bulma-input-l: var(--bulma-dark-l); + --bulma-input-focus-h: var(--bulma-dark-h); + --bulma-input-focus-s: var(--bulma-dark-s); + --bulma-input-focus-l: var(--bulma-dark-l); + --bulma-input-border-l: var(--bulma-dark-l); +} +.select.is-text { + --bulma-input-h: var(--bulma-text-h); + --bulma-input-s: var(--bulma-text-s); + --bulma-input-l: var(--bulma-text-l); + --bulma-input-focus-h: var(--bulma-text-h); + --bulma-input-focus-s: var(--bulma-text-s); + --bulma-input-focus-l: var(--bulma-text-l); + --bulma-input-border-l: var(--bulma-text-l); +} +.select.is-primary { + --bulma-input-h: var(--bulma-primary-h); + --bulma-input-s: var(--bulma-primary-s); + --bulma-input-l: var(--bulma-primary-l); + --bulma-input-focus-h: var(--bulma-primary-h); + --bulma-input-focus-s: var(--bulma-primary-s); + --bulma-input-focus-l: var(--bulma-primary-l); + --bulma-input-border-l: var(--bulma-primary-l); +} +.select.is-link { + --bulma-input-h: var(--bulma-link-h); + --bulma-input-s: var(--bulma-link-s); + --bulma-input-l: var(--bulma-link-l); + --bulma-input-focus-h: var(--bulma-link-h); + --bulma-input-focus-s: var(--bulma-link-s); + --bulma-input-focus-l: var(--bulma-link-l); + --bulma-input-border-l: var(--bulma-link-l); +} +.select.is-info { + --bulma-input-h: var(--bulma-info-h); + --bulma-input-s: var(--bulma-info-s); + --bulma-input-l: var(--bulma-info-l); + --bulma-input-focus-h: var(--bulma-info-h); + --bulma-input-focus-s: var(--bulma-info-s); + --bulma-input-focus-l: var(--bulma-info-l); + --bulma-input-border-l: var(--bulma-info-l); +} +.select.is-success { + --bulma-input-h: var(--bulma-success-h); + --bulma-input-s: var(--bulma-success-s); + --bulma-input-l: var(--bulma-success-l); + --bulma-input-focus-h: var(--bulma-success-h); + --bulma-input-focus-s: var(--bulma-success-s); + --bulma-input-focus-l: var(--bulma-success-l); + --bulma-input-border-l: var(--bulma-success-l); +} +.select.is-warning { + --bulma-input-h: var(--bulma-warning-h); + --bulma-input-s: var(--bulma-warning-s); + --bulma-input-l: var(--bulma-warning-l); + --bulma-input-focus-h: var(--bulma-warning-h); + --bulma-input-focus-s: var(--bulma-warning-s); + --bulma-input-focus-l: var(--bulma-warning-l); + --bulma-input-border-l: var(--bulma-warning-l); +} +.select.is-danger { + --bulma-input-h: var(--bulma-danger-h); + --bulma-input-s: var(--bulma-danger-s); + --bulma-input-l: var(--bulma-danger-l); + --bulma-input-focus-h: var(--bulma-danger-h); + --bulma-input-focus-s: var(--bulma-danger-s); + --bulma-input-focus-l: var(--bulma-danger-l); + --bulma-input-border-l: var(--bulma-danger-l); +} +.select.is-small { + border-radius: var(--bulma-radius-small); + font-size: var(--bulma-size-small); +} +.select.is-medium { + font-size: var(--bulma-size-medium); +} +.select.is-large { + font-size: var(--bulma-size-large); +} +.select.is-disabled::after { + border-color: var(--bulma-text-weak) !important; + opacity: 0.5; +} +.select.is-fullwidth { + width: 100%; +} +.select.is-fullwidth select { + width: 100%; +} +.select.is-loading::after { + inset-inline-end: 0.625em; + margin-top: 0; + position: absolute; + top: 0.625em; + transform: none; +} +.select.is-loading.is-small:after { + font-size: var(--bulma-size-small); +} +.select.is-loading.is-medium:after { + font-size: var(--bulma-size-medium); +} +.select.is-loading.is-large:after { + font-size: var(--bulma-size-large); +} + +/* Bulma Form */ +.file { + --bulma-file-radius: var(--bulma-radius); + --bulma-file-name-border-color: var(--bulma-border); + --bulma-file-name-border-style: solid; + --bulma-file-name-border-width: 1px 1px 1px 0; + --bulma-file-name-max-width: 16em; + --bulma-file-h: var(--bulma-scheme-h); + --bulma-file-s: var(--bulma-scheme-s); + --bulma-file-background-l: var(--bulma-scheme-main-ter-l); + --bulma-file-background-l-delta: 0%; + --bulma-file-hover-background-l-delta: -5%; + --bulma-file-active-background-l-delta: -10%; + --bulma-file-border-l: var(--bulma-border-l); + --bulma-file-border-l-delta: 0%; + --bulma-file-hover-border-l-delta: -10%; + --bulma-file-active-border-l-delta: -20%; + --bulma-file-cta-color-l: var(--bulma-text-strong-l); + --bulma-file-name-color-l: var(--bulma-text-strong-l); + --bulma-file-color-l-delta: 0%; + --bulma-file-hover-color-l-delta: -5%; + --bulma-file-active-color-l-delta: -10%; + align-items: stretch; + display: flex; + justify-content: flex-start; + position: relative; +} +.file.is-white { + --bulma-file-h: var(--bulma-white-h); + --bulma-file-s: var(--bulma-white-s); + --bulma-file-background-l: var(--bulma-white-l); + --bulma-file-border-l: var(--bulma-white-l); + --bulma-file-cta-color-l: var(--bulma-white-invert-l); + --bulma-file-name-color-l: var(--bulma-white-on-scheme-l); +} +.file.is-black { + --bulma-file-h: var(--bulma-black-h); + --bulma-file-s: var(--bulma-black-s); + --bulma-file-background-l: var(--bulma-black-l); + --bulma-file-border-l: var(--bulma-black-l); + --bulma-file-cta-color-l: var(--bulma-black-invert-l); + --bulma-file-name-color-l: var(--bulma-black-on-scheme-l); +} +.file.is-light { + --bulma-file-h: var(--bulma-light-h); + --bulma-file-s: var(--bulma-light-s); + --bulma-file-background-l: var(--bulma-light-l); + --bulma-file-border-l: var(--bulma-light-l); + --bulma-file-cta-color-l: var(--bulma-light-invert-l); + --bulma-file-name-color-l: var(--bulma-light-on-scheme-l); +} +.file.is-dark { + --bulma-file-h: var(--bulma-dark-h); + --bulma-file-s: var(--bulma-dark-s); + --bulma-file-background-l: var(--bulma-dark-l); + --bulma-file-border-l: var(--bulma-dark-l); + --bulma-file-cta-color-l: var(--bulma-dark-invert-l); + --bulma-file-name-color-l: var(--bulma-dark-on-scheme-l); +} +.file.is-text { + --bulma-file-h: var(--bulma-text-h); + --bulma-file-s: var(--bulma-text-s); + --bulma-file-background-l: var(--bulma-text-l); + --bulma-file-border-l: var(--bulma-text-l); + --bulma-file-cta-color-l: var(--bulma-text-invert-l); + --bulma-file-name-color-l: var(--bulma-text-on-scheme-l); +} +.file.is-primary { + --bulma-file-h: var(--bulma-primary-h); + --bulma-file-s: var(--bulma-primary-s); + --bulma-file-background-l: var(--bulma-primary-l); + --bulma-file-border-l: var(--bulma-primary-l); + --bulma-file-cta-color-l: var(--bulma-primary-invert-l); + --bulma-file-name-color-l: var(--bulma-primary-on-scheme-l); +} +.file.is-link { + --bulma-file-h: var(--bulma-link-h); + --bulma-file-s: var(--bulma-link-s); + --bulma-file-background-l: var(--bulma-link-l); + --bulma-file-border-l: var(--bulma-link-l); + --bulma-file-cta-color-l: var(--bulma-link-invert-l); + --bulma-file-name-color-l: var(--bulma-link-on-scheme-l); +} +.file.is-info { + --bulma-file-h: var(--bulma-info-h); + --bulma-file-s: var(--bulma-info-s); + --bulma-file-background-l: var(--bulma-info-l); + --bulma-file-border-l: var(--bulma-info-l); + --bulma-file-cta-color-l: var(--bulma-info-invert-l); + --bulma-file-name-color-l: var(--bulma-info-on-scheme-l); +} +.file.is-success { + --bulma-file-h: var(--bulma-success-h); + --bulma-file-s: var(--bulma-success-s); + --bulma-file-background-l: var(--bulma-success-l); + --bulma-file-border-l: var(--bulma-success-l); + --bulma-file-cta-color-l: var(--bulma-success-invert-l); + --bulma-file-name-color-l: var(--bulma-success-on-scheme-l); +} +.file.is-warning { + --bulma-file-h: var(--bulma-warning-h); + --bulma-file-s: var(--bulma-warning-s); + --bulma-file-background-l: var(--bulma-warning-l); + --bulma-file-border-l: var(--bulma-warning-l); + --bulma-file-cta-color-l: var(--bulma-warning-invert-l); + --bulma-file-name-color-l: var(--bulma-warning-on-scheme-l); +} +.file.is-danger { + --bulma-file-h: var(--bulma-danger-h); + --bulma-file-s: var(--bulma-danger-s); + --bulma-file-background-l: var(--bulma-danger-l); + --bulma-file-border-l: var(--bulma-danger-l); + --bulma-file-cta-color-l: var(--bulma-danger-invert-l); + --bulma-file-name-color-l: var(--bulma-danger-on-scheme-l); +} +.file.is-small { + font-size: var(--bulma-size-small); +} +.file.is-normal { + font-size: var(--bulma-size-normal); +} +.file.is-medium { + font-size: var(--bulma-size-medium); +} +.file.is-medium .file-icon .fa { + font-size: 1.5rem; +} +.file.is-large { + font-size: var(--bulma-size-large); +} +.file.is-large .file-icon .fa { + font-size: 2rem; +} +.file.has-name .file-cta { + border-end-end-radius: 0; + border-start-end-radius: 0; +} +.file.has-name .file-name { + border-end-start-radius: 0; + border-start-start-radius: 0; +} +.file.has-name.is-empty .file-cta { + border-radius: var(--bulma-file-radius); +} +.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: 1.5rem; +} +.file.is-boxed.is-small .file-icon .fa { + font-size: 1rem; +} +.file.is-boxed.is-medium .file-icon .fa { + font-size: 2rem; +} +.file.is-boxed.is-large .file-icon .fa { + font-size: 2.5rem; +} +.file.is-boxed.has-name .file-cta { + border-end-end-radius: 0; + border-end-start-radius: 0; + border-start-end-radius: var(--bulma-file-radius); + border-start-start-radius: var(--bulma-file-radius); +} +.file.is-boxed.has-name .file-name { + border-end-end-radius: var(--bulma-file-radius); + border-end-start-radius: var(--bulma-file-radius); + border-start-end-radius: 0; + border-start-start-radius: 0; + 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 var(--bulma-file-radius) var(--bulma-file-radius) 0; +} +.file.is-right .file-name { + border-radius: var(--bulma-file-radius) 0 0 var(--bulma-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; +} +.file-label:hover { + --bulma-file-background-l-delta: var(--bulma-file-hover-background-l-delta); + --bulma-file-border-l-delta: var(--bulma-file-hover-border-l-delta); + --bulma-file-color-l-delta: var(--bulma-file-hover-color-l-delta); +} +.file-label:active { + --bulma-file-background-l-delta: var(--bulma-file-active-background-l-delta); + --bulma-file-border-l-delta: var(--bulma-file-active-border-l-delta); + --bulma-file-color-l-delta: var(--bulma-file-active-color-l-delta); +} + +.file-input { + height: 100%; + left: 0; + opacity: 0; + outline: none; + position: absolute; + top: 0; + width: 100%; +} + +.file-cta, +.file-name { + border-color: hsl(var(--bulma-file-h), var(--bulma-file-s), calc(var(--bulma-file-border-l) + var(--bulma-file-border-l-delta))); + border-radius: var(--bulma-file-radius); + font-size: 1em; + padding-left: 1em; + padding-right: 1em; + white-space: nowrap; +} + +.file-cta { + background-color: hsl(var(--bulma-file-h), var(--bulma-file-s), calc(var(--bulma-file-background-l) + var(--bulma-file-background-l-delta))); + color: hsl(var(--bulma-file-h), var(--bulma-file-s), calc(var(--bulma-file-cta-color-l) + var(--bulma-file-color-l-delta))); +} + +.file-name { + border-color: hsl(var(--bulma-file-h), var(--bulma-file-s), calc(var(--bulma-file-border-l) + var(--bulma-file-color-l-delta))); + border-style: var(--bulma-file-name-border-style); + border-width: var(--bulma-file-name-border-width); + color: hsl(var(--bulma-file-h), var(--bulma-file-s), calc(var(--bulma-file-name-color-l) + var(--bulma-file-color-l-delta))); + display: block; + max-width: var(--bulma-file-name-max-width); + overflow: hidden; + text-align: inherit; + text-overflow: ellipsis; +} + +.file-icon { + align-items: center; + display: flex; + height: 1em; + justify-content: center; + margin-inline-end: 0.5em; + width: 1em; +} +.file-icon .fa { + font-size: 1rem; +} + +/* Bulma Form */ +.label { + color: var(--bulma-text-strong); + display: block; + font-size: var(--bulma-size-normal); + font-weight: var(--bulma-weight-semibold); +} +.label:not(:last-child) { + margin-bottom: 0.5em; +} +.label.is-small { + font-size: var(--bulma-size-small); +} +.label.is-medium { + font-size: var(--bulma-size-medium); +} +.label.is-large { + font-size: var(--bulma-size-large); +} + +.help { + display: block; + font-size: var(--bulma-size-small); + margin-top: 0.25rem; +} +.help.is-white { + color: hsl(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-white-on-scheme-l)); +} +.help.is-black { + color: hsl(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-black-on-scheme-l)); +} +.help.is-light { + color: hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-light-on-scheme-l)); +} +.help.is-dark { + color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-on-scheme-l)); +} +.help.is-text { + color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-on-scheme-l)); +} +.help.is-primary { + color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-on-scheme-l)); +} +.help.is-link { + color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l)); +} +.help.is-info { + color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l)); +} +.help.is-success { + color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-on-scheme-l)); +} +.help.is-warning { + color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-warning-on-scheme-l)); +} +.help.is-danger { + color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l)); +} + +.field { + --bulma-block-spacing: 0.75rem; +} +.field.has-addons { + display: flex; + justify-content: flex-start; +} +.field.has-addons .control:not(:last-child) { + margin-inline-end: -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; + gap: 0.75rem; + justify-content: flex-start; +} +.field.is-grouped > .control { + flex-shrink: 0; +} +.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; +} +@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-inline-end: 1.5rem; + text-align: right; + } + .field-label.is-small { + font-size: var(--bulma-size-small); + padding-top: 0.375em; + } + .field-label.is-normal { + padding-top: 0.375em; + } + .field-label.is-medium { + font-size: var(--bulma-size-medium); + padding-top: 0.375em; + } + .field-label.is-large { + font-size: var(--bulma-size-large); + 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-inline-end: 0.75rem; + } +} + +.control { + box-sizing: border-box; + clear: both; + font-size: var(--bulma-size-normal); + position: relative; + text-align: inherit; +} +.control.has-icons-left .input:hover ~ .icon, +.control.has-icons-left .select:hover ~ .icon, .control.has-icons-right .input:hover ~ .icon, +.control.has-icons-right .select:hover ~ .icon { + color: var(--bulma-input-icon-hover-color); +} +.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: var(--bulma-input-icon-focus-color); +} +.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: var(--bulma-size-small); +} +.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: var(--bulma-size-medium); +} +.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: var(--bulma-size-large); +} +.control.has-icons-left .icon, .control.has-icons-right .icon { + color: var(--bulma-input-icon-color); + height: var(--bulma-input-height); + pointer-events: none; + position: absolute; + top: 0; + width: var(--bulma-input-height); + z-index: 4; +} +.control.has-icons-left .input, +.control.has-icons-left .select select { + padding-left: var(--bulma-input-height); +} +.control.has-icons-left .icon.is-left { + left: 0; +} +.control.has-icons-right .input, +.control.has-icons-right .select select { + padding-right: var(--bulma-input-height); +} +.control.has-icons-right .icon.is-right { + right: 0; +} +.control.is-loading::after { + inset-inline-end: 0.75em; + position: absolute !important; + top: 0.75em; + z-index: 4; +} +.control.is-loading.is-small:after { + font-size: var(--bulma-size-small); +} +.control.is-loading.is-medium:after { + font-size: var(--bulma-size-medium); +} +.control.is-loading.is-large:after { + font-size: var(--bulma-size-large); +} + +/* Bulma Components */ +.breadcrumb { + --bulma-breadcrumb-item-color: var(--bulma-link-text); + --bulma-breadcrumb-item-hover-color: var(--bulma-link-text-hover); + --bulma-breadcrumb-item-active-color: var(--bulma-link-text-active); + --bulma-breadcrumb-item-padding-vertical: 0; + --bulma-breadcrumb-item-padding-horizontal: 0.75em; + --bulma-breadcrumb-item-separator-color: var(--bulma-border); +} + +.breadcrumb { + font-size: var(--bulma-size-normal); + white-space: nowrap; +} +.breadcrumb a { + align-items: center; + color: var(--bulma-breadcrumb-item-color); + display: flex; + justify-content: center; + padding: var(--bulma-breadcrumb-item-padding-vertical) var(--bulma-breadcrumb-item-padding-horizontal); +} +.breadcrumb a:hover { + color: var(--bulma-breadcrumb-item-hover-color); +} +.breadcrumb li { + align-items: center; + display: flex; +} +.breadcrumb li:first-child a { + padding-inline-start: 0; +} +.breadcrumb li.is-active a { + color: var(--bulma-breadcrumb-item-active-color); + cursor: default; + pointer-events: none; +} +.breadcrumb li + li::before { + color: var(--bulma-breadcrumb-item-separator-color); + content: "/"; +} +.breadcrumb ul, +.breadcrumb ol { + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; +} +.breadcrumb .icon:first-child { + margin-inline-end: 0.5em; +} +.breadcrumb .icon:last-child { + margin-inline-start: 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: var(--bulma-size-small); +} +.breadcrumb.is-medium { + font-size: var(--bulma-size-medium); +} +.breadcrumb.is-large { + font-size: var(--bulma-size-large); +} +.breadcrumb.has-arrow-separator li + li::before { + content: "→"; +} +.breadcrumb.has-bullet-separator li + li::before { + content: "•"; +} +.breadcrumb.has-dot-separator li + li::before { + content: "·"; +} +.breadcrumb.has-succeeds-separator li + li::before { + content: "≻"; +} + +.card { + --bulma-card-color: var(--bulma-text); + --bulma-card-background-color: var(--bulma-scheme-main); + --bulma-card-shadow: var(--bulma-shadow); + --bulma-card-radius: 0.75rem; + --bulma-card-header-background-color: transparent; + --bulma-card-header-color: var(--bulma-text-strong); + --bulma-card-header-padding: 0.75rem 1rem; + --bulma-card-header-shadow: 0 0.125em 0.25em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1); + --bulma-card-header-weight: var(--bulma-weight-bold); + --bulma-card-content-background-color: transparent; + --bulma-card-content-padding: 1.5rem; + --bulma-card-footer-background-color: transparent; + --bulma-card-footer-border-top: 1px solid var(--bulma-border-weak); + --bulma-card-footer-padding: 0.75rem; + --bulma-card-media-margin: var(--bulma-block-spacing); +} + +.card { + background-color: var(--bulma-card-background-color); + border-radius: var(--bulma-card-radius); + box-shadow: var(--bulma-card-shadow); + color: var(--bulma-card-color); + max-width: 100%; + position: relative; +} + +.card-footer:first-child, .card-content:first-child, .card-header:first-child { + border-start-start-radius: var(--bulma-card-radius); + border-start-end-radius: var(--bulma-card-radius); +} +.card-footer:last-child, .card-content:last-child, .card-header:last-child { + border-end-start-radius: var(--bulma-card-radius); + border-end-end-radius: var(--bulma-card-radius); +} + +.card-header { + background-color: var(--bulma-card-header-background-color); + align-items: stretch; + box-shadow: var(--bulma-card-header-shadow); + display: flex; +} + +.card-header-title { + align-items: center; + color: var(--bulma-card-header-color); + display: flex; + flex-grow: 1; + font-weight: var(--bulma-card-header-weight); + padding: var(--bulma-card-header-padding); +} +.card-header-title.is-centered { + justify-content: center; +} + +.card-header-icon { + appearance: none; + background: none; + border: none; + color: inherit; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; + align-items: center; + cursor: pointer; + display: flex; + justify-content: center; + padding: var(--bulma-card-header-padding); +} + +.card-image { + display: block; + position: relative; +} +.card-image:first-child img { + border-start-start-radius: var(--bulma-card-radius); + border-start-end-radius: var(--bulma-card-radius); +} +.card-image:last-child img { + border-end-start-radius: var(--bulma-card-radius); + border-end-end-radius: var(--bulma-card-radius); +} + +.card-content { + background-color: var(--bulma-card-content-background-color); + padding: var(--bulma-card-content-padding); +} + +.card-footer { + background-color: var(--bulma-card-footer-background-color); + border-top: var(--bulma-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: var(--bulma-card-footer-padding); +} +.card-footer-item:not(:last-child) { + border-inline-end: var(--bulma-card-footer-border-top); +} + +.card .media:not(:last-child) { + margin-bottom: var(--bulma-card-media-margin); +} + +.dropdown { + --bulma-dropdown-menu-min-width: 12rem; + --bulma-dropdown-content-background-color: var(--bulma-scheme-main); + --bulma-dropdown-content-offset: 0.25rem; + --bulma-dropdown-content-padding-bottom: 0.5rem; + --bulma-dropdown-content-padding-top: 0.5rem; + --bulma-dropdown-content-radius: var(--bulma-radius); + --bulma-dropdown-content-shadow: var(--bulma-shadow); + --bulma-dropdown-content-z: 20; + --bulma-dropdown-item-h: var(--bulma-scheme-h); + --bulma-dropdown-item-s: var(--bulma-scheme-s); + --bulma-dropdown-item-l: var(--bulma-scheme-main-l); + --bulma-dropdown-item-background-l: var(--bulma-scheme-main-l); + --bulma-dropdown-item-background-l-delta: 0%; + --bulma-dropdown-item-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-dropdown-item-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-dropdown-item-color-l: var(--bulma-text-strong-l); + --bulma-dropdown-item-selected-h: var(--bulma-link-h); + --bulma-dropdown-item-selected-s: var(--bulma-link-s); + --bulma-dropdown-item-selected-l: var(--bulma-link-l); + --bulma-dropdown-item-selected-background-l: var(--bulma-link-l); + --bulma-dropdown-item-selected-color-l: var(--bulma-link-invert-l); + --bulma-dropdown-divider-background-color: var(--bulma-border-weak); +} + +.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: var(--bulma-dropdown-content-offset); + padding-top: initial; + top: auto; +} + +.dropdown-menu { + display: none; + left: 0; + min-width: var(--bulma-dropdown-menu-min-width); + padding-top: var(--bulma-dropdown-content-offset); + position: absolute; + top: 100%; + z-index: var(--bulma-dropdown-content-z); +} + +.dropdown-content { + background-color: var(--bulma-dropdown-content-background-color); + border-radius: var(--bulma-dropdown-content-radius); + box-shadow: var(--bulma-dropdown-content-shadow); + padding-bottom: var(--bulma-dropdown-content-padding-bottom); + padding-top: var(--bulma-dropdown-content-padding-top); +} + +.dropdown-item { + color: hsl(var(--bulma-dropdown-item-h), var(--bulma-dropdown-item-s), var(--bulma-dropdown-item-color-l)); + display: block; + font-size: 0.875rem; + line-height: 1.5; + padding: 0.375rem 1rem; +} + +a.dropdown-item, +button.dropdown-item { + background-color: hsl(var(--bulma-dropdown-item-h), var(--bulma-dropdown-item-s), calc(var(--bulma-dropdown-item-background-l) + var(--bulma-dropdown-item-background-l-delta))); + padding-inline-end: 3rem; + text-align: inherit; + white-space: nowrap; + width: 100%; +} +a.dropdown-item:hover, +button.dropdown-item:hover { + --bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-hover-background-l-delta); + --bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-hover-border-l-delta); +} +a.dropdown-item:active, +button.dropdown-item:active { + --bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-active-background-l-delta); + --bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-active-border-l-delta); +} +a.dropdown-item.is-active, a.dropdown-item.is-selected, +button.dropdown-item.is-active, +button.dropdown-item.is-selected { + --bulma-dropdown-item-h: var(--bulma-dropdown-item-selected-h); + --bulma-dropdown-item-s: var(--bulma-dropdown-item-selected-s); + --bulma-dropdown-item-l: var(--bulma-dropdown-item-selected-l); + --bulma-dropdown-item-background-l: var(--bulma-dropdown-item-selected-background-l); + --bulma-dropdown-item-color-l: var(--bulma-dropdown-item-selected-color-l); +} + +.dropdown-divider { + background-color: var(--bulma-dropdown-divider-background-color); + border: none; + display: block; + height: 1px; + margin: 0.5rem 0; +} + +.menu { + --bulma-menu-item-h: var(--bulma-scheme-h); + --bulma-menu-item-s: var(--bulma-scheme-s); + --bulma-menu-item-l: var(--bulma-scheme-main-l); + --bulma-menu-item-background-l: var(--bulma-scheme-main-l); + --bulma-menu-item-background-l-delta: 0%; + --bulma-menu-item-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-menu-item-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-menu-item-color-l: var(--bulma-text-l); + --bulma-menu-item-radius: var(--bulma-radius-small); + --bulma-menu-item-selected-h: var(--bulma-link-h); + --bulma-menu-item-selected-s: var(--bulma-link-s); + --bulma-menu-item-selected-l: var(--bulma-link-l); + --bulma-menu-item-selected-background-l: var(--bulma-link-l); + --bulma-menu-item-selected-color-l: var(--bulma-link-invert-l); + --bulma-menu-list-border-left: 1px solid var(--bulma-border); + --bulma-menu-list-line-height: 1.25; + --bulma-menu-list-link-padding: 0.5em 0.75em; + --bulma-menu-nested-list-margin: 0.75em; + --bulma-menu-nested-list-padding-left: 0.75em; + --bulma-menu-label-color: var(--bulma-text-weak); + --bulma-menu-label-font-size: 0.75em; + --bulma-menu-label-letter-spacing: 0.1em; + --bulma-menu-label-spacing: 1em; +} + +.menu { + font-size: var(--bulma-size-normal); +} +.menu.is-small { + font-size: var(--bulma-size-small); +} +.menu.is-medium { + font-size: var(--bulma-size-medium); +} +.menu.is-large { + font-size: var(--bulma-size-large); +} + +.menu-list { + line-height: var(--bulma-menu-list-line-height); +} +.menu-list a, +.menu-list button, +.menu-list .menu-item { + background-color: hsl(var(--bulma-menu-item-h), var(--bulma-menu-item-s), calc(var(--bulma-menu-item-background-l) + var(--bulma-menu-item-background-l-delta))); + border-radius: var(--bulma-menu-item-radius); + color: hsl(var(--bulma-menu-item-h), var(--bulma-menu-item-s), var(--bulma-menu-item-color-l)); + display: block; + padding: var(--bulma-menu-list-link-padding); + text-align: left; + width: 100%; +} +.menu-list a:hover, +.menu-list button:hover, +.menu-list .menu-item:hover { + --bulma-menu-item-background-l-delta: var(--bulma-menu-item-hover-background-l-delta); +} +.menu-list a:active, +.menu-list button:active, +.menu-list .menu-item:active { + --bulma-menu-item-background-l-delta: var(--bulma-menu-item-active-background-l-delta); +} +.menu-list a.is-active, .menu-list a.is-selected, +.menu-list button.is-active, +.menu-list button.is-selected, +.menu-list .menu-item.is-active, +.menu-list .menu-item.is-selected { + --bulma-menu-item-h: var(--bulma-menu-item-selected-h); + --bulma-menu-item-s: var(--bulma-menu-item-selected-s); + --bulma-menu-item-l: var(--bulma-menu-item-selected-l); + --bulma-menu-item-background-l: var(--bulma-menu-item-selected-background-l); + --bulma-menu-item-color-l: var(--bulma-menu-item-selected-color-l); +} +.menu-list li ul { + border-inline-start: var(--bulma-menu-list-border-left); + margin: var(--bulma-menu-nested-list-margin); + padding-inline-start: var(--bulma-menu-nested-list-padding-left); +} + +.menu-label { + color: var(--bulma-menu-label-color); + font-size: var(--bulma-menu-label-font-size); + letter-spacing: var(--bulma-menu-label-letter-spacing); + text-transform: uppercase; +} +.menu-label:not(:first-child) { + margin-top: var(--bulma-menu-label-spacing); +} +.menu-label:not(:last-child) { + margin-bottom: var(--bulma-menu-label-spacing); +} + +.message { + --bulma-message-border-l-delta: -20%; + --bulma-message-radius: var(--bulma-radius); + --bulma-message-header-weight: var(--bulma-weight-semibold); + --bulma-message-header-padding: 1em 1.25em; + --bulma-message-header-radius: var(--bulma-radius); + --bulma-message-body-border-width: 0 0 0 4px; + --bulma-message-body-color: var(--bulma-text); + --bulma-message-body-padding: 1.25em 1.5em; + --bulma-message-body-radius: var(--bulma-radius-small); + --bulma-message-body-pre-code-background-color: transparent; + --bulma-message-header-body-border-width: 0; + --bulma-message-h: var(--bulma-scheme-h); + --bulma-message-s: var(--bulma-scheme-s); + --bulma-message-background-l: var(--bulma-background-l); + --bulma-message-border-l: var(--bulma-border-l); + --bulma-message-border-style: solid; + --bulma-message-border-width: 0.25em; + --bulma-message-color-l: var(--bulma-text-l); + --bulma-message-header-background-l: var(--bulma-dark-l); + --bulma-message-header-color-l: var(--bulma-text-dark-invert-l); +} + +.message { + border-radius: var(--bulma-message-radius); + color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-color-l)); + font-size: var(--bulma-size-normal); +} +.message strong { + color: currentColor; +} +.message a:not(.button):not(.tag):not(.dropdown-item) { + color: currentColor; + text-decoration: underline; +} +.message.is-small { + font-size: var(--bulma-size-small); +} +.message.is-medium { + font-size: var(--bulma-size-medium); +} +.message.is-large { + font-size: var(--bulma-size-large); +} +.message.is-white { + --bulma-message-h: var(--bulma-white-h); + --bulma-message-s: var(--bulma-white-s); + --bulma-message-border-l: calc(var(--bulma-white-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-white-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-white-l); + --bulma-message-header-color-l: var(--bulma-white-invert-l); +} +.message.is-black { + --bulma-message-h: var(--bulma-black-h); + --bulma-message-s: var(--bulma-black-s); + --bulma-message-border-l: calc(var(--bulma-black-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-black-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-black-l); + --bulma-message-header-color-l: var(--bulma-black-invert-l); +} +.message.is-light { + --bulma-message-h: var(--bulma-light-h); + --bulma-message-s: var(--bulma-light-s); + --bulma-message-border-l: calc(var(--bulma-light-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-light-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-light-l); + --bulma-message-header-color-l: var(--bulma-light-invert-l); +} +.message.is-dark { + --bulma-message-h: var(--bulma-dark-h); + --bulma-message-s: var(--bulma-dark-s); + --bulma-message-border-l: calc(var(--bulma-dark-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-dark-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-dark-l); + --bulma-message-header-color-l: var(--bulma-dark-invert-l); +} +.message.is-text { + --bulma-message-h: var(--bulma-text-h); + --bulma-message-s: var(--bulma-text-s); + --bulma-message-border-l: calc(var(--bulma-text-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-text-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-text-l); + --bulma-message-header-color-l: var(--bulma-text-invert-l); +} +.message.is-primary { + --bulma-message-h: var(--bulma-primary-h); + --bulma-message-s: var(--bulma-primary-s); + --bulma-message-border-l: calc(var(--bulma-primary-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-primary-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-primary-l); + --bulma-message-header-color-l: var(--bulma-primary-invert-l); +} +.message.is-link { + --bulma-message-h: var(--bulma-link-h); + --bulma-message-s: var(--bulma-link-s); + --bulma-message-border-l: calc(var(--bulma-link-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-link-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-link-l); + --bulma-message-header-color-l: var(--bulma-link-invert-l); +} +.message.is-info { + --bulma-message-h: var(--bulma-info-h); + --bulma-message-s: var(--bulma-info-s); + --bulma-message-border-l: calc(var(--bulma-info-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-info-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-info-l); + --bulma-message-header-color-l: var(--bulma-info-invert-l); +} +.message.is-success { + --bulma-message-h: var(--bulma-success-h); + --bulma-message-s: var(--bulma-success-s); + --bulma-message-border-l: calc(var(--bulma-success-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-success-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-success-l); + --bulma-message-header-color-l: var(--bulma-success-invert-l); +} +.message.is-warning { + --bulma-message-h: var(--bulma-warning-h); + --bulma-message-s: var(--bulma-warning-s); + --bulma-message-border-l: calc(var(--bulma-warning-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-warning-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-warning-l); + --bulma-message-header-color-l: var(--bulma-warning-invert-l); +} +.message.is-danger { + --bulma-message-h: var(--bulma-danger-h); + --bulma-message-s: var(--bulma-danger-s); + --bulma-message-border-l: calc(var(--bulma-danger-l) + var(--bulma-message-border-l-delta)); + --bulma-message-color-l: var(--bulma-danger-on-scheme-l); + --bulma-message-header-background-l: var(--bulma-danger-l); + --bulma-message-header-color-l: var(--bulma-danger-invert-l); +} + +.message-header { + align-items: center; + background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-background-l)); + border-start-start-radius: var(--bulma-message-header-radius); + border-start-end-radius: var(--bulma-message-header-radius); + color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-color-l)); + display: flex; + font-weight: var(--bulma-message-header-weight); + justify-content: space-between; + line-height: 1.25; + padding: var(--bulma-message-header-padding); + position: relative; +} +.message-header .delete { + flex-grow: 0; + flex-shrink: 0; + margin-inline-start: 0.75em; +} +.message-header + .message-body { + border-width: var(--bulma-message-header-body-border-width); + border-start-start-radius: 0; + border-start-end-radius: 0; +} + +.message-body { + background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-background-l)); + border-inline-start-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-border-l)); + border-inline-start-style: var(--bulma-message-border-style); + border-inline-start-width: var(--bulma-message-border-width); + border-radius: var(--bulma-message-body-radius); + padding: var(--bulma-message-body-padding); +} +.message-body code, +.message-body pre { + background-color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-color-l)); + color: hsl(var(--bulma-message-h), var(--bulma-message-s), var(--bulma-message-header-background-l)); +} +.message-body pre code { + background-color: var(--bulma-message-body-pre-code-background-color); +} + +.modal { + --bulma-modal-z: 40; + --bulma-modal-background-background-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.86); + --bulma-modal-content-width: 40rem; + --bulma-modal-content-margin-mobile: 1.25rem; + --bulma-modal-content-spacing-mobile: 10rem; + --bulma-modal-content-spacing-tablet: 2.5rem; + --bulma-modal-close-dimensions: 2.5rem; + --bulma-modal-close-right: 1.25rem; + --bulma-modal-close-top: 1.25rem; + --bulma-modal-card-spacing: 2.5rem; + --bulma-modal-card-head-background-color: var(--bulma-scheme-main); + --bulma-modal-card-head-padding: 2rem; + --bulma-modal-card-head-radius: var(--bulma-radius-large); + --bulma-modal-card-title-color: var(--bulma-text-strong); + --bulma-modal-card-title-line-height: 1; + --bulma-modal-card-title-size: var(--bulma-size-4); + --bulma-modal-card-foot-background-color: var(--bulma-scheme-main-bis); + --bulma-modal-card-foot-radius: var(--bulma-radius-large); + --bulma-modal-card-body-background-color: var(--bulma-scheme-main); + --bulma-modal-card-body-padding: 2rem; +} + +.modal { + align-items: center; + display: none; + flex-direction: column; + justify-content: center; + overflow: hidden; + position: fixed; + z-index: var(--bulma-modal-z); +} +.modal.is-active { + display: flex; +} + +.modal-background { + background-color: var(--bulma-modal-background-background-color); +} + +.modal-content, +.modal-card { + margin: 0 var(--bulma-modal-content-margin-mobile); + max-height: calc(100vh - var(--bulma-modal-content-spacing-mobile)); + overflow: auto; + position: relative; + width: 100%; +} +@media screen and (min-width: 769px) { + .modal-content, + .modal-card { + margin: 0 auto; + max-height: calc(100vh - var(--bulma-modal-content-spacing-tablet)); + width: var(--bulma-modal-content-width); + } +} + +.modal-close { + background: none; + height: var(--bulma-modal-close-dimensions); + inset-inline-end: var(--bulma-modal-close-right); + position: fixed; + top: var(--bulma-modal-close-top); + width: var(--bulma-modal-close-dimensions); +} + +.modal-card { + display: flex; + flex-direction: column; + max-height: calc(100vh - var(--bulma-modal-card-spacing)); + overflow: hidden; + overflow-y: visible; +} + +.modal-card-head, +.modal-card-foot { + align-items: center; + display: flex; + flex-shrink: 0; + justify-content: flex-start; + padding: var(--bulma-modal-card-head-padding); + position: relative; +} + +.modal-card-head { + background-color: var(--bulma-modal-card-head-background-color); + border-start-start-radius: var(--bulma-modal-card-head-radius); + border-start-end-radius: var(--bulma-modal-card-head-radius); + box-shadow: var(--bulma-shadow); +} + +.modal-card-title { + color: var(--bulma-modal-card-title-color); + flex-grow: 1; + flex-shrink: 0; + font-size: var(--bulma-modal-card-title-size); + line-height: var(--bulma-modal-card-title-line-height); +} + +.modal-card-foot { + background-color: var(--bulma-modal-card-foot-background-color); + border-end-start-radius: var(--bulma-modal-card-foot-radius); + border-end-end-radius: var(--bulma-modal-card-foot-radius); +} + +.modal-card-body { + -webkit-overflow-scrolling: touch; + background-color: var(--bulma-modal-card-body-background-color); + flex-grow: 1; + flex-shrink: 1; + overflow: auto; + padding: var(--bulma-modal-card-body-padding); +} + +:root { + --bulma-navbar-height: 3.25rem; +} + +.navbar { + --bulma-navbar-h: var(--bulma-scheme-h); + --bulma-navbar-s: var(--bulma-scheme-s); + --bulma-navbar-l: var(--bulma-scheme-main-l); + --bulma-navbar-background-color: var(--bulma-scheme-main); + --bulma-navbar-box-shadow-size: 0 0.125em 0 0; + --bulma-navbar-box-shadow-color: var(--bulma-background); + --bulma-navbar-padding-vertical: 1rem; + --bulma-navbar-padding-horizontal: 2rem; + --bulma-navbar-z: 30; + --bulma-navbar-fixed-z: 30; + --bulma-navbar-item-background-a: 0; + --bulma-navbar-item-background-l: var(--bulma-scheme-main-l); + --bulma-navbar-item-background-l-delta: 0%; + --bulma-navbar-item-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-navbar-item-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-navbar-item-color-l: var(--bulma-text-l); + --bulma-navbar-item-selected-h: var(--bulma-link-h); + --bulma-navbar-item-selected-s: var(--bulma-link-s); + --bulma-navbar-item-selected-l: var(--bulma-link-l); + --bulma-navbar-item-selected-background-l: var(--bulma-link-l); + --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l); + --bulma-navbar-item-img-max-height: 1.75rem; + --bulma-navbar-burger-color: var(--bulma-navbar-item-color); + --bulma-navbar-tab-hover-background-color: transparent; + --bulma-navbar-tab-hover-border-bottom-color: var(--bulma-link); + --bulma-navbar-tab-active-color: var(--bulma-link); + --bulma-navbar-tab-active-background-color: transparent; + --bulma-navbar-tab-active-border-bottom-color: var(--bulma-link); + --bulma-navbar-tab-active-border-bottom-style: solid; + --bulma-navbar-tab-active-border-bottom-width: 0.1875em; + --bulma-navbar-dropdown-background-color: var(--bulma-scheme-main); + --bulma-navbar-dropdown-border-l: var(--bulma-border-l); + --bulma-navbar-dropdown-border-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-dropdown-border-l)); + --bulma-navbar-dropdown-border-style: solid; + --bulma-navbar-dropdown-border-width: 0.125em; + --bulma-navbar-dropdown-offset: -0.25em; + --bulma-navbar-dropdown-arrow: var(--bulma-link); + --bulma-navbar-dropdown-radius: var(--bulma-radius-large); + --bulma-navbar-dropdown-z: 20; + --bulma-navbar-dropdown-boxed-radius: var(--bulma-radius-large); + --bulma-navbar-dropdown-boxed-shadow: 0 0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1); + --bulma-navbar-dropdown-item-h: var(--bulma-scheme-h); + --bulma-navbar-dropdown-item-s: var(--bulma-scheme-s); + --bulma-navbar-dropdown-item-l: var(--bulma-scheme-main-l); + --bulma-navbar-dropdown-item-background-l: var(--bulma-scheme-main-l); + --bulma-navbar-dropdown-item-color-l: var(--bulma-text-l); + --bulma-navbar-divider-background-l: var(--bulma-background-l); + --bulma-navbar-divider-height: 0.125em; + --bulma-navbar-bottom-box-shadow-size: 0 -0.125em 0 0; +} + +.navbar { + background-color: var(--bulma-navbar-background-color); + min-height: var(--bulma-navbar-height); + position: relative; + z-index: var(--bulma-navbar-z); +} +.navbar.is-white { + --bulma-navbar-h: var(--bulma-white-h); + --bulma-navbar-s: var(--bulma-white-s); + --bulma-navbar-l: var(--bulma-white-l); + --bulma-burger-h: var(--bulma-white-h); + --bulma-burger-s: var(--bulma-white-s); + --bulma-burger-l: var(--bulma-white-invert-l); + --bulma-navbar-background-color: var(--bulma-white); + --bulma-navbar-item-background-l: var(--bulma-white-l); + --bulma-navbar-item-color-l: var(--bulma-white-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-white-h); + --bulma-navbar-item-selected-s: var(--bulma-white-s); + --bulma-navbar-item-selected-l: var(--bulma-white-l); + --bulma-navbar-item-selected-background-l: var(--bulma-white-l); + --bulma-navbar-item-selected-color-l: var(--bulma-white-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-white-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-white-h), var(--bulma-white-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-white-h); + --bulma-navbar-dropdown-item-s: var(--bulma-white-s); +} +.navbar.is-black { + --bulma-navbar-h: var(--bulma-black-h); + --bulma-navbar-s: var(--bulma-black-s); + --bulma-navbar-l: var(--bulma-black-l); + --bulma-burger-h: var(--bulma-black-h); + --bulma-burger-s: var(--bulma-black-s); + --bulma-burger-l: var(--bulma-black-invert-l); + --bulma-navbar-background-color: var(--bulma-black); + --bulma-navbar-item-background-l: var(--bulma-black-l); + --bulma-navbar-item-color-l: var(--bulma-black-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-black-h); + --bulma-navbar-item-selected-s: var(--bulma-black-s); + --bulma-navbar-item-selected-l: var(--bulma-black-l); + --bulma-navbar-item-selected-background-l: var(--bulma-black-l); + --bulma-navbar-item-selected-color-l: var(--bulma-black-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-black-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-black-h), var(--bulma-black-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-black-h); + --bulma-navbar-dropdown-item-s: var(--bulma-black-s); +} +.navbar.is-light { + --bulma-navbar-h: var(--bulma-light-h); + --bulma-navbar-s: var(--bulma-light-s); + --bulma-navbar-l: var(--bulma-light-l); + --bulma-burger-h: var(--bulma-light-h); + --bulma-burger-s: var(--bulma-light-s); + --bulma-burger-l: var(--bulma-light-invert-l); + --bulma-navbar-background-color: var(--bulma-light); + --bulma-navbar-item-background-l: var(--bulma-light-l); + --bulma-navbar-item-color-l: var(--bulma-light-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-light-h); + --bulma-navbar-item-selected-s: var(--bulma-light-s); + --bulma-navbar-item-selected-l: var(--bulma-light-l); + --bulma-navbar-item-selected-background-l: var(--bulma-light-l); + --bulma-navbar-item-selected-color-l: var(--bulma-light-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-light-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-light-h), var(--bulma-light-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-light-h); + --bulma-navbar-dropdown-item-s: var(--bulma-light-s); +} +.navbar.is-dark { + --bulma-navbar-h: var(--bulma-dark-h); + --bulma-navbar-s: var(--bulma-dark-s); + --bulma-navbar-l: var(--bulma-dark-l); + --bulma-burger-h: var(--bulma-dark-h); + --bulma-burger-s: var(--bulma-dark-s); + --bulma-burger-l: var(--bulma-dark-invert-l); + --bulma-navbar-background-color: var(--bulma-dark); + --bulma-navbar-item-background-l: var(--bulma-dark-l); + --bulma-navbar-item-color-l: var(--bulma-dark-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-dark-h); + --bulma-navbar-item-selected-s: var(--bulma-dark-s); + --bulma-navbar-item-selected-l: var(--bulma-dark-l); + --bulma-navbar-item-selected-background-l: var(--bulma-dark-l); + --bulma-navbar-item-selected-color-l: var(--bulma-dark-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-dark-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-dark-h); + --bulma-navbar-dropdown-item-s: var(--bulma-dark-s); +} +.navbar.is-text { + --bulma-navbar-h: var(--bulma-text-h); + --bulma-navbar-s: var(--bulma-text-s); + --bulma-navbar-l: var(--bulma-text-l); + --bulma-burger-h: var(--bulma-text-h); + --bulma-burger-s: var(--bulma-text-s); + --bulma-burger-l: var(--bulma-text-invert-l); + --bulma-navbar-background-color: var(--bulma-text); + --bulma-navbar-item-background-l: var(--bulma-text-l); + --bulma-navbar-item-color-l: var(--bulma-text-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-text-h); + --bulma-navbar-item-selected-s: var(--bulma-text-s); + --bulma-navbar-item-selected-l: var(--bulma-text-l); + --bulma-navbar-item-selected-background-l: var(--bulma-text-l); + --bulma-navbar-item-selected-color-l: var(--bulma-text-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-text-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-text-h); + --bulma-navbar-dropdown-item-s: var(--bulma-text-s); +} +.navbar.is-primary { + --bulma-navbar-h: var(--bulma-primary-h); + --bulma-navbar-s: var(--bulma-primary-s); + --bulma-navbar-l: var(--bulma-primary-l); + --bulma-burger-h: var(--bulma-primary-h); + --bulma-burger-s: var(--bulma-primary-s); + --bulma-burger-l: var(--bulma-primary-invert-l); + --bulma-navbar-background-color: var(--bulma-primary); + --bulma-navbar-item-background-l: var(--bulma-primary-l); + --bulma-navbar-item-color-l: var(--bulma-primary-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-primary-h); + --bulma-navbar-item-selected-s: var(--bulma-primary-s); + --bulma-navbar-item-selected-l: var(--bulma-primary-l); + --bulma-navbar-item-selected-background-l: var(--bulma-primary-l); + --bulma-navbar-item-selected-color-l: var(--bulma-primary-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-primary-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-primary-h); + --bulma-navbar-dropdown-item-s: var(--bulma-primary-s); +} +.navbar.is-link { + --bulma-navbar-h: var(--bulma-link-h); + --bulma-navbar-s: var(--bulma-link-s); + --bulma-navbar-l: var(--bulma-link-l); + --bulma-burger-h: var(--bulma-link-h); + --bulma-burger-s: var(--bulma-link-s); + --bulma-burger-l: var(--bulma-link-invert-l); + --bulma-navbar-background-color: var(--bulma-link); + --bulma-navbar-item-background-l: var(--bulma-link-l); + --bulma-navbar-item-color-l: var(--bulma-link-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-link-h); + --bulma-navbar-item-selected-s: var(--bulma-link-s); + --bulma-navbar-item-selected-l: var(--bulma-link-l); + --bulma-navbar-item-selected-background-l: var(--bulma-link-l); + --bulma-navbar-item-selected-color-l: var(--bulma-link-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-link-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-link-h); + --bulma-navbar-dropdown-item-s: var(--bulma-link-s); +} +.navbar.is-info { + --bulma-navbar-h: var(--bulma-info-h); + --bulma-navbar-s: var(--bulma-info-s); + --bulma-navbar-l: var(--bulma-info-l); + --bulma-burger-h: var(--bulma-info-h); + --bulma-burger-s: var(--bulma-info-s); + --bulma-burger-l: var(--bulma-info-invert-l); + --bulma-navbar-background-color: var(--bulma-info); + --bulma-navbar-item-background-l: var(--bulma-info-l); + --bulma-navbar-item-color-l: var(--bulma-info-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-info-h); + --bulma-navbar-item-selected-s: var(--bulma-info-s); + --bulma-navbar-item-selected-l: var(--bulma-info-l); + --bulma-navbar-item-selected-background-l: var(--bulma-info-l); + --bulma-navbar-item-selected-color-l: var(--bulma-info-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-info-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-info-h); + --bulma-navbar-dropdown-item-s: var(--bulma-info-s); +} +.navbar.is-success { + --bulma-navbar-h: var(--bulma-success-h); + --bulma-navbar-s: var(--bulma-success-s); + --bulma-navbar-l: var(--bulma-success-l); + --bulma-burger-h: var(--bulma-success-h); + --bulma-burger-s: var(--bulma-success-s); + --bulma-burger-l: var(--bulma-success-invert-l); + --bulma-navbar-background-color: var(--bulma-success); + --bulma-navbar-item-background-l: var(--bulma-success-l); + --bulma-navbar-item-color-l: var(--bulma-success-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-success-h); + --bulma-navbar-item-selected-s: var(--bulma-success-s); + --bulma-navbar-item-selected-l: var(--bulma-success-l); + --bulma-navbar-item-selected-background-l: var(--bulma-success-l); + --bulma-navbar-item-selected-color-l: var(--bulma-success-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-success-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-success-h); + --bulma-navbar-dropdown-item-s: var(--bulma-success-s); +} +.navbar.is-warning { + --bulma-navbar-h: var(--bulma-warning-h); + --bulma-navbar-s: var(--bulma-warning-s); + --bulma-navbar-l: var(--bulma-warning-l); + --bulma-burger-h: var(--bulma-warning-h); + --bulma-burger-s: var(--bulma-warning-s); + --bulma-burger-l: var(--bulma-warning-invert-l); + --bulma-navbar-background-color: var(--bulma-warning); + --bulma-navbar-item-background-l: var(--bulma-warning-l); + --bulma-navbar-item-color-l: var(--bulma-warning-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-warning-h); + --bulma-navbar-item-selected-s: var(--bulma-warning-s); + --bulma-navbar-item-selected-l: var(--bulma-warning-l); + --bulma-navbar-item-selected-background-l: var(--bulma-warning-l); + --bulma-navbar-item-selected-color-l: var(--bulma-warning-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-warning-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-warning-h); + --bulma-navbar-dropdown-item-s: var(--bulma-warning-s); +} +.navbar.is-danger { + --bulma-navbar-h: var(--bulma-danger-h); + --bulma-navbar-s: var(--bulma-danger-s); + --bulma-navbar-l: var(--bulma-danger-l); + --bulma-burger-h: var(--bulma-danger-h); + --bulma-burger-s: var(--bulma-danger-s); + --bulma-burger-l: var(--bulma-danger-invert-l); + --bulma-navbar-background-color: var(--bulma-danger); + --bulma-navbar-item-background-l: var(--bulma-danger-l); + --bulma-navbar-item-color-l: var(--bulma-danger-invert-l); + --bulma-navbar-item-selected-h: var(--bulma-danger-h); + --bulma-navbar-item-selected-s: var(--bulma-danger-s); + --bulma-navbar-item-selected-l: var(--bulma-danger-l); + --bulma-navbar-item-selected-background-l: var(--bulma-danger-l); + --bulma-navbar-item-selected-color-l: var(--bulma-danger-invert-l); + --bulma-navbar-dropdown-arrow: var(--bulma-danger-invert-l); + --bulma-navbar-dropdown-background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-navbar-dropdown-item-background-l)); + --bulma-navbar-dropdown-item-h: var(--bulma-danger-h); + --bulma-navbar-dropdown-item-s: var(--bulma-danger-s); +} +.navbar > .container { + align-items: stretch; + display: flex; + min-height: var(--bulma-navbar-height); + width: 100%; +} +.navbar.has-shadow { + box-shadow: var(--bulma-navbar-box-shadow-size) var(--bulma-navbar-box-shadow-color); +} +.navbar.is-fixed-bottom, .navbar.is-fixed-top { + left: 0; + position: fixed; + right: 0; + z-index: var(--bulma-navbar-fixed-z); +} +.navbar.is-fixed-bottom { + bottom: 0; +} +.navbar.is-fixed-bottom.has-shadow { + box-shadow: var(--bulma-navbar-bottom-box-shadow-size) var(--bulma-navbar-box-shadow-color); +} +.navbar.is-fixed-top { + top: 0; +} + +html.has-navbar-fixed-top, +body.has-navbar-fixed-top { + padding-top: var(--bulma-navbar-height); +} +html.has-navbar-fixed-bottom, +body.has-navbar-fixed-bottom { + padding-bottom: var(--bulma-navbar-height); +} + +.navbar-brand, +.navbar-tabs { + align-items: stretch; + display: flex; + flex-shrink: 0; + min-height: var(--bulma-navbar-height); +} + +.navbar-tabs { + -webkit-overflow-scrolling: touch; + max-width: 100vw; + overflow-x: auto; + overflow-y: hidden; +} + +.navbar-burger { + align-items: center; + appearance: none; + background: none; + border: none; + border-radius: var(--bulma-burger-border-radius); + color: hsl(var(--bulma-burger-h), var(--bulma-burger-s), var(--bulma-burger-l)); + cursor: pointer; + display: inline-flex; + flex-direction: column; + flex-shrink: 0; + height: 2.5rem; + justify-content: center; + position: relative; + vertical-align: top; + width: 2.5rem; + align-self: center; + margin-inline-start: auto; + margin-inline-end: 0.375rem; +} +.navbar-burger span { + background-color: currentColor; + display: block; + height: var(--bulma-burger-item-height); + left: calc(50% - (var(--bulma-burger-item-width)) / 2); + position: absolute; + transform-origin: center; + transition-duration: var(--bulma-duration); + transition-property: background-color, color, opacity, transform; + transition-timing-function: var(--bulma-easing); + width: var(--bulma-burger-item-width); +} +.navbar-burger span:nth-child(1), .navbar-burger span:nth-child(2) { + top: calc(50% - (var(--bulma-burger-item-height)) / 2); +} +.navbar-burger span:nth-child(3) { + bottom: calc(50% + var(--bulma-burger-gap)); +} +.navbar-burger span:nth-child(4) { + top: calc(50% + var(--bulma-burger-gap)); +} +.navbar-burger:hover { + background-color: hsla(var(--bulma-burger-h), var(--bulma-burger-s), var(--bulma-burger-l), 0.1); +} +.navbar-burger:active { + background-color: hsla(var(--bulma-burger-h), var(--bulma-burger-s), var(--bulma-burger-l), 0.2); +} +.navbar-burger.is-active span:nth-child(1) { + transform: rotate(-45deg); +} +.navbar-burger.is-active span:nth-child(2) { + transform: rotate(45deg); +} +.navbar-burger.is-active span:nth-child(3), .navbar-burger.is-active span:nth-child(4) { + opacity: 0; +} + +.navbar-menu { + display: none; +} + +.navbar-item, +.navbar-link { + color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l)); + 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 { + background-color: hsla(var(--bulma-navbar-h), var(--bulma-navbar-s), calc(var(--bulma-navbar-item-background-l) + var(--bulma-navbar-item-background-l-delta)), var(--bulma-navbar-item-background-a)); + cursor: pointer; +} +a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, +.navbar-link:focus, +.navbar-link:focus-within, +.navbar-link:hover { + --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-hover-background-l-delta); + --bulma-navbar-item-background-a: 1; +} +a.navbar-item:active, +.navbar-link:active { + --bulma-navbar-item-background-l-delta: var(--bulma-navbar-item-active-background-l-delta); + --bulma-navbar-item-background-a: 1; +} +a.navbar-item.is-active, a.navbar-item.is-selected, +.navbar-link.is-active, +.navbar-link.is-selected { + --bulma-navbar-h: var(--bulma-navbar-item-selected-h); + --bulma-navbar-s: var(--bulma-navbar-item-selected-s); + --bulma-navbar-l: var(--bulma-navbar-item-selected-l); + --bulma-navbar-item-background-l: var(--bulma-navbar-item-selected-background-l); + --bulma-navbar-item-background-a: 1; + --bulma-navbar-item-color-l: var(--bulma-navbar-item-selected-color-l); +} + +.navbar-item { + flex-grow: 0; + flex-shrink: 0; +} +.navbar-item img, +.navbar-item svg { + max-height: var(--bulma-navbar-item-img-max-height); +} +.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: var(--bulma-navbar-height); + padding-bottom: calc(0.5rem - 1px); +} +.navbar-item.is-tab:focus, .navbar-item.is-tab:hover { + background-color: var(--bulma-navbar-tab-hover-background-color); + border-bottom-color: var(--bulma-navbar-tab-hover-border-bottom-color); +} +.navbar-item.is-tab.is-active { + background-color: var(--bulma-navbar-tab-active-background-color); + border-bottom-color: var(--bulma-navbar-tab-active-border-bottom-color); + border-bottom-style: var(--bulma-navbar-tab-active-border-bottom-style); + border-bottom-width: var(--bulma-navbar-tab-active-border-bottom-width); + color: var(--bulma-navbar-tab-active-color); + padding-bottom: calc(0.5rem - var(--bulma-navbar-tab-active-border-bottom-width)); +} + +.navbar-content { + flex-grow: 1; + flex-shrink: 1; +} + +.navbar-link:not(.is-arrowless) { + padding-inline-end: 2.5em; +} +.navbar-link:not(.is-arrowless)::after { + border-color: var(--bulma-navbar-dropdown-arrow); + margin-top: -0.375em; + inset-inline-end: 1.125em; +} + +.navbar-dropdown { + font-size: 0.875rem; + padding-bottom: 0.75rem; + padding-top: 0.5rem; +} +.navbar-dropdown .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; +} +.navbar-dropdown .navbar-item:not(.is-active, .is-selected) { + background-color: hsl(var(--bulma-navbar-dropdown-item-h), var(--bulma-navbar-dropdown-item-s), calc(var(--bulma-navbar-dropdown-item-background-l) + var(--bulma-navbar-item-background-l-delta))); + color: hsl(var(--bulma-navbar-dropdown-item-h), var(--bulma-navbar-dropdown-item-s), var(--bulma-navbar-dropdown-item-color-l)); +} + +.navbar-divider { + background-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-divider-background-l)); + border: none; + display: none; + height: var(--bulma-navbar-divider-height); + 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: var(--bulma-navbar-background-color); + box-shadow: 0 0.5em 1em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 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: var(--bulma-navbar-fixed-z); + } + .navbar.is-fixed-bottom-touch { + bottom: 0; + } + .navbar.is-fixed-bottom-touch.has-shadow { + box-shadow: 0 -0.125em 0.1875em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 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 - var(--bulma-navbar-height)); + overflow: auto; + } + html.has-navbar-fixed-top-touch, + body.has-navbar-fixed-top-touch { + padding-top: var(--bulma-navbar-height); + } + html.has-navbar-fixed-bottom-touch, + body.has-navbar-fixed-bottom-touch { + padding-bottom: var(--bulma-navbar-height); + } +} +@media screen and (min-width: 1024px) { + .navbar, + .navbar-menu, + .navbar-start, + .navbar-end { + align-items: stretch; + display: flex; + } + .navbar { + min-height: var(--bulma-navbar-height); + } + .navbar.is-spaced { + padding: var(--bulma-navbar-padding-vertical) var(--bulma-navbar-padding-horizontal); + } + .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: var(--bulma-radius); + } + .navbar.is-transparent { + --bulma-navbar-item-background-a: 0; + } + .navbar.is-transparent .navbar-dropdown a.navbar-item { + background-color: hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), calc(var(--bulma-navbar-item-background-l) + var(--bulma-navbar-item-background-l-delta))); + } + .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active, .navbar.is-transparent .navbar-dropdown a.navbar-item.is-selected { + --bulma-navbar-h: var(--bulma-navbar-item-selected-h); + --bulma-navbar-s: var(--bulma-navbar-item-selected-s); + --bulma-navbar-l: var(--bulma-navbar-item-selected-l); + --bulma-navbar-item-background-l: var(--bulma-navbar-item-selected-background-l); + --bulma-navbar-item-color-l: var(--bulma-navbar-item-selected-color-l); + } + .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-color: var(--bulma-navbar-dropdown-border-color); + border-bottom-style: var(--bulma-navbar-dropdown-border-style); + border-bottom-width: var(--bulma-navbar-dropdown-border-width); + border-radius: var(--bulma-navbar-dropdown-radius) var(--bulma-navbar-dropdown-radius) 0 0; + border-top: none; + bottom: 100%; + box-shadow: 0 -0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 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-inline-end: auto; + } + .navbar-end { + justify-content: flex-end; + margin-inline-start: auto; + } + .navbar-dropdown { + background-color: var(--bulma-navbar-dropdown-background-color); + border-bottom-left-radius: var(--bulma-navbar-dropdown-radius); + border-bottom-right-radius: var(--bulma-navbar-dropdown-radius); + border-top-color: var(--bulma-navbar-dropdown-border-color); + border-top-style: var(--bulma-navbar-dropdown-border-style); + border-top-width: var(--bulma-navbar-dropdown-border-width); + box-shadow: 0 0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1); + display: none; + font-size: 0.875rem; + inset-inline-start: 0; + min-width: 100%; + position: absolute; + top: 100%; + z-index: var(--bulma-navbar-dropdown-z); + } + .navbar-dropdown .navbar-item { + padding: 0.375rem 1rem; + white-space: nowrap; + } + .navbar-dropdown a.navbar-item { + padding-inline-end: 3rem; + } + .navbar-dropdown a.navbar-item:not(.is-active, .is-selected) { + background-color: hsl(var(--bulma-navbar-dropdown-item-h), var(--bulma-navbar-dropdown-item-s), calc(var(--bulma-navbar-dropdown-item-background-l) + var(--bulma-navbar-item-background-l-delta))); + color: hsl(var(--bulma-navbar-dropdown-item-h), var(--bulma-navbar-dropdown-item-s), var(--bulma-navbar-dropdown-item-color-l)); + } + .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { + border-radius: var(--bulma-navbar-dropdown-boxed-radius); + border-top: none; + box-shadow: var(--bulma-navbar-dropdown-boxed-shadow); + display: block; + opacity: 0; + pointer-events: none; + top: calc(100% + (var(--bulma-navbar-dropdown-offset))); + transform: translateY(-5px); + transition-duration: var(--bulma-duration); + 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-inline-start: -0.75rem; + } + .navbar > .container .navbar-menu, + .container > .navbar .navbar-menu { + margin-inline-end: -0.75rem; + } + .navbar.is-fixed-bottom-desktop, .navbar.is-fixed-top-desktop { + left: 0; + position: fixed; + right: 0; + z-index: var(--bulma-navbar-fixed-z); + } + .navbar.is-fixed-bottom-desktop { + bottom: 0; + } + .navbar.is-fixed-bottom-desktop.has-shadow { + box-shadow: 0 -0.125em 0.1875em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1); + } + .navbar.is-fixed-top-desktop { + top: 0; + } + html.has-navbar-fixed-top-desktop, + body.has-navbar-fixed-top-desktop { + padding-top: var(--bulma-navbar-height); + } + html.has-navbar-fixed-bottom-desktop, + body.has-navbar-fixed-bottom-desktop { + padding-bottom: var(--bulma-navbar-height); + } + html.has-spaced-navbar-fixed-top, + body.has-spaced-navbar-fixed-top { + padding-top: calc(var(--bulma-navbar-height) + var(--bulma-navbar-padding-vertical) * 2); + } + html.has-spaced-navbar-fixed-bottom, + body.has-spaced-navbar-fixed-bottom { + padding-bottom: calc(var(--bulma-navbar-height) + var(--bulma-navbar-padding-vertical) * 2); + } +} +.hero.is-fullheight-with-navbar { + min-height: calc(100vh - var(--bulma-navbar-height)); +} + +.pagination { + --bulma-pagination-margin: -0.25rem; + --bulma-pagination-min-width: var(--bulma-control-height); + --bulma-pagination-item-h: var(--bulma-scheme-h); + --bulma-pagination-item-s: var(--bulma-scheme-s); + --bulma-pagination-item-l: var(--bulma-scheme-main-l); + --bulma-pagination-item-background-l-delta: 0%; + --bulma-pagination-item-hover-background-l-delta: var(--bulma-hover-background-l-delta); + --bulma-pagination-item-active-background-l-delta: var(--bulma-active-background-l-delta); + --bulma-pagination-item-border-style: solid; + --bulma-pagination-item-border-width: var(--bulma-control-border-width); + --bulma-pagination-item-border-l: var(--bulma-border-l); + --bulma-pagination-item-border-l-delta: 0%; + --bulma-pagination-item-hover-border-l-delta: var(--bulma-hover-border-l-delta); + --bulma-pagination-item-active-border-l-delta: var(--bulma-active-border-l-delta); + --bulma-pagination-item-focus-border-l-delta: var(--bulma-focus-border-l-delta); + --bulma-pagination-item-color-l: var(--bulma-text-strong-l); + --bulma-pagination-item-font-size: 1em; + --bulma-pagination-item-margin: 0.25rem; + --bulma-pagination-item-padding-left: 0.5em; + --bulma-pagination-item-padding-right: 0.5em; + --bulma-pagination-item-outer-shadow-h: 0; + --bulma-pagination-item-outer-shadow-s: 0%; + --bulma-pagination-item-outer-shadow-l: 20%; + --bulma-pagination-item-outer-shadow-a: 0.05; + --bulma-pagination-nav-padding-left: 0.75em; + --bulma-pagination-nav-padding-right: 0.75em; + --bulma-pagination-disabled-color: var(--bulma-text-weak); + --bulma-pagination-disabled-background-color: var(--bulma-border); + --bulma-pagination-disabled-border-color: var(--bulma-border); + --bulma-pagination-current-color: var(--bulma-link-invert); + --bulma-pagination-current-background-color: var(--bulma-link); + --bulma-pagination-current-border-color: var(--bulma-link); + --bulma-pagination-ellipsis-color: var(--bulma-text-weak); + --bulma-pagination-shadow-inset: inset 0 0.0625em 0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2); + --bulma-pagination-selected-item-h: var(--bulma-link-h); + --bulma-pagination-selected-item-s: var(--bulma-link-s); + --bulma-pagination-selected-item-l: var(--bulma-link-l); + --bulma-pagination-selected-item-background-l: var(--bulma-link-l); + --bulma-pagination-selected-item-border-l: var(--bulma-link-l); + --bulma-pagination-selected-item-color-l: var(--bulma-link-invert-l); +} + +.pagination { + font-size: var(--bulma-size-normal); + margin: var(--bulma-pagination-margin); +} +.pagination.is-small { + font-size: var(--bulma-size-small); +} +.pagination.is-medium { + font-size: var(--bulma-size-medium); +} +.pagination.is-large { + font-size: var(--bulma-size-large); +} +.pagination.is-rounded .pagination-previous, +.pagination.is-rounded .pagination-next { + padding-left: 1em; + padding-right: 1em; + border-radius: var(--bulma-radius-rounded); +} +.pagination.is-rounded .pagination-link { + border-radius: var(--bulma-radius-rounded); +} + +.pagination, +.pagination-list { + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + color: hsl(var(--bulma-pagination-item-h), var(--bulma-pagination-item-s), var(--bulma-pagination-item-color-l)); + font-size: var(--bulma-pagination-item-font-size); + justify-content: center; + margin: var(--bulma-pagination-item-margin); + padding-left: var(--bulma-pagination-item-padding-left); + padding-right: var(--bulma-pagination-item-padding-right); + text-align: center; +} + +.pagination-previous, +.pagination-next, +.pagination-link { + background-color: hsl(var(--bulma-pagination-item-h), var(--bulma-pagination-item-s), calc(var(--bulma-pagination-item-background-l) + var(--bulma-pagination-item-background-l-delta))); + border-color: hsl(var(--bulma-pagination-item-h), var(--bulma-pagination-item-s), calc(var(--bulma-pagination-item-border-l) + var(--bulma-pagination-item-border-l-delta))); + border-style: var(--bulma-pagination-item-border-style); + border-width: var(--bulma-pagination-item-border-width); + box-shadow: 0px 0.0625em 0.125em hsla(var(--bulma-pagination-item-outer-shadow-h), var(--bulma-pagination-item-outer-shadow-s), var(--bulma-pagination-item-outer-shadow-l), var(--bulma-pagination-item-outer-shadow-a)), 0px 0.125em 0.25em hsla(var(--bulma-pagination-item-outer-shadow-h), var(--bulma-pagination-item-outer-shadow-s), var(--bulma-pagination-item-outer-shadow-l), var(--bulma-pagination-item-outer-shadow-a)); + color: hsl(var(--bulma-pagination-item-h), var(--bulma-pagination-item-s), var(--bulma-pagination-item-color-l)); + min-width: var(--bulma-pagination-min-width); + transition-duration: var(--bulma-duration); + transition-property: background-color, border-color, box-shadow, color; +} +.pagination-previous:hover, +.pagination-next:hover, +.pagination-link:hover { + --bulma-pagination-item-background-l-delta: var(--bulma-pagination-item-hover-background-l-delta); + --bulma-pagination-item-border-l-delta: var(--bulma-pagination-item-hover-border-l-delta); +} +.pagination-previous:focus, +.pagination-next:focus, +.pagination-link:focus { + --bulma-pagination-item-background-l-delta: var(--bulma-pagination-item-hover-background-l-delta); + --bulma-pagination-item-border-l-delta: var(--bulma-pagination-item-hover-border-l-delta); +} +.pagination-previous:active, +.pagination-next:active, +.pagination-link:active { + box-shadow: var(--bulma-pagination-shadow-inset); +} +.pagination-previous[disabled], .pagination-previous.is-disabled, +.pagination-next[disabled], +.pagination-next.is-disabled, +.pagination-link[disabled], +.pagination-link.is-disabled { + background-color: var(--bulma-pagination-disabled-background-color); + border-color: var(--bulma-pagination-disabled-border-color); + box-shadow: none; + color: var(--bulma-pagination-disabled-color); + opacity: 0.5; +} + +.pagination-previous, +.pagination-next { + padding-left: var(--bulma-pagination-nav-padding-left); + padding-right: var(--bulma-pagination-nav-padding-right); + white-space: nowrap; +} + +.pagination-link.is-current, .pagination-link.is-selected { + --bulma-pagination-item-h: var(--bulma-pagination-selected-item-h); + --bulma-pagination-item-s: var(--bulma-pagination-selected-item-s); + --bulma-pagination-item-l: var(--bulma-pagination-selected-item-l); + --bulma-pagination-item-background-l: var(--bulma-pagination-selected-item-background-l); + --bulma-pagination-item-border-l: var(--bulma-pagination-selected-item-border-l); + --bulma-pagination-item-color-l: var(--bulma-pagination-selected-item-color-l); +} + +.pagination-ellipsis { + color: var(--bulma-pagination-ellipsis-color); + 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 { + --bulma-panel-margin: var(--bulma-block-spacing); + --bulma-panel-item-border: 1px solid var(--bulma-border-weak); + --bulma-panel-radius: var(--bulma-radius-large); + --bulma-panel-shadow: var(--bulma-shadow); + --bulma-panel-heading-line-height: 1.25; + --bulma-panel-heading-padding: 1em 1.25em; + --bulma-panel-heading-radius: var(--bulma-radius); + --bulma-panel-heading-size: 1.25em; + --bulma-panel-heading-weight: var(--bulma-weight-bold); + --bulma-panel-tabs-font-size: 1em; + --bulma-panel-tab-border-bottom-color: var(--bulma-border); + --bulma-panel-tab-border-bottom-style: solid; + --bulma-panel-tab-border-bottom-width: 1px; + --bulma-panel-tab-active-color: var(--bulma-link-active); + --bulma-panel-list-item-color: var(--bulma-text); + --bulma-panel-list-item-hover-color: var(--bulma-link); + --bulma-panel-block-color: var(--bulma-text-strong); + --bulma-panel-block-hover-background-color: var(--bulma-background); + --bulma-panel-block-active-border-left-color: var(--bulma-link); + --bulma-panel-block-active-color: var(--bulma-link-active); + --bulma-panel-block-active-icon-color: var(--bulma-link); + --bulma-panel-icon-color: var(--bulma-text-weak); +} + +.panel { + --bulma-panel-h: var(--bulma-scheme-h); + --bulma-panel-s: var(--bulma-scheme-s); + --bulma-panel-color-l: var(--bulma-text-l); + --bulma-panel-heading-background-l: var(--bulma-text-l); + --bulma-panel-heading-color-l: var(--bulma-text-invert-l); + border-radius: var(--bulma-panel-radius); + box-shadow: var(--bulma-panel-shadow); + font-size: var(--bulma-size-normal); +} +.panel:not(:last-child) { + margin-bottom: var(--bulma-panel-margin); +} +.panel.is-white { + --bulma-panel-h: var(--bulma-white-h); + --bulma-panel-s: var(--bulma-white-s); + --bulma-panel-color-l: var(--bulma-white-l); + --bulma-panel-heading-background-l: var(--bulma-white-l); + --bulma-panel-heading-color-l: var(--bulma-white-invert-l); +} +.panel.is-black { + --bulma-panel-h: var(--bulma-black-h); + --bulma-panel-s: var(--bulma-black-s); + --bulma-panel-color-l: var(--bulma-black-l); + --bulma-panel-heading-background-l: var(--bulma-black-l); + --bulma-panel-heading-color-l: var(--bulma-black-invert-l); +} +.panel.is-light { + --bulma-panel-h: var(--bulma-light-h); + --bulma-panel-s: var(--bulma-light-s); + --bulma-panel-color-l: var(--bulma-light-l); + --bulma-panel-heading-background-l: var(--bulma-light-l); + --bulma-panel-heading-color-l: var(--bulma-light-invert-l); +} +.panel.is-dark { + --bulma-panel-h: var(--bulma-dark-h); + --bulma-panel-s: var(--bulma-dark-s); + --bulma-panel-color-l: var(--bulma-dark-l); + --bulma-panel-heading-background-l: var(--bulma-dark-l); + --bulma-panel-heading-color-l: var(--bulma-dark-invert-l); +} +.panel.is-text { + --bulma-panel-h: var(--bulma-text-h); + --bulma-panel-s: var(--bulma-text-s); + --bulma-panel-color-l: var(--bulma-text-l); + --bulma-panel-heading-background-l: var(--bulma-text-l); + --bulma-panel-heading-color-l: var(--bulma-text-invert-l); +} +.panel.is-primary { + --bulma-panel-h: var(--bulma-primary-h); + --bulma-panel-s: var(--bulma-primary-s); + --bulma-panel-color-l: var(--bulma-primary-l); + --bulma-panel-heading-background-l: var(--bulma-primary-l); + --bulma-panel-heading-color-l: var(--bulma-primary-invert-l); +} +.panel.is-link { + --bulma-panel-h: var(--bulma-link-h); + --bulma-panel-s: var(--bulma-link-s); + --bulma-panel-color-l: var(--bulma-link-l); + --bulma-panel-heading-background-l: var(--bulma-link-l); + --bulma-panel-heading-color-l: var(--bulma-link-invert-l); +} +.panel.is-info { + --bulma-panel-h: var(--bulma-info-h); + --bulma-panel-s: var(--bulma-info-s); + --bulma-panel-color-l: var(--bulma-info-l); + --bulma-panel-heading-background-l: var(--bulma-info-l); + --bulma-panel-heading-color-l: var(--bulma-info-invert-l); +} +.panel.is-success { + --bulma-panel-h: var(--bulma-success-h); + --bulma-panel-s: var(--bulma-success-s); + --bulma-panel-color-l: var(--bulma-success-l); + --bulma-panel-heading-background-l: var(--bulma-success-l); + --bulma-panel-heading-color-l: var(--bulma-success-invert-l); +} +.panel.is-warning { + --bulma-panel-h: var(--bulma-warning-h); + --bulma-panel-s: var(--bulma-warning-s); + --bulma-panel-color-l: var(--bulma-warning-l); + --bulma-panel-heading-background-l: var(--bulma-warning-l); + --bulma-panel-heading-color-l: var(--bulma-warning-invert-l); +} +.panel.is-danger { + --bulma-panel-h: var(--bulma-danger-h); + --bulma-panel-s: var(--bulma-danger-s); + --bulma-panel-color-l: var(--bulma-danger-l); + --bulma-panel-heading-background-l: var(--bulma-danger-l); + --bulma-panel-heading-color-l: var(--bulma-danger-invert-l); +} + +.panel-tabs:not(:last-child), +.panel-block:not(:last-child) { + border-bottom: var(--bulma-panel-item-border); +} + +.panel-heading { + background-color: hsl(var(--bulma-panel-h), var(--bulma-panel-s), var(--bulma-panel-heading-background-l)); + border-radius: var(--bulma-panel-radius) var(--bulma-panel-radius) 0 0; + color: hsl(var(--bulma-panel-h), var(--bulma-panel-s), var(--bulma-panel-heading-color-l)); + font-size: var(--bulma-panel-heading-size); + font-weight: var(--bulma-panel-heading-weight); + line-height: var(--bulma-panel-heading-line-height); + padding: var(--bulma-panel-heading-padding); +} + +.panel-tabs { + align-items: flex-end; + display: flex; + font-size: var(--bulma-panel-tabs-font-size); + justify-content: center; +} +.panel-tabs a { + border-bottom-color: var(--bulma-panel-tab-border-bottom-color); + border-bottom-style: var(--bulma-panel-tab-border-bottom-style); + border-bottom-width: var(--bulma-panel-tab-border-bottom-width); + margin-bottom: calc(-1 * 1px); + padding: 0.75em; +} +.panel-tabs a.is-active { + border-bottom-color: hsl(var(--bulma-panel-h), var(--bulma-panel-s), var(--bulma-panel-color-l)); + color: var(--bulma-panel-tab-active-color); +} + +.panel-list a { + color: var(--bulma-panel-list-item-color); +} +.panel-list a:hover { + color: var(--bulma-panel-list-item-hover-color); +} + +.panel-block { + align-items: center; + color: var(--bulma-panel-block-color); + display: flex; + justify-content: flex-start; + padding: 0.75em 1em; +} +.panel-block input[type=checkbox] { + margin-inline-end: 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: var(--bulma-panel-block-active-border-left-color); + color: var(--bulma-panel-block-active-color); +} +.panel-block.is-active .panel-icon { + color: hsl(var(--bulma-panel-h), var(--bulma-panel-s), var(--bulma-panel-color-l)); +} +.panel-block:last-child { + border-bottom-left-radius: var(--bulma-panel-radius); + border-bottom-right-radius: var(--bulma-panel-radius); +} + +a.panel-block, +label.panel-block { + cursor: pointer; +} +a.panel-block:hover, +label.panel-block:hover { + background-color: var(--bulma-panel-block-hover-background-color); +} + +.panel-icon { + display: inline-block; + font-size: 1em; + height: 1em; + line-height: 1em; + text-align: center; + vertical-align: top; + width: 1em; + color: var(--bulma-panel-icon-color); + margin-inline-end: 0.75em; +} +.panel-icon .fa { + font-size: inherit; + line-height: inherit; +} + +.tabs { + --bulma-tabs-border-bottom-color: var(--bulma-border); + --bulma-tabs-border-bottom-style: solid; + --bulma-tabs-border-bottom-width: 1px; + --bulma-tabs-link-color: var(--bulma-text); + --bulma-tabs-link-hover-border-bottom-color: var(--bulma-text-strong); + --bulma-tabs-link-hover-color: var(--bulma-text-strong); + --bulma-tabs-link-active-border-bottom-color: var(--bulma-link-text); + --bulma-tabs-link-active-color: var(--bulma-link-text); + --bulma-tabs-link-padding: 0.5em 1em; + --bulma-tabs-boxed-link-radius: var(--bulma-radius); + --bulma-tabs-boxed-link-hover-background-color: var(--bulma-background); + --bulma-tabs-boxed-link-hover-border-bottom-color: var(--bulma-border); + --bulma-tabs-boxed-link-active-background-color: var(--bulma-scheme-main); + --bulma-tabs-boxed-link-active-border-color: var(--bulma-border); + --bulma-tabs-boxed-link-active-border-bottom-color: transparent; + --bulma-tabs-toggle-link-border-color: var(--bulma-border); + --bulma-tabs-toggle-link-border-style: solid; + --bulma-tabs-toggle-link-border-width: 1px; + --bulma-tabs-toggle-link-hover-background-color: var(--bulma-background); + --bulma-tabs-toggle-link-hover-border-color: var(--bulma-border-hover); + --bulma-tabs-toggle-link-radius: var(--bulma-radius); + --bulma-tabs-toggle-link-active-background-color: var(--bulma-link); + --bulma-tabs-toggle-link-active-border-color: var(--bulma-link); + --bulma-tabs-toggle-link-active-color: var(--bulma-link-invert); +} + +.tabs { + -webkit-overflow-scrolling: touch; + align-items: stretch; + display: flex; + font-size: var(--bulma-size-normal); + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + white-space: nowrap; +} +.tabs a { + align-items: center; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); + color: var(--bulma-tabs-link-color); + display: flex; + justify-content: center; + margin-bottom: calc(-1 * var(--bulma-tabs-border-bottom-width)); + padding: var(--bulma-tabs-link-padding); + transition-duration: var(--bulma-duration); + transition-property: background-color, border-color, color; + vertical-align: top; +} +.tabs a:hover { + border-bottom-color: var(--bulma-tabs-link-hover-border-bottom-color); + color: var(--bulma-tabs-link-hover-color); +} +.tabs li { + display: block; +} +.tabs li.is-active a { + border-bottom-color: var(--bulma-tabs-link-active-border-bottom-color); + color: var(--bulma-tabs-link-active-color); +} +.tabs ul { + align-items: center; + border-bottom-color: var(--bulma-tabs-border-bottom-color); + border-bottom-style: var(--bulma-tabs-border-bottom-style); + border-bottom-width: var(--bulma-tabs-border-bottom-width); + 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-inline-end: 0.5em; +} +.tabs .icon:last-child { + margin-inline-start: 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-start-start-radius: var(--bulma-tabs-boxed-link-radius); + border-start-end-radius: var(--bulma-tabs-boxed-link-radius); +} +.tabs.is-boxed a:hover { + background-color: var(--bulma-tabs-boxed-link-hover-background-color); + border-bottom-color: var(--bulma-tabs-boxed-link-hover-border-bottom-color); +} +.tabs.is-boxed li.is-active a { + background-color: var(--bulma-tabs-boxed-link-active-background-color); + border-color: var(--bulma-tabs-boxed-link-active-border-color); + border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important; +} +.tabs.is-fullwidth li { + flex-grow: 1; + flex-shrink: 0; +} +.tabs.is-toggle a { + border-color: var(--bulma-tabs-toggle-link-border-color); + border-style: var(--bulma-tabs-toggle-link-border-style); + border-width: var(--bulma-tabs-toggle-link-border-width); + margin-bottom: 0; + position: relative; +} +.tabs.is-toggle a:hover { + background-color: var(--bulma-tabs-toggle-link-hover-background-color); + border-color: var(--bulma-tabs-toggle-link-hover-border-color); + z-index: 2; +} +.tabs.is-toggle li + li { + margin-inline-start: calc(-1 * var(--bulma-tabs-toggle-link-border-width)); +} +.tabs.is-toggle li:first-child a { + border-start-start-radius: var(--bulma-tabs-toggle-link-radius); + border-end-start-radius: var(--bulma-tabs-toggle-link-radius); +} +.tabs.is-toggle li:last-child a { + border-start-end-radius: var(--bulma-tabs-toggle-link-radius); + border-end-end-radius: var(--bulma-tabs-toggle-link-radius); +} +.tabs.is-toggle li.is-active a { + background-color: var(--bulma-tabs-toggle-link-active-background-color); + border-color: var(--bulma-tabs-toggle-link-active-border-color); + color: var(--bulma-tabs-toggle-link-active-color); + z-index: 1; +} +.tabs.is-toggle ul { + border-bottom: none; +} +.tabs.is-toggle.is-toggle-rounded li:first-child a { + border-start-start-radius: var(--bulma-radius-rounded); + border-end-start-radius: var(--bulma-radius-rounded); + padding-inline-start: 1.25em; +} +.tabs.is-toggle.is-toggle-rounded li:last-child a { + border-start-end-radius: var(--bulma-radius-rounded); + border-end-end-radius: var(--bulma-radius-rounded); + padding-inline-end: 1.25em; +} +.tabs.is-small { + font-size: var(--bulma-size-small); +} +.tabs.is-medium { + font-size: var(--bulma-size-medium); +} +.tabs.is-large { + font-size: var(--bulma-size-large); +} + +/* Bulma Grid */ +:root { + --bulma-column-gap: 0.75rem; +} + +.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-inline-start: 75%; +} +.columns.is-mobile > .column.is-offset-two-thirds { + margin-inline-start: 66.6666%; +} +.columns.is-mobile > .column.is-offset-half { + margin-inline-start: 50%; +} +.columns.is-mobile > .column.is-offset-one-third { + margin-inline-start: 0.3333%; +} +.columns.is-mobile > .column.is-offset-one-quarter { + margin-inline-start: 25%; +} +.columns.is-mobile > .column.is-offset-one-fifth { + margin-inline-start: 20%; +} +.columns.is-mobile > .column.is-offset-two-fifths { + margin-inline-start: 40%; +} +.columns.is-mobile > .column.is-offset-three-fifths { + margin-inline-start: 60%; +} +.columns.is-mobile > .column.is-offset-four-fifths { + margin-inline-start: 80%; +} +.columns.is-mobile > .column.is-0 { + flex: none; + width: calc(0% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-0 { + margin-inline-start: 0%; +} +.columns.is-mobile > .column.is-1 { + flex: none; + width: calc(8.3333333333% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-1 { + margin-inline-start: 8.3333333333%; +} +.columns.is-mobile > .column.is-2 { + flex: none; + width: calc(16.6666666667% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-2 { + margin-inline-start: 16.6666666667%; +} +.columns.is-mobile > .column.is-3 { + flex: none; + width: calc(25% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-3 { + margin-inline-start: 25%; +} +.columns.is-mobile > .column.is-4 { + flex: none; + width: calc(33.3333333333% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-4 { + margin-inline-start: 33.3333333333%; +} +.columns.is-mobile > .column.is-5 { + flex: none; + width: calc(41.6666666667% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-5 { + margin-inline-start: 41.6666666667%; +} +.columns.is-mobile > .column.is-6 { + flex: none; + width: calc(50% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-6 { + margin-inline-start: 50%; +} +.columns.is-mobile > .column.is-7 { + flex: none; + width: calc(58.3333333333% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-7 { + margin-inline-start: 58.3333333333%; +} +.columns.is-mobile > .column.is-8 { + flex: none; + width: calc(66.6666666667% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-8 { + margin-inline-start: 66.6666666667%; +} +.columns.is-mobile > .column.is-9 { + flex: none; + width: calc(75% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-9 { + margin-inline-start: 75%; +} +.columns.is-mobile > .column.is-10 { + flex: none; + width: calc(83.3333333333% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-10 { + margin-inline-start: 83.3333333333%; +} +.columns.is-mobile > .column.is-11 { + flex: none; + width: calc(91.6666666667% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-11 { + margin-inline-start: 91.6666666667%; +} +.columns.is-mobile > .column.is-12 { + flex: none; + width: calc(100% - var(--bulma-column-gap) / 2); +} +.columns.is-mobile > .column.is-offset-12 { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds-mobile { + margin-inline-start: 66.6666%; + } + .column.is-offset-half-mobile { + margin-inline-start: 50%; + } + .column.is-offset-one-third-mobile { + margin-inline-start: 0.3333%; + } + .column.is-offset-one-quarter-mobile { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth-mobile { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths-mobile { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths-mobile { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths-mobile { + margin-inline-start: 80%; + } + .column.is-0-mobile { + flex: none; + width: calc(0% - var(--bulma-column-gap) / 2); + } + .column.is-offset-0-mobile { + margin-inline-start: 0%; + } + .column.is-1-mobile { + flex: none; + width: calc(8.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-1-mobile { + margin-inline-start: 8.3333333333%; + } + .column.is-2-mobile { + flex: none; + width: calc(16.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-2-mobile { + margin-inline-start: 16.6666666667%; + } + .column.is-3-mobile { + flex: none; + width: calc(25% - var(--bulma-column-gap) / 2); + } + .column.is-offset-3-mobile { + margin-inline-start: 25%; + } + .column.is-4-mobile { + flex: none; + width: calc(33.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-4-mobile { + margin-inline-start: 33.3333333333%; + } + .column.is-5-mobile { + flex: none; + width: calc(41.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-5-mobile { + margin-inline-start: 41.6666666667%; + } + .column.is-6-mobile { + flex: none; + width: calc(50% - var(--bulma-column-gap) / 2); + } + .column.is-offset-6-mobile { + margin-inline-start: 50%; + } + .column.is-7-mobile { + flex: none; + width: calc(58.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-7-mobile { + margin-inline-start: 58.3333333333%; + } + .column.is-8-mobile { + flex: none; + width: calc(66.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-8-mobile { + margin-inline-start: 66.6666666667%; + } + .column.is-9-mobile { + flex: none; + width: calc(75% - var(--bulma-column-gap) / 2); + } + .column.is-offset-9-mobile { + margin-inline-start: 75%; + } + .column.is-10-mobile { + flex: none; + width: calc(83.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-10-mobile { + margin-inline-start: 83.3333333333%; + } + .column.is-11-mobile { + flex: none; + width: calc(91.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-11-mobile { + margin-inline-start: 91.6666666667%; + } + .column.is-12-mobile { + flex: none; + width: calc(100% - var(--bulma-column-gap) / 2); + } + .column.is-offset-12-mobile { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet { + margin-inline-start: 66.6666%; + } + .column.is-offset-half, .column.is-offset-half-tablet { + margin-inline-start: 50%; + } + .column.is-offset-one-third, .column.is-offset-one-third-tablet { + margin-inline-start: 0.3333%; + } + .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth, .column.is-offset-one-fifth-tablet { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths, .column.is-offset-two-fifths-tablet { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths, .column.is-offset-three-fifths-tablet { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths, .column.is-offset-four-fifths-tablet { + margin-inline-start: 80%; + } + .column.is-0, .column.is-0-tablet { + flex: none; + width: calc(0% - var(--bulma-column-gap) / 2); + } + .column.is-offset-0, .column.is-offset-0-tablet { + margin-inline-start: 0%; + } + .column.is-1, .column.is-1-tablet { + flex: none; + width: calc(8.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-1, .column.is-offset-1-tablet { + margin-inline-start: 8.3333333333%; + } + .column.is-2, .column.is-2-tablet { + flex: none; + width: calc(16.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-2, .column.is-offset-2-tablet { + margin-inline-start: 16.6666666667%; + } + .column.is-3, .column.is-3-tablet { + flex: none; + width: calc(25% - var(--bulma-column-gap) / 2); + } + .column.is-offset-3, .column.is-offset-3-tablet { + margin-inline-start: 25%; + } + .column.is-4, .column.is-4-tablet { + flex: none; + width: calc(33.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-4, .column.is-offset-4-tablet { + margin-inline-start: 33.3333333333%; + } + .column.is-5, .column.is-5-tablet { + flex: none; + width: calc(41.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-5, .column.is-offset-5-tablet { + margin-inline-start: 41.6666666667%; + } + .column.is-6, .column.is-6-tablet { + flex: none; + width: calc(50% - var(--bulma-column-gap) / 2); + } + .column.is-offset-6, .column.is-offset-6-tablet { + margin-inline-start: 50%; + } + .column.is-7, .column.is-7-tablet { + flex: none; + width: calc(58.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-7, .column.is-offset-7-tablet { + margin-inline-start: 58.3333333333%; + } + .column.is-8, .column.is-8-tablet { + flex: none; + width: calc(66.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-8, .column.is-offset-8-tablet { + margin-inline-start: 66.6666666667%; + } + .column.is-9, .column.is-9-tablet { + flex: none; + width: calc(75% - var(--bulma-column-gap) / 2); + } + .column.is-offset-9, .column.is-offset-9-tablet { + margin-inline-start: 75%; + } + .column.is-10, .column.is-10-tablet { + flex: none; + width: calc(83.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-10, .column.is-offset-10-tablet { + margin-inline-start: 83.3333333333%; + } + .column.is-11, .column.is-11-tablet { + flex: none; + width: calc(91.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-11, .column.is-offset-11-tablet { + margin-inline-start: 91.6666666667%; + } + .column.is-12, .column.is-12-tablet { + flex: none; + width: calc(100% - var(--bulma-column-gap) / 2); + } + .column.is-offset-12, .column.is-offset-12-tablet { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds-touch { + margin-inline-start: 66.6666%; + } + .column.is-offset-half-touch { + margin-inline-start: 50%; + } + .column.is-offset-one-third-touch { + margin-inline-start: 0.3333%; + } + .column.is-offset-one-quarter-touch { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth-touch { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths-touch { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths-touch { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths-touch { + margin-inline-start: 80%; + } + .column.is-0-touch { + flex: none; + width: 0%; + } + .column.is-offset-0-touch { + margin-inline-start: 0%; + } + .column.is-1-touch { + flex: none; + width: 8.3333333333%; + } + .column.is-offset-1-touch { + margin-inline-start: 8.3333333333%; + } + .column.is-2-touch { + flex: none; + width: 16.6666666667%; + } + .column.is-offset-2-touch { + margin-inline-start: 16.6666666667%; + } + .column.is-3-touch { + flex: none; + width: 25%; + } + .column.is-offset-3-touch { + margin-inline-start: 25%; + } + .column.is-4-touch { + flex: none; + width: 33.3333333333%; + } + .column.is-offset-4-touch { + margin-inline-start: 33.3333333333%; + } + .column.is-5-touch { + flex: none; + width: 41.6666666667%; + } + .column.is-offset-5-touch { + margin-inline-start: 41.6666666667%; + } + .column.is-6-touch { + flex: none; + width: 50%; + } + .column.is-offset-6-touch { + margin-inline-start: 50%; + } + .column.is-7-touch { + flex: none; + width: 58.3333333333%; + } + .column.is-offset-7-touch { + margin-inline-start: 58.3333333333%; + } + .column.is-8-touch { + flex: none; + width: 66.6666666667%; + } + .column.is-offset-8-touch { + margin-inline-start: 66.6666666667%; + } + .column.is-9-touch { + flex: none; + width: 75%; + } + .column.is-offset-9-touch { + margin-inline-start: 75%; + } + .column.is-10-touch { + flex: none; + width: 83.3333333333%; + } + .column.is-offset-10-touch { + margin-inline-start: 83.3333333333%; + } + .column.is-11-touch { + flex: none; + width: 91.6666666667%; + } + .column.is-offset-11-touch { + margin-inline-start: 91.6666666667%; + } + .column.is-12-touch { + flex: none; + width: 100%; + } + .column.is-offset-12-touch { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds-desktop { + margin-inline-start: 66.6666%; + } + .column.is-offset-half-desktop { + margin-inline-start: 50%; + } + .column.is-offset-one-third-desktop { + margin-inline-start: 0.3333%; + } + .column.is-offset-one-quarter-desktop { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth-desktop { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths-desktop { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths-desktop { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths-desktop { + margin-inline-start: 80%; + } + .column.is-0-desktop { + flex: none; + width: calc(0% - var(--bulma-column-gap) / 2); + } + .column.is-offset-0-desktop { + margin-inline-start: 0%; + } + .column.is-1-desktop { + flex: none; + width: calc(8.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-1-desktop { + margin-inline-start: 8.3333333333%; + } + .column.is-2-desktop { + flex: none; + width: calc(16.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-2-desktop { + margin-inline-start: 16.6666666667%; + } + .column.is-3-desktop { + flex: none; + width: calc(25% - var(--bulma-column-gap) / 2); + } + .column.is-offset-3-desktop { + margin-inline-start: 25%; + } + .column.is-4-desktop { + flex: none; + width: calc(33.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-4-desktop { + margin-inline-start: 33.3333333333%; + } + .column.is-5-desktop { + flex: none; + width: calc(41.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-5-desktop { + margin-inline-start: 41.6666666667%; + } + .column.is-6-desktop { + flex: none; + width: calc(50% - var(--bulma-column-gap) / 2); + } + .column.is-offset-6-desktop { + margin-inline-start: 50%; + } + .column.is-7-desktop { + flex: none; + width: calc(58.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-7-desktop { + margin-inline-start: 58.3333333333%; + } + .column.is-8-desktop { + flex: none; + width: calc(66.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-8-desktop { + margin-inline-start: 66.6666666667%; + } + .column.is-9-desktop { + flex: none; + width: calc(75% - var(--bulma-column-gap) / 2); + } + .column.is-offset-9-desktop { + margin-inline-start: 75%; + } + .column.is-10-desktop { + flex: none; + width: calc(83.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-10-desktop { + margin-inline-start: 83.3333333333%; + } + .column.is-11-desktop { + flex: none; + width: calc(91.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-11-desktop { + margin-inline-start: 91.6666666667%; + } + .column.is-12-desktop { + flex: none; + width: calc(100% - var(--bulma-column-gap) / 2); + } + .column.is-offset-12-desktop { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds-widescreen { + margin-inline-start: 66.6666%; + } + .column.is-offset-half-widescreen { + margin-inline-start: 50%; + } + .column.is-offset-one-third-widescreen { + margin-inline-start: 0.3333%; + } + .column.is-offset-one-quarter-widescreen { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth-widescreen { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths-widescreen { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths-widescreen { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths-widescreen { + margin-inline-start: 80%; + } + .column.is-0-widescreen { + flex: none; + width: calc(0% - var(--bulma-column-gap) / 2); + } + .column.is-offset-0-widescreen { + margin-inline-start: 0%; + } + .column.is-1-widescreen { + flex: none; + width: calc(8.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-1-widescreen { + margin-inline-start: 8.3333333333%; + } + .column.is-2-widescreen { + flex: none; + width: calc(16.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-2-widescreen { + margin-inline-start: 16.6666666667%; + } + .column.is-3-widescreen { + flex: none; + width: calc(25% - var(--bulma-column-gap) / 2); + } + .column.is-offset-3-widescreen { + margin-inline-start: 25%; + } + .column.is-4-widescreen { + flex: none; + width: calc(33.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-4-widescreen { + margin-inline-start: 33.3333333333%; + } + .column.is-5-widescreen { + flex: none; + width: calc(41.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-5-widescreen { + margin-inline-start: 41.6666666667%; + } + .column.is-6-widescreen { + flex: none; + width: calc(50% - var(--bulma-column-gap) / 2); + } + .column.is-offset-6-widescreen { + margin-inline-start: 50%; + } + .column.is-7-widescreen { + flex: none; + width: calc(58.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-7-widescreen { + margin-inline-start: 58.3333333333%; + } + .column.is-8-widescreen { + flex: none; + width: calc(66.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-8-widescreen { + margin-inline-start: 66.6666666667%; + } + .column.is-9-widescreen { + flex: none; + width: calc(75% - var(--bulma-column-gap) / 2); + } + .column.is-offset-9-widescreen { + margin-inline-start: 75%; + } + .column.is-10-widescreen { + flex: none; + width: calc(83.3333333333% - var(--bulma-column-gap) / 2); + } + .column.is-offset-10-widescreen { + margin-inline-start: 83.3333333333%; + } + .column.is-11-widescreen { + flex: none; + width: calc(91.6666666667% - var(--bulma-column-gap) / 2); + } + .column.is-offset-11-widescreen { + margin-inline-start: 91.6666666667%; + } + .column.is-12-widescreen { + flex: none; + width: calc(100% - var(--bulma-column-gap) / 2); + } + .column.is-offset-12-widescreen { + margin-inline-start: 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-inline-start: 75%; + } + .column.is-offset-two-thirds-fullhd { + margin-inline-start: 66.6666%; + } + .column.is-offset-half-fullhd { + margin-inline-start: 50%; + } + .column.is-offset-one-third-fullhd { + margin-inline-start: 33.3333%; + } + .column.is-offset-one-quarter-fullhd { + margin-inline-start: 25%; + } + .column.is-offset-one-fifth-fullhd { + margin-inline-start: 20%; + } + .column.is-offset-two-fifths-fullhd { + margin-inline-start: 40%; + } + .column.is-offset-three-fifths-fullhd { + margin-inline-start: 60%; + } + .column.is-offset-four-fifths-fullhd { + margin-inline-start: 80%; + } + .column.is-0-fullhd { + flex: none; + width: 0%; + } + .column.is-offset-0-fullhd { + margin-inline-start: 0%; + } + .column.is-1-fullhd { + flex: none; + width: 8.3333333333%; + } + .column.is-offset-1-fullhd { + margin-inline-start: 8.3333333333%; + } + .column.is-2-fullhd { + flex: none; + width: 16.6666666667%; + } + .column.is-offset-2-fullhd { + margin-inline-start: 16.6666666667%; + } + .column.is-3-fullhd { + flex: none; + width: 25%; + } + .column.is-offset-3-fullhd { + margin-inline-start: 25%; + } + .column.is-4-fullhd { + flex: none; + width: 33.3333333333%; + } + .column.is-offset-4-fullhd { + margin-inline-start: 33.3333333333%; + } + .column.is-5-fullhd { + flex: none; + width: 41.6666666667%; + } + .column.is-offset-5-fullhd { + margin-inline-start: 41.6666666667%; + } + .column.is-6-fullhd { + flex: none; + width: 50%; + } + .column.is-offset-6-fullhd { + margin-inline-start: 50%; + } + .column.is-7-fullhd { + flex: none; + width: 58.3333333333%; + } + .column.is-offset-7-fullhd { + margin-inline-start: 58.3333333333%; + } + .column.is-8-fullhd { + flex: none; + width: 66.6666666667%; + } + .column.is-offset-8-fullhd { + margin-inline-start: 66.6666666667%; + } + .column.is-9-fullhd { + flex: none; + width: 75%; + } + .column.is-offset-9-fullhd { + margin-inline-start: 75%; + } + .column.is-10-fullhd { + flex: none; + width: 83.3333333333%; + } + .column.is-offset-10-fullhd { + margin-inline-start: 83.3333333333%; + } + .column.is-11-fullhd { + flex: none; + width: 91.6666666667%; + } + .column.is-offset-11-fullhd { + margin-inline-start: 91.6666666667%; + } + .column.is-12-fullhd { + flex: none; + width: 100%; + } + .column.is-offset-12-fullhd { + margin-inline-start: 100%; + } +} + +.columns { + margin-inline-start: calc(-1 * var(--bulma-column-gap)); + margin-inline-end: calc(-1 * var(--bulma-column-gap)); + margin-top: calc(-1 * var(--bulma-column-gap)); +} +.columns:last-child { + margin-bottom: calc(-1 * var(--bulma-column-gap)); +} +.columns:not(:last-child) { + margin-bottom: calc(1.5rem - 0.75rem); +} +.columns.is-centered { + justify-content: center; +} +.columns.is-gapless { + margin-inline-start: 0; + margin-inline-end: 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; + } +} + +.fixed-grid { + container-name: bulma-fixed-grid; + container-type: inline-size; +} +.fixed-grid .grid { + --bulma-grid-gap-count: calc(var(--bulma-grid-column-count) - 1); + --bulma-grid-column-count: 2; + grid-template-columns: repeat(var(--bulma-grid-column-count), 1fr); +} +.fixed-grid.has-1-cols .grid { + --bulma-grid-column-count: 1; +} +.fixed-grid.has-2-cols .grid { + --bulma-grid-column-count: 2; +} +.fixed-grid.has-3-cols .grid { + --bulma-grid-column-count: 3; +} +.fixed-grid.has-4-cols .grid { + --bulma-grid-column-count: 4; +} +.fixed-grid.has-5-cols .grid { + --bulma-grid-column-count: 5; +} +.fixed-grid.has-6-cols .grid { + --bulma-grid-column-count: 6; +} +.fixed-grid.has-7-cols .grid { + --bulma-grid-column-count: 7; +} +.fixed-grid.has-8-cols .grid { + --bulma-grid-column-count: 8; +} +.fixed-grid.has-9-cols .grid { + --bulma-grid-column-count: 9; +} +.fixed-grid.has-10-cols .grid { + --bulma-grid-column-count: 10; +} +.fixed-grid.has-11-cols .grid { + --bulma-grid-column-count: 11; +} +.fixed-grid.has-12-cols .grid { + --bulma-grid-column-count: 12; +} +@container bulma-fixed-grid (max-width: 768px) { + .fixed-grid.has-1-cols-mobile .grid { + --bulma-grid-column-count: 1; + } + .fixed-grid.has-2-cols-mobile .grid { + --bulma-grid-column-count: 2; + } + .fixed-grid.has-3-cols-mobile .grid { + --bulma-grid-column-count: 3; + } + .fixed-grid.has-4-cols-mobile .grid { + --bulma-grid-column-count: 4; + } + .fixed-grid.has-5-cols-mobile .grid { + --bulma-grid-column-count: 5; + } + .fixed-grid.has-6-cols-mobile .grid { + --bulma-grid-column-count: 6; + } + .fixed-grid.has-7-cols-mobile .grid { + --bulma-grid-column-count: 7; + } + .fixed-grid.has-8-cols-mobile .grid { + --bulma-grid-column-count: 8; + } + .fixed-grid.has-9-cols-mobile .grid { + --bulma-grid-column-count: 9; + } + .fixed-grid.has-10-cols-mobile .grid { + --bulma-grid-column-count: 10; + } + .fixed-grid.has-11-cols-mobile .grid { + --bulma-grid-column-count: 11; + } + .fixed-grid.has-12-cols-mobile .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (min-width: 769px) { + .fixed-grid.has-1-cols-tablet .grid { + --bulma-grid-column-count: 1; + } + .fixed-grid.has-2-cols-tablet .grid { + --bulma-grid-column-count: 2; + } + .fixed-grid.has-3-cols-tablet .grid { + --bulma-grid-column-count: 3; + } + .fixed-grid.has-4-cols-tablet .grid { + --bulma-grid-column-count: 4; + } + .fixed-grid.has-5-cols-tablet .grid { + --bulma-grid-column-count: 5; + } + .fixed-grid.has-6-cols-tablet .grid { + --bulma-grid-column-count: 6; + } + .fixed-grid.has-7-cols-tablet .grid { + --bulma-grid-column-count: 7; + } + .fixed-grid.has-8-cols-tablet .grid { + --bulma-grid-column-count: 8; + } + .fixed-grid.has-9-cols-tablet .grid { + --bulma-grid-column-count: 9; + } + .fixed-grid.has-10-cols-tablet .grid { + --bulma-grid-column-count: 10; + } + .fixed-grid.has-11-cols-tablet .grid { + --bulma-grid-column-count: 11; + } + .fixed-grid.has-12-cols-tablet .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (min-width: 1024px) { + .fixed-grid.has-1-cols-desktop .grid { + --bulma-grid-column-count: 1; + } + .fixed-grid.has-2-cols-desktop .grid { + --bulma-grid-column-count: 2; + } + .fixed-grid.has-3-cols-desktop .grid { + --bulma-grid-column-count: 3; + } + .fixed-grid.has-4-cols-desktop .grid { + --bulma-grid-column-count: 4; + } + .fixed-grid.has-5-cols-desktop .grid { + --bulma-grid-column-count: 5; + } + .fixed-grid.has-6-cols-desktop .grid { + --bulma-grid-column-count: 6; + } + .fixed-grid.has-7-cols-desktop .grid { + --bulma-grid-column-count: 7; + } + .fixed-grid.has-8-cols-desktop .grid { + --bulma-grid-column-count: 8; + } + .fixed-grid.has-9-cols-desktop .grid { + --bulma-grid-column-count: 9; + } + .fixed-grid.has-10-cols-desktop .grid { + --bulma-grid-column-count: 10; + } + .fixed-grid.has-11-cols-desktop .grid { + --bulma-grid-column-count: 11; + } + .fixed-grid.has-12-cols-desktop .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (min-width: 1216px) { + .fixed-grid.has-1-cols-widescreen .grid { + --bulma-grid-column-count: 1; + } + .fixed-grid.has-2-cols-widescreen .grid { + --bulma-grid-column-count: 2; + } + .fixed-grid.has-3-cols-widescreen .grid { + --bulma-grid-column-count: 3; + } + .fixed-grid.has-4-cols-widescreen .grid { + --bulma-grid-column-count: 4; + } + .fixed-grid.has-5-cols-widescreen .grid { + --bulma-grid-column-count: 5; + } + .fixed-grid.has-6-cols-widescreen .grid { + --bulma-grid-column-count: 6; + } + .fixed-grid.has-7-cols-widescreen .grid { + --bulma-grid-column-count: 7; + } + .fixed-grid.has-8-cols-widescreen .grid { + --bulma-grid-column-count: 8; + } + .fixed-grid.has-9-cols-widescreen .grid { + --bulma-grid-column-count: 9; + } + .fixed-grid.has-10-cols-widescreen .grid { + --bulma-grid-column-count: 10; + } + .fixed-grid.has-11-cols-widescreen .grid { + --bulma-grid-column-count: 11; + } + .fixed-grid.has-12-cols-widescreen .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (min-width: 1408px) { + .fixed-grid.has-1-cols-fullhd .grid { + --bulma-grid-column-count: 1; + } + .fixed-grid.has-2-cols-fullhd .grid { + --bulma-grid-column-count: 2; + } + .fixed-grid.has-3-cols-fullhd .grid { + --bulma-grid-column-count: 3; + } + .fixed-grid.has-4-cols-fullhd .grid { + --bulma-grid-column-count: 4; + } + .fixed-grid.has-5-cols-fullhd .grid { + --bulma-grid-column-count: 5; + } + .fixed-grid.has-6-cols-fullhd .grid { + --bulma-grid-column-count: 6; + } + .fixed-grid.has-7-cols-fullhd .grid { + --bulma-grid-column-count: 7; + } + .fixed-grid.has-8-cols-fullhd .grid { + --bulma-grid-column-count: 8; + } + .fixed-grid.has-9-cols-fullhd .grid { + --bulma-grid-column-count: 9; + } + .fixed-grid.has-10-cols-fullhd .grid { + --bulma-grid-column-count: 10; + } + .fixed-grid.has-11-cols-fullhd .grid { + --bulma-grid-column-count: 11; + } + .fixed-grid.has-12-cols-fullhd .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (max-width: 768px) { + .fixed-grid.has-auto-count .grid { + --bulma-grid-column-count: 2; + } +} +@container bulma-fixed-grid (min-width: 769px) { + .fixed-grid.has-auto-count .grid { + --bulma-grid-column-count: 4; + } +} +@container bulma-fixed-grid (min-width: 1024px) { + .fixed-grid.has-auto-count .grid { + --bulma-grid-column-count: 8; + } +} +@container bulma-fixed-grid (min-width: 1216px) { + .fixed-grid.has-auto-count .grid { + --bulma-grid-column-count: 12; + } +} +@container bulma-fixed-grid (min-width: 1408px) { + .fixed-grid.has-auto-count .grid { + --bulma-grid-column-count: 16; + } +} + +.grid { + --bulma-grid-gap: 0.75rem; + --bulma-grid-column-min: 9rem; + --bulma-grid-cell-column-span: 1; + --bulma-grid-cell-row-span: 1; + display: grid; + gap: var(--bulma-grid-gap); + column-gap: var(--bulma-grid-column-gap, var(--bulma-grid-gap)); + row-gap: var(--bulma-grid-row-gap, var(--bulma-grid-gap)); + grid-template-columns: repeat(auto-fit, minmax(var(--bulma-grid-column-min), 1fr)); + grid-template-rows: auto; +} +.grid.is-auto-fill { + grid-template-columns: repeat(auto-fill, minmax(var(--bulma-grid-column-min), 1fr)); +} +.grid.is-col-min-1 { + --bulma-grid-column-min: 1.5rem; +} +.grid.is-col-min-2 { + --bulma-grid-column-min: 3rem; +} +.grid.is-col-min-3 { + --bulma-grid-column-min: 4.5rem; +} +.grid.is-col-min-4 { + --bulma-grid-column-min: 6rem; +} +.grid.is-col-min-5 { + --bulma-grid-column-min: 7.5rem; +} +.grid.is-col-min-6 { + --bulma-grid-column-min: 9rem; +} +.grid.is-col-min-7 { + --bulma-grid-column-min: 10.5rem; +} +.grid.is-col-min-8 { + --bulma-grid-column-min: 12rem; +} +.grid.is-col-min-9 { + --bulma-grid-column-min: 13.5rem; +} +.grid.is-col-min-10 { + --bulma-grid-column-min: 15rem; +} +.grid.is-col-min-11 { + --bulma-grid-column-min: 16.5rem; +} +.grid.is-col-min-12 { + --bulma-grid-column-min: 18rem; +} + +.cell { + grid-column-end: span var(--bulma-grid-cell-column-span); + grid-column-start: var(--bulma-grid-cell-column-start); + grid-row-end: span var(--bulma-grid-cell-row-span); + grid-row-start: var(--bulma-grid-cell-row-start); +} +.cell.is-col-start-end { + --bulma-grid-cell-column-start: -1; +} +.cell.is-row-start-end { + --bulma-grid-cell-row-start: -1; +} +.cell.is-col-start-1 { + --bulma-grid-cell-column-start: 1; +} +.cell.is-col-end-1 { + --bulma-grid-cell-column-end: 1; +} +.cell.is-col-from-end-1 { + --bulma-grid-cell-column-start: -1; +} +.cell.is-col-span-1 { + --bulma-grid-cell-column-span: 1; +} +.cell.is-row-start-1 { + --bulma-grid-cell-row-start: 1; +} +.cell.is-row-end-1 { + --bulma-grid-cell-row-end: 1; +} +.cell.is-row-from-end-1 { + --bulma-grid-cell-row-start: -1; +} +.cell.is-row-span-1 { + --bulma-grid-cell-row-span: 1; +} +.cell.is-col-start-2 { + --bulma-grid-cell-column-start: 2; +} +.cell.is-col-end-2 { + --bulma-grid-cell-column-end: 2; +} +.cell.is-col-from-end-2 { + --bulma-grid-cell-column-start: -2; +} +.cell.is-col-span-2 { + --bulma-grid-cell-column-span: 2; +} +.cell.is-row-start-2 { + --bulma-grid-cell-row-start: 2; +} +.cell.is-row-end-2 { + --bulma-grid-cell-row-end: 2; +} +.cell.is-row-from-end-2 { + --bulma-grid-cell-row-start: -2; +} +.cell.is-row-span-2 { + --bulma-grid-cell-row-span: 2; +} +.cell.is-col-start-3 { + --bulma-grid-cell-column-start: 3; +} +.cell.is-col-end-3 { + --bulma-grid-cell-column-end: 3; +} +.cell.is-col-from-end-3 { + --bulma-grid-cell-column-start: -3; +} +.cell.is-col-span-3 { + --bulma-grid-cell-column-span: 3; +} +.cell.is-row-start-3 { + --bulma-grid-cell-row-start: 3; +} +.cell.is-row-end-3 { + --bulma-grid-cell-row-end: 3; +} +.cell.is-row-from-end-3 { + --bulma-grid-cell-row-start: -3; +} +.cell.is-row-span-3 { + --bulma-grid-cell-row-span: 3; +} +.cell.is-col-start-4 { + --bulma-grid-cell-column-start: 4; +} +.cell.is-col-end-4 { + --bulma-grid-cell-column-end: 4; +} +.cell.is-col-from-end-4 { + --bulma-grid-cell-column-start: -4; +} +.cell.is-col-span-4 { + --bulma-grid-cell-column-span: 4; +} +.cell.is-row-start-4 { + --bulma-grid-cell-row-start: 4; +} +.cell.is-row-end-4 { + --bulma-grid-cell-row-end: 4; +} +.cell.is-row-from-end-4 { + --bulma-grid-cell-row-start: -4; +} +.cell.is-row-span-4 { + --bulma-grid-cell-row-span: 4; +} +.cell.is-col-start-5 { + --bulma-grid-cell-column-start: 5; +} +.cell.is-col-end-5 { + --bulma-grid-cell-column-end: 5; +} +.cell.is-col-from-end-5 { + --bulma-grid-cell-column-start: -5; +} +.cell.is-col-span-5 { + --bulma-grid-cell-column-span: 5; +} +.cell.is-row-start-5 { + --bulma-grid-cell-row-start: 5; +} +.cell.is-row-end-5 { + --bulma-grid-cell-row-end: 5; +} +.cell.is-row-from-end-5 { + --bulma-grid-cell-row-start: -5; +} +.cell.is-row-span-5 { + --bulma-grid-cell-row-span: 5; +} +.cell.is-col-start-6 { + --bulma-grid-cell-column-start: 6; +} +.cell.is-col-end-6 { + --bulma-grid-cell-column-end: 6; +} +.cell.is-col-from-end-6 { + --bulma-grid-cell-column-start: -6; +} +.cell.is-col-span-6 { + --bulma-grid-cell-column-span: 6; +} +.cell.is-row-start-6 { + --bulma-grid-cell-row-start: 6; +} +.cell.is-row-end-6 { + --bulma-grid-cell-row-end: 6; +} +.cell.is-row-from-end-6 { + --bulma-grid-cell-row-start: -6; +} +.cell.is-row-span-6 { + --bulma-grid-cell-row-span: 6; +} +.cell.is-col-start-7 { + --bulma-grid-cell-column-start: 7; +} +.cell.is-col-end-7 { + --bulma-grid-cell-column-end: 7; +} +.cell.is-col-from-end-7 { + --bulma-grid-cell-column-start: -7; +} +.cell.is-col-span-7 { + --bulma-grid-cell-column-span: 7; +} +.cell.is-row-start-7 { + --bulma-grid-cell-row-start: 7; +} +.cell.is-row-end-7 { + --bulma-grid-cell-row-end: 7; +} +.cell.is-row-from-end-7 { + --bulma-grid-cell-row-start: -7; +} +.cell.is-row-span-7 { + --bulma-grid-cell-row-span: 7; +} +.cell.is-col-start-8 { + --bulma-grid-cell-column-start: 8; +} +.cell.is-col-end-8 { + --bulma-grid-cell-column-end: 8; +} +.cell.is-col-from-end-8 { + --bulma-grid-cell-column-start: -8; +} +.cell.is-col-span-8 { + --bulma-grid-cell-column-span: 8; +} +.cell.is-row-start-8 { + --bulma-grid-cell-row-start: 8; +} +.cell.is-row-end-8 { + --bulma-grid-cell-row-end: 8; +} +.cell.is-row-from-end-8 { + --bulma-grid-cell-row-start: -8; +} +.cell.is-row-span-8 { + --bulma-grid-cell-row-span: 8; +} +.cell.is-col-start-9 { + --bulma-grid-cell-column-start: 9; +} +.cell.is-col-end-9 { + --bulma-grid-cell-column-end: 9; +} +.cell.is-col-from-end-9 { + --bulma-grid-cell-column-start: -9; +} +.cell.is-col-span-9 { + --bulma-grid-cell-column-span: 9; +} +.cell.is-row-start-9 { + --bulma-grid-cell-row-start: 9; +} +.cell.is-row-end-9 { + --bulma-grid-cell-row-end: 9; +} +.cell.is-row-from-end-9 { + --bulma-grid-cell-row-start: -9; +} +.cell.is-row-span-9 { + --bulma-grid-cell-row-span: 9; +} +.cell.is-col-start-10 { + --bulma-grid-cell-column-start: 10; +} +.cell.is-col-end-10 { + --bulma-grid-cell-column-end: 10; +} +.cell.is-col-from-end-10 { + --bulma-grid-cell-column-start: -10; +} +.cell.is-col-span-10 { + --bulma-grid-cell-column-span: 10; +} +.cell.is-row-start-10 { + --bulma-grid-cell-row-start: 10; +} +.cell.is-row-end-10 { + --bulma-grid-cell-row-end: 10; +} +.cell.is-row-from-end-10 { + --bulma-grid-cell-row-start: -10; +} +.cell.is-row-span-10 { + --bulma-grid-cell-row-span: 10; +} +.cell.is-col-start-11 { + --bulma-grid-cell-column-start: 11; +} +.cell.is-col-end-11 { + --bulma-grid-cell-column-end: 11; +} +.cell.is-col-from-end-11 { + --bulma-grid-cell-column-start: -11; +} +.cell.is-col-span-11 { + --bulma-grid-cell-column-span: 11; +} +.cell.is-row-start-11 { + --bulma-grid-cell-row-start: 11; +} +.cell.is-row-end-11 { + --bulma-grid-cell-row-end: 11; +} +.cell.is-row-from-end-11 { + --bulma-grid-cell-row-start: -11; +} +.cell.is-row-span-11 { + --bulma-grid-cell-row-span: 11; +} +.cell.is-col-start-12 { + --bulma-grid-cell-column-start: 12; +} +.cell.is-col-end-12 { + --bulma-grid-cell-column-end: 12; +} +.cell.is-col-from-end-12 { + --bulma-grid-cell-column-start: -12; +} +.cell.is-col-span-12 { + --bulma-grid-cell-column-span: 12; +} +.cell.is-row-start-12 { + --bulma-grid-cell-row-start: 12; +} +.cell.is-row-end-12 { + --bulma-grid-cell-row-end: 12; +} +.cell.is-row-from-end-12 { + --bulma-grid-cell-row-start: -12; +} +.cell.is-row-span-12 { + --bulma-grid-cell-row-span: 12; +} +@media screen and (max-width: 768px) { + .cell.is-col-start-1-mobile { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-mobile { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-mobile { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-mobile { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-mobile { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-mobile { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-mobile { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-mobile { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-mobile { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-mobile { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-mobile { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-mobile { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-mobile { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-mobile { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-mobile { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-mobile { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-mobile { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-mobile { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-mobile { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-mobile { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-mobile { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-mobile { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-mobile { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-mobile { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-mobile { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-mobile { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-mobile { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-mobile { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-mobile { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-mobile { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-mobile { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-mobile { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-mobile { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-mobile { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-mobile { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-mobile { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-mobile { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-mobile { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-mobile { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-mobile { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-mobile { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-mobile { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-mobile { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-mobile { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-mobile { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-mobile { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-mobile { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-mobile { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-mobile { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-mobile { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-mobile { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-mobile { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-mobile { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-mobile { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-mobile { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-mobile { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-mobile { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-mobile { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-mobile { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-mobile { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-mobile { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-mobile { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-mobile { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-mobile { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-mobile { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-mobile { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-mobile { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-mobile { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-mobile { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-mobile { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-mobile { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-mobile { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-mobile { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-mobile { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-mobile { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-mobile { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-mobile { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-mobile { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-mobile { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-mobile { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-mobile { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-mobile { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-mobile { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-mobile { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-mobile { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-mobile { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-mobile { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-mobile { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-mobile { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-mobile { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-mobile { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-mobile { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-mobile { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-mobile { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-mobile { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-mobile { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 769px), print { + .cell.is-col-start-1-tablet { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-tablet { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-tablet { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-tablet { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-tablet { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-tablet { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-tablet { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-tablet { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-tablet { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-tablet { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-tablet { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-tablet { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-tablet { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-tablet { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-tablet { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-tablet { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-tablet { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-tablet { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-tablet { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-tablet { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-tablet { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-tablet { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-tablet { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-tablet { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-tablet { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-tablet { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-tablet { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-tablet { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-tablet { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-tablet { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-tablet { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-tablet { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-tablet { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-tablet { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-tablet { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-tablet { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-tablet { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-tablet { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-tablet { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-tablet { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-tablet { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-tablet { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-tablet { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-tablet { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-tablet { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-tablet { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-tablet { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-tablet { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-tablet { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-tablet { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-tablet { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-tablet { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-tablet { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-tablet { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-tablet { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-tablet { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-tablet { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-tablet { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-tablet { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-tablet { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-tablet { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-tablet { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-tablet { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-tablet { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-tablet { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-tablet { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-tablet { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-tablet { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-tablet { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-tablet { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-tablet { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-tablet { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-tablet { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-tablet { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-tablet { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-tablet { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-tablet { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-tablet { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-tablet { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-tablet { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-tablet { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-tablet { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-tablet { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-tablet { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-tablet { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-tablet { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-tablet { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-tablet { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-tablet { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-tablet { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-tablet { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-tablet { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-tablet { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-tablet { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-tablet { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-tablet { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .cell.is-col-start-1-tablet-only { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-tablet-only { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-tablet-only { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-tablet-only { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-tablet-only { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-tablet-only { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-tablet-only { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-tablet-only { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-tablet-only { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-tablet-only { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-tablet-only { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-tablet-only { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-tablet-only { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-tablet-only { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-tablet-only { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-tablet-only { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-tablet-only { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-tablet-only { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-tablet-only { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-tablet-only { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-tablet-only { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-tablet-only { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-tablet-only { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-tablet-only { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-tablet-only { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-tablet-only { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-tablet-only { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-tablet-only { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-tablet-only { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-tablet-only { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-tablet-only { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-tablet-only { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-tablet-only { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-tablet-only { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-tablet-only { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-tablet-only { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-tablet-only { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-tablet-only { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-tablet-only { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-tablet-only { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-tablet-only { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-tablet-only { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-tablet-only { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-tablet-only { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-tablet-only { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-tablet-only { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-tablet-only { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-tablet-only { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-tablet-only { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-tablet-only { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-tablet-only { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-tablet-only { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-tablet-only { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-tablet-only { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-tablet-only { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-tablet-only { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-tablet-only { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-tablet-only { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-tablet-only { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-tablet-only { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-tablet-only { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-tablet-only { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-tablet-only { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-tablet-only { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-tablet-only { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-tablet-only { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-tablet-only { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-tablet-only { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-tablet-only { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-tablet-only { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-tablet-only { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-tablet-only { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-tablet-only { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-tablet-only { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-tablet-only { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-tablet-only { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-tablet-only { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-tablet-only { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-tablet-only { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-tablet-only { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-tablet-only { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-tablet-only { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-tablet-only { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-tablet-only { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-tablet-only { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-tablet-only { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-tablet-only { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-tablet-only { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-tablet-only { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-tablet-only { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-tablet-only { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-tablet-only { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-tablet-only { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-tablet-only { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-tablet-only { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-tablet-only { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 1024px) { + .cell.is-col-start-1-desktop { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-desktop { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-desktop { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-desktop { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-desktop { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-desktop { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-desktop { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-desktop { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-desktop { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-desktop { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-desktop { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-desktop { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-desktop { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-desktop { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-desktop { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-desktop { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-desktop { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-desktop { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-desktop { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-desktop { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-desktop { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-desktop { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-desktop { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-desktop { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-desktop { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-desktop { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-desktop { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-desktop { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-desktop { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-desktop { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-desktop { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-desktop { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-desktop { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-desktop { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-desktop { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-desktop { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-desktop { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-desktop { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-desktop { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-desktop { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-desktop { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-desktop { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-desktop { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-desktop { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-desktop { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-desktop { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-desktop { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-desktop { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-desktop { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-desktop { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-desktop { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-desktop { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-desktop { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-desktop { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-desktop { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-desktop { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-desktop { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-desktop { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-desktop { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-desktop { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-desktop { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-desktop { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-desktop { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-desktop { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-desktop { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-desktop { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-desktop { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-desktop { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-desktop { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-desktop { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-desktop { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-desktop { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-desktop { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-desktop { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-desktop { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-desktop { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-desktop { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-desktop { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-desktop { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-desktop { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-desktop { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-desktop { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-desktop { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-desktop { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-desktop { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-desktop { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-desktop { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-desktop { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-desktop { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-desktop { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-desktop { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-desktop { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-desktop { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-desktop { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-desktop { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-desktop { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .cell.is-col-start-1-desktop-only { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-desktop-only { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-desktop-only { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-desktop-only { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-desktop-only { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-desktop-only { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-desktop-only { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-desktop-only { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-desktop-only { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-desktop-only { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-desktop-only { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-desktop-only { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-desktop-only { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-desktop-only { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-desktop-only { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-desktop-only { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-desktop-only { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-desktop-only { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-desktop-only { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-desktop-only { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-desktop-only { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-desktop-only { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-desktop-only { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-desktop-only { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-desktop-only { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-desktop-only { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-desktop-only { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-desktop-only { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-desktop-only { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-desktop-only { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-desktop-only { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-desktop-only { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-desktop-only { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-desktop-only { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-desktop-only { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-desktop-only { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-desktop-only { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-desktop-only { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-desktop-only { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-desktop-only { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-desktop-only { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-desktop-only { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-desktop-only { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-desktop-only { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-desktop-only { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-desktop-only { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-desktop-only { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-desktop-only { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-desktop-only { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-desktop-only { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-desktop-only { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-desktop-only { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-desktop-only { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-desktop-only { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-desktop-only { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-desktop-only { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-desktop-only { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-desktop-only { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-desktop-only { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-desktop-only { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-desktop-only { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-desktop-only { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-desktop-only { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-desktop-only { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-desktop-only { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-desktop-only { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-desktop-only { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-desktop-only { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-desktop-only { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-desktop-only { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-desktop-only { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-desktop-only { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-desktop-only { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-desktop-only { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-desktop-only { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-desktop-only { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-desktop-only { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-desktop-only { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-desktop-only { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-desktop-only { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-desktop-only { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-desktop-only { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-desktop-only { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-desktop-only { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-desktop-only { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-desktop-only { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-desktop-only { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-desktop-only { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-desktop-only { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-desktop-only { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-desktop-only { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-desktop-only { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-desktop-only { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-desktop-only { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-desktop-only { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-desktop-only { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 1216px) { + .cell.is-col-start-1-widescreen { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-widescreen { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-widescreen { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-widescreen { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-widescreen { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-widescreen { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-widescreen { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-widescreen { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-widescreen { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-widescreen { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-widescreen { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-widescreen { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-widescreen { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-widescreen { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-widescreen { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-widescreen { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-widescreen { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-widescreen { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-widescreen { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-widescreen { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-widescreen { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-widescreen { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-widescreen { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-widescreen { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-widescreen { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-widescreen { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-widescreen { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-widescreen { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-widescreen { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-widescreen { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-widescreen { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-widescreen { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-widescreen { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-widescreen { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-widescreen { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-widescreen { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-widescreen { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-widescreen { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-widescreen { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-widescreen { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-widescreen { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-widescreen { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-widescreen { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-widescreen { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-widescreen { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-widescreen { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-widescreen { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-widescreen { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-widescreen { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-widescreen { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-widescreen { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-widescreen { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-widescreen { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-widescreen { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-widescreen { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-widescreen { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-widescreen { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-widescreen { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-widescreen { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-widescreen { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-widescreen { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-widescreen { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-widescreen { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-widescreen { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-widescreen { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-widescreen { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-widescreen { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-widescreen { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-widescreen { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-widescreen { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-widescreen { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-widescreen { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-widescreen { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-widescreen { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-widescreen { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-widescreen { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-widescreen { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-widescreen { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-widescreen { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-widescreen { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-widescreen { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-widescreen { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-widescreen { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-widescreen { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-widescreen { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-widescreen { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-widescreen { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-widescreen { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-widescreen { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-widescreen { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-widescreen { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-widescreen { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-widescreen { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-widescreen { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-widescreen { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-widescreen { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .cell.is-col-start-1-widescreen-only { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-widescreen-only { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-widescreen-only { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-widescreen-only { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-widescreen-only { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-widescreen-only { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-widescreen-only { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-widescreen-only { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-widescreen-only { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-widescreen-only { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-widescreen-only { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-widescreen-only { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-widescreen-only { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-widescreen-only { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-widescreen-only { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-widescreen-only { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-widescreen-only { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-widescreen-only { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-widescreen-only { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-widescreen-only { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-widescreen-only { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-widescreen-only { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-widescreen-only { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-widescreen-only { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-widescreen-only { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-widescreen-only { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-widescreen-only { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-widescreen-only { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-widescreen-only { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-widescreen-only { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-widescreen-only { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-widescreen-only { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-widescreen-only { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-widescreen-only { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-widescreen-only { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-widescreen-only { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-widescreen-only { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-widescreen-only { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-widescreen-only { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-widescreen-only { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-widescreen-only { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-widescreen-only { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-widescreen-only { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-widescreen-only { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-widescreen-only { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-widescreen-only { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-widescreen-only { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-widescreen-only { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-widescreen-only { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-widescreen-only { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-widescreen-only { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-widescreen-only { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-widescreen-only { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-widescreen-only { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-widescreen-only { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-widescreen-only { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-widescreen-only { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-widescreen-only { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-widescreen-only { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-widescreen-only { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-widescreen-only { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-widescreen-only { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-widescreen-only { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-widescreen-only { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-widescreen-only { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-widescreen-only { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-widescreen-only { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-widescreen-only { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-widescreen-only { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-widescreen-only { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-widescreen-only { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-widescreen-only { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-widescreen-only { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-widescreen-only { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-widescreen-only { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-widescreen-only { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-widescreen-only { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-widescreen-only { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-widescreen-only { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-widescreen-only { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-widescreen-only { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-widescreen-only { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-widescreen-only { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-widescreen-only { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-widescreen-only { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-widescreen-only { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-widescreen-only { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-widescreen-only { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-widescreen-only { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-widescreen-only { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-widescreen-only { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-widescreen-only { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-widescreen-only { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-widescreen-only { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-widescreen-only { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-widescreen-only { + --bulma-grid-cell-row-span: 12; + } +} +@media screen and (min-width: 1408px) { + .cell.is-col-start-1-fullhd { + --bulma-grid-cell-column-start: 1; + } + .cell.is-col-end-1-fullhd { + --bulma-grid-cell-column-end: 1; + } + .cell.is-col-from-end-1-fullhd { + --bulma-grid-cell-column-start: -1; + } + .cell.is-col-span-1-fullhd { + --bulma-grid-cell-column-span: 1; + } + .cell.is-row-start-1-fullhd { + --bulma-grid-cell-row-start: 1; + } + .cell.is-row-end-1-fullhd { + --bulma-grid-cell-row-end: 1; + } + .cell.is-row-from-end-1-fullhd { + --bulma-grid-cell-row-start: -1; + } + .cell.is-row-span-1-fullhd { + --bulma-grid-cell-row-span: 1; + } + .cell.is-col-start-2-fullhd { + --bulma-grid-cell-column-start: 2; + } + .cell.is-col-end-2-fullhd { + --bulma-grid-cell-column-end: 2; + } + .cell.is-col-from-end-2-fullhd { + --bulma-grid-cell-column-start: -2; + } + .cell.is-col-span-2-fullhd { + --bulma-grid-cell-column-span: 2; + } + .cell.is-row-start-2-fullhd { + --bulma-grid-cell-row-start: 2; + } + .cell.is-row-end-2-fullhd { + --bulma-grid-cell-row-end: 2; + } + .cell.is-row-from-end-2-fullhd { + --bulma-grid-cell-row-start: -2; + } + .cell.is-row-span-2-fullhd { + --bulma-grid-cell-row-span: 2; + } + .cell.is-col-start-3-fullhd { + --bulma-grid-cell-column-start: 3; + } + .cell.is-col-end-3-fullhd { + --bulma-grid-cell-column-end: 3; + } + .cell.is-col-from-end-3-fullhd { + --bulma-grid-cell-column-start: -3; + } + .cell.is-col-span-3-fullhd { + --bulma-grid-cell-column-span: 3; + } + .cell.is-row-start-3-fullhd { + --bulma-grid-cell-row-start: 3; + } + .cell.is-row-end-3-fullhd { + --bulma-grid-cell-row-end: 3; + } + .cell.is-row-from-end-3-fullhd { + --bulma-grid-cell-row-start: -3; + } + .cell.is-row-span-3-fullhd { + --bulma-grid-cell-row-span: 3; + } + .cell.is-col-start-4-fullhd { + --bulma-grid-cell-column-start: 4; + } + .cell.is-col-end-4-fullhd { + --bulma-grid-cell-column-end: 4; + } + .cell.is-col-from-end-4-fullhd { + --bulma-grid-cell-column-start: -4; + } + .cell.is-col-span-4-fullhd { + --bulma-grid-cell-column-span: 4; + } + .cell.is-row-start-4-fullhd { + --bulma-grid-cell-row-start: 4; + } + .cell.is-row-end-4-fullhd { + --bulma-grid-cell-row-end: 4; + } + .cell.is-row-from-end-4-fullhd { + --bulma-grid-cell-row-start: -4; + } + .cell.is-row-span-4-fullhd { + --bulma-grid-cell-row-span: 4; + } + .cell.is-col-start-5-fullhd { + --bulma-grid-cell-column-start: 5; + } + .cell.is-col-end-5-fullhd { + --bulma-grid-cell-column-end: 5; + } + .cell.is-col-from-end-5-fullhd { + --bulma-grid-cell-column-start: -5; + } + .cell.is-col-span-5-fullhd { + --bulma-grid-cell-column-span: 5; + } + .cell.is-row-start-5-fullhd { + --bulma-grid-cell-row-start: 5; + } + .cell.is-row-end-5-fullhd { + --bulma-grid-cell-row-end: 5; + } + .cell.is-row-from-end-5-fullhd { + --bulma-grid-cell-row-start: -5; + } + .cell.is-row-span-5-fullhd { + --bulma-grid-cell-row-span: 5; + } + .cell.is-col-start-6-fullhd { + --bulma-grid-cell-column-start: 6; + } + .cell.is-col-end-6-fullhd { + --bulma-grid-cell-column-end: 6; + } + .cell.is-col-from-end-6-fullhd { + --bulma-grid-cell-column-start: -6; + } + .cell.is-col-span-6-fullhd { + --bulma-grid-cell-column-span: 6; + } + .cell.is-row-start-6-fullhd { + --bulma-grid-cell-row-start: 6; + } + .cell.is-row-end-6-fullhd { + --bulma-grid-cell-row-end: 6; + } + .cell.is-row-from-end-6-fullhd { + --bulma-grid-cell-row-start: -6; + } + .cell.is-row-span-6-fullhd { + --bulma-grid-cell-row-span: 6; + } + .cell.is-col-start-7-fullhd { + --bulma-grid-cell-column-start: 7; + } + .cell.is-col-end-7-fullhd { + --bulma-grid-cell-column-end: 7; + } + .cell.is-col-from-end-7-fullhd { + --bulma-grid-cell-column-start: -7; + } + .cell.is-col-span-7-fullhd { + --bulma-grid-cell-column-span: 7; + } + .cell.is-row-start-7-fullhd { + --bulma-grid-cell-row-start: 7; + } + .cell.is-row-end-7-fullhd { + --bulma-grid-cell-row-end: 7; + } + .cell.is-row-from-end-7-fullhd { + --bulma-grid-cell-row-start: -7; + } + .cell.is-row-span-7-fullhd { + --bulma-grid-cell-row-span: 7; + } + .cell.is-col-start-8-fullhd { + --bulma-grid-cell-column-start: 8; + } + .cell.is-col-end-8-fullhd { + --bulma-grid-cell-column-end: 8; + } + .cell.is-col-from-end-8-fullhd { + --bulma-grid-cell-column-start: -8; + } + .cell.is-col-span-8-fullhd { + --bulma-grid-cell-column-span: 8; + } + .cell.is-row-start-8-fullhd { + --bulma-grid-cell-row-start: 8; + } + .cell.is-row-end-8-fullhd { + --bulma-grid-cell-row-end: 8; + } + .cell.is-row-from-end-8-fullhd { + --bulma-grid-cell-row-start: -8; + } + .cell.is-row-span-8-fullhd { + --bulma-grid-cell-row-span: 8; + } + .cell.is-col-start-9-fullhd { + --bulma-grid-cell-column-start: 9; + } + .cell.is-col-end-9-fullhd { + --bulma-grid-cell-column-end: 9; + } + .cell.is-col-from-end-9-fullhd { + --bulma-grid-cell-column-start: -9; + } + .cell.is-col-span-9-fullhd { + --bulma-grid-cell-column-span: 9; + } + .cell.is-row-start-9-fullhd { + --bulma-grid-cell-row-start: 9; + } + .cell.is-row-end-9-fullhd { + --bulma-grid-cell-row-end: 9; + } + .cell.is-row-from-end-9-fullhd { + --bulma-grid-cell-row-start: -9; + } + .cell.is-row-span-9-fullhd { + --bulma-grid-cell-row-span: 9; + } + .cell.is-col-start-10-fullhd { + --bulma-grid-cell-column-start: 10; + } + .cell.is-col-end-10-fullhd { + --bulma-grid-cell-column-end: 10; + } + .cell.is-col-from-end-10-fullhd { + --bulma-grid-cell-column-start: -10; + } + .cell.is-col-span-10-fullhd { + --bulma-grid-cell-column-span: 10; + } + .cell.is-row-start-10-fullhd { + --bulma-grid-cell-row-start: 10; + } + .cell.is-row-end-10-fullhd { + --bulma-grid-cell-row-end: 10; + } + .cell.is-row-from-end-10-fullhd { + --bulma-grid-cell-row-start: -10; + } + .cell.is-row-span-10-fullhd { + --bulma-grid-cell-row-span: 10; + } + .cell.is-col-start-11-fullhd { + --bulma-grid-cell-column-start: 11; + } + .cell.is-col-end-11-fullhd { + --bulma-grid-cell-column-end: 11; + } + .cell.is-col-from-end-11-fullhd { + --bulma-grid-cell-column-start: -11; + } + .cell.is-col-span-11-fullhd { + --bulma-grid-cell-column-span: 11; + } + .cell.is-row-start-11-fullhd { + --bulma-grid-cell-row-start: 11; + } + .cell.is-row-end-11-fullhd { + --bulma-grid-cell-row-end: 11; + } + .cell.is-row-from-end-11-fullhd { + --bulma-grid-cell-row-start: -11; + } + .cell.is-row-span-11-fullhd { + --bulma-grid-cell-row-span: 11; + } + .cell.is-col-start-12-fullhd { + --bulma-grid-cell-column-start: 12; + } + .cell.is-col-end-12-fullhd { + --bulma-grid-cell-column-end: 12; + } + .cell.is-col-from-end-12-fullhd { + --bulma-grid-cell-column-start: -12; + } + .cell.is-col-span-12-fullhd { + --bulma-grid-cell-column-span: 12; + } + .cell.is-row-start-12-fullhd { + --bulma-grid-cell-row-start: 12; + } + .cell.is-row-end-12-fullhd { + --bulma-grid-cell-row-end: 12; + } + .cell.is-row-from-end-12-fullhd { + --bulma-grid-cell-row-start: -12; + } + .cell.is-row-span-12-fullhd { + --bulma-grid-cell-row-span: 12; + } +} + +/* Bulma Components */ +.container { + flex-grow: 1; + margin: 0 auto; + position: relative; + width: 100%; +} +.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; + } +} + +.footer { + --bulma-footer-background-color: var(--bulma-scheme-main-bis); + --bulma-footer-color: false; + --bulma-footer-padding: 3rem 1.5rem 6rem; + background-color: var(--bulma-footer-background-color); + padding: var(--bulma-footer-padding); +} + +.hero { + --bulma-hero-body-padding: 3rem 1.5rem; + --bulma-hero-body-padding-tablet: 3rem 3rem; + --bulma-hero-body-padding-small: 1.5rem; + --bulma-hero-body-padding-medium: 9rem 4.5rem; + --bulma-hero-body-padding-large: 18rem 6rem; +} + +.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 { + --bulma-hero-h: var(--bulma-white-h); + --bulma-hero-s: var(--bulma-white-s); + --bulma-hero-background-l: var(--bulma-white-l); + --bulma-hero-color-l: var(--bulma-white-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-white .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-white .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-white .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-white .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-white.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-white.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-black { + --bulma-hero-h: var(--bulma-black-h); + --bulma-hero-s: var(--bulma-black-s); + --bulma-hero-background-l: var(--bulma-black-l); + --bulma-hero-color-l: var(--bulma-black-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-black .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-black .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-black .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-black .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-black.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-black.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-light { + --bulma-hero-h: var(--bulma-light-h); + --bulma-hero-s: var(--bulma-light-s); + --bulma-hero-background-l: var(--bulma-light-l); + --bulma-hero-color-l: var(--bulma-light-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-light .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-light .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-light .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-light .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-light.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-light.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-dark { + --bulma-hero-h: var(--bulma-dark-h); + --bulma-hero-s: var(--bulma-dark-s); + --bulma-hero-background-l: var(--bulma-dark-l); + --bulma-hero-color-l: var(--bulma-dark-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-dark .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-dark .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-dark .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-dark .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-dark.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-dark.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-text { + --bulma-hero-h: var(--bulma-text-h); + --bulma-hero-s: var(--bulma-text-s); + --bulma-hero-background-l: var(--bulma-text-l); + --bulma-hero-color-l: var(--bulma-text-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-text .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-text .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-text .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-text .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-text.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-text.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-primary { + --bulma-hero-h: var(--bulma-primary-h); + --bulma-hero-s: var(--bulma-primary-s); + --bulma-hero-background-l: var(--bulma-primary-l); + --bulma-hero-color-l: var(--bulma-primary-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-primary .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-primary .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-primary .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-primary .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-primary.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-primary.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-link { + --bulma-hero-h: var(--bulma-link-h); + --bulma-hero-s: var(--bulma-link-s); + --bulma-hero-background-l: var(--bulma-link-l); + --bulma-hero-color-l: var(--bulma-link-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-link .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-link .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-link .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-link .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-link.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-link.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-info { + --bulma-hero-h: var(--bulma-info-h); + --bulma-hero-s: var(--bulma-info-s); + --bulma-hero-background-l: var(--bulma-info-l); + --bulma-hero-color-l: var(--bulma-info-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-info .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-info .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-info .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-info .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-info.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-info.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-success { + --bulma-hero-h: var(--bulma-success-h); + --bulma-hero-s: var(--bulma-success-s); + --bulma-hero-background-l: var(--bulma-success-l); + --bulma-hero-color-l: var(--bulma-success-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-success .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-success .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-success .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-success .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-success.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-success.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-warning { + --bulma-hero-h: var(--bulma-warning-h); + --bulma-hero-s: var(--bulma-warning-s); + --bulma-hero-background-l: var(--bulma-warning-l); + --bulma-hero-color-l: var(--bulma-warning-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-warning .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-warning .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-warning .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-warning .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-warning.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-warning.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-danger { + --bulma-hero-h: var(--bulma-danger-h); + --bulma-hero-s: var(--bulma-danger-s); + --bulma-hero-background-l: var(--bulma-danger-l); + --bulma-hero-color-l: var(--bulma-danger-invert-l); + background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-danger .navbar { + --bulma-navbar-item-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-hover-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-navbar-item-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-navbar-item-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-danger .tabs { + --bulma-tabs-link-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-tabs-boxed-link-active-border-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); + --bulma-tabs-link-active-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)); +} +.hero.is-danger .subtitle { + --bulma-subtitle-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-subtitle-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-danger .title { + --bulma-title-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); + --bulma-title-strong-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)); +} +.hero.is-danger.is-bold { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-background-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); +} +@media screen and (max-width: 768px) { + .hero.is-danger.is-bold .navbar-menu { + background-image: linear-gradient(141deg, hsl(calc(var(--bulma-hero-h) - 5deg), calc(var(--bulma-hero-s) + 10%), calc(var(--bulma-hero-background-l) + 5%)) 0%, hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-color-l)) 71%, hsl(calc(var(--bulma-hero-h) + 5deg), calc(var(--bulma-hero-s) - 10%), calc(var(--bulma-hero-background-l) - 5%)) 100%); + } +} +.hero.is-small .hero-body { + padding: var(--bulma-hero-body-padding-small); +} +@media screen and (min-width: 769px), print { + .hero.is-medium .hero-body { + padding: var(--bulma-hero-body-padding-medium); + } +} +@media screen and (min-width: 769px), print { + .hero.is-large .hero-body { + padding: var(--bulma-hero-body-padding-large); + } +} +.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-inline-end: 1.5rem; + } +} + +.hero-head, +.hero-foot { + flex-grow: 0; + flex-shrink: 0; +} + +.hero-body { + flex-grow: 1; + flex-shrink: 0; + padding: var(--bulma-hero-body-padding); +} +@media screen and (min-width: 769px), print { + .hero-body { + padding: var(--bulma-hero-body-padding-tablet); + } +} + +.level { + --bulma-level-item-spacing: calc(var(--bulma-block-spacing) * 0.5); + align-items: center; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: var(--bulma-level-item-spacing); +} +.level code { + border-radius: var(--bulma-radius); +} +.level img { + display: inline-block; + vertical-align: top; +} +.level.is-mobile { + display: flex; + flex-direction: row; +} +.level.is-mobile .level-left, +.level.is-mobile .level-right { + display: flex; +} +.level.is-mobile .level-item:not(.is-narrow) { + flex-grow: 1; +} +@media screen and (min-width: 769px), print { + .level { + display: flex; + flex-direction: row; + } + .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; +} + +.level-left, +.level-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + gap: calc(var(--bulma-block-spacing) * 0.5); +} +.level-left .level-item.is-flexible, +.level-right .level-item.is-flexible { + flex-grow: 1; +} + +.level-left { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-start; +} +@media screen and (min-width: 769px), print { + .level-left { + flex-direction: row; + } +} + +.level-right { + align-items: center; + display: flex; + flex-direction: column; + justify-content: flex-end; +} +@media screen and (min-width: 769px), print { + .level-right { + flex-direction: row; + } +} + +.media { + --bulma-media-border-color: hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l), 0.5); + --bulma-media-border-size: 1px; + --bulma-media-spacing: 1rem; + --bulma-media-spacing-large: 1.5rem; + --bulma-media-content-spacing: 0.75rem; + --bulma-media-level-1-spacing: 0.75rem; + --bulma-media-level-1-content-spacing: 0.5rem; + --bulma-media-level-2-spacing: 0.5rem; + align-items: flex-start; + display: flex; + text-align: inherit; +} +.media .content:not(:last-child) { + margin-bottom: var(--bulma-media-content-spacing); +} +.media .media { + border-top-color: var(--bulma-media-border-color); + border-top-style: solid; + border-top-width: var(--bulma-media-border-size); + display: flex; + padding-top: var(--bulma-media-level-1-spacing); +} +.media .media .content:not(:last-child), +.media .media .control:not(:last-child) { + margin-bottom: var(--bulma-media-level-1-content-spacing); +} +.media .media .media { + padding-top: var(--bulma-media-level-2-spacing); +} +.media .media .media + .media { + margin-top: var(--bulma-media-level-2-spacing); +} +.media + .media { + border-top-color: var(--bulma-media-border-color); + border-top-style: solid; + border-top-width: var(--bulma-media-border-size); + margin-top: var(--bulma-media-spacing); + padding-top: var(--bulma-media-spacing); +} +.media.is-large + .media { + margin-top: var(--bulma-media-spacing-large); + padding-top: var(--bulma-media-spacing-large); +} + +.media-left, +.media-right { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; +} + +.media-left { + margin-inline-end: var(--bulma-media-spacing); +} + +.media-right { + margin-inline-start: var(--bulma-media-spacing); +} + +.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; + } +} +.section { + --bulma-section-padding: 3rem 1.5rem; + --bulma-section-padding-desktop: 3rem 3rem; + --bulma-section-padding-medium: 9rem 4.5rem; + --bulma-section-padding-large: 18rem 6rem; + padding: var(--bulma-section-padding); +} +@media screen and (min-width: 1024px) { + .section { + padding: var(--bulma-section-padding-desktop); + } + .section.is-medium { + padding: var(--bulma-section-padding-medium); + } + .section.is-large { + padding: var(--bulma-section-padding-large); + } +} + +:root { + --bulma-skeleton-background: var(--bulma-border); + --bulma-skeleton-radius: var(--bulma-radius-small); + --bulma-skeleton-block-min-height: 4.5em; + --bulma-skeleton-lines-gap: 0.75em; + --bulma-skeleton-line-height: 0.75em; +} + +.skeleton-lines > div, .skeleton-block, .has-skeleton::after, .is-skeleton { + animation-duration: 2s; + animation-iteration-count: infinite; + animation-name: pulsate; + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + background-color: var(--bulma-skeleton-background); + border-radius: var(--bulma-skeleton-radius); + box-shadow: none; + pointer-events: none; +} + +.is-skeleton { + color: transparent !important; +} +.is-skeleton em, +.is-skeleton strong { + color: inherit; +} +.is-skeleton img { + visibility: hidden; +} +.is-skeleton.checkbox input { + opacity: 0; +} +.is-skeleton.delete { + border-radius: var(--bulma-radius-rounded); +} +.is-skeleton.delete::before, .is-skeleton.delete::after { + display: none; +} + +input.is-skeleton, +textarea.is-skeleton { + resize: none; +} +input.is-skeleton::-moz-placeholder, +textarea.is-skeleton::-moz-placeholder { + color: transparent !important; +} +input.is-skeleton::-webkit-input-placeholder, +textarea.is-skeleton::-webkit-input-placeholder { + color: transparent !important; +} +input.is-skeleton:-moz-placeholder, +textarea.is-skeleton:-moz-placeholder { + color: transparent !important; +} +input.is-skeleton:-ms-input-placeholder, +textarea.is-skeleton:-ms-input-placeholder { + color: transparent !important; +} + +.has-skeleton { + color: transparent !important; + position: relative; +} +.has-skeleton::after { + content: ""; + display: block; + height: 100%; + left: 0; + max-width: 100%; + min-width: 10%; + position: absolute; + top: 0; + width: 7em; +} + +.skeleton-block { + color: transparent !important; + min-height: var(--bulma-skeleton-block-min-height); +} + +.skeleton-lines { + color: transparent !important; + display: flex; + flex-direction: column; + gap: var(--bulma-skeleton-lines-gap); + position: relative; +} +.skeleton-lines > div { + height: var(--bulma-skeleton-line-height); +} +.skeleton-lines > div:last-child { + min-width: 4em; + width: 30%; +} + +.skeleton { + background-image: linear-gradient(0deg, transparent 0%, transparent 50%, #f60 50%, #f60 100%); + background-position: top left; + background-size: 1.5em; +} + +/* Bulma Helpers */ +.is-aspect-ratio-1by1 { + aspect-ratio: 1/1; +} + +.is-aspect-ratio-5by4 { + aspect-ratio: 5/4; +} + +.is-aspect-ratio-4by3 { + aspect-ratio: 4/3; +} + +.is-aspect-ratio-3by2 { + aspect-ratio: 3/2; +} + +.is-aspect-ratio-5by3 { + aspect-ratio: 5/3; +} + +.is-aspect-ratio-16by9 { + aspect-ratio: 16/9; +} + +.is-aspect-ratio-2by1 { + aspect-ratio: 2/1; +} + +.is-aspect-ratio-3by1 { + aspect-ratio: 3/1; +} + +.is-aspect-ratio-4by5 { + aspect-ratio: 4/5; +} + +.is-aspect-ratio-3by4 { + aspect-ratio: 3/4; +} + +.is-aspect-ratio-2by3 { + aspect-ratio: 2/3; +} + +.is-aspect-ratio-3by5 { + aspect-ratio: 3/5; +} + +.is-aspect-ratio-9by16 { + aspect-ratio: 9/16; +} + +.is-aspect-ratio-1by2 { + aspect-ratio: 1/2; +} + +.is-aspect-ratio-1by3 { + aspect-ratio: 1/3; +} + +.has-radius-small { + border-radius: var(--bulma-radius-small); +} + +.has-radius-normal { + border-radius: var(--bulma-radius); +} + +.has-radius-large { + border-radius: var(--bulma-radius-large); +} + +.has-radius-rounded { + border-radius: var(--bulma-radius-rounded); +} + +.has-background { + background-color: var(--bulma-background); +} + +[class*=is-color-white], +[class*=has-text-white] { + --bulma-color-l: var(--bulma-white-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-white-h), var(--bulma-white-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-white], +[class*=has-background-white] { + --bulma-background-l: var(--bulma-white-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-white-h), var(--bulma-white-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-white-invert, +.has-text-white-invert { + --bulma-color-l: var(--bulma-white-invert-l); +} + +.is-background-white-invert, +.has-background-white-invert { + --bulma-background-l: var(--bulma-white-invert-l); +} + +.is-color-white-on-scheme, +.has-text-white-on-scheme { + --bulma-color-l: var(--bulma-white-on-scheme-l); +} + +.is-background-white-on-scheme, +.has-background-white-on-scheme { + --bulma-background-l: var(--bulma-white-on-scheme-l); +} + +.is-color-white-light, +.has-text-white-light { + --bulma-color-l: var(--bulma-white-light-l); +} + +.is-background-white-light, +.has-background-white-light { + --bulma-background-l: var(--bulma-white-light-l); +} + +.is-color-white-light-invert, +.has-text-white-light-invert { + --bulma-color-l: var(--bulma-white-light-invert-l); +} + +.is-background-white-light-invert, +.has-background-white-light-invert { + --bulma-background-l: var(--bulma-white-light-invert-l); +} + +.is-color-white-dark, +.has-text-white-dark { + --bulma-color-l: var(--bulma-white-dark-l); +} + +.is-background-white-dark, +.has-background-white-dark { + --bulma-background-l: var(--bulma-white-dark-l); +} + +.is-color-white-dark-invert, +.has-text-white-dark-invert { + --bulma-color-l: var(--bulma-white-dark-invert-l); +} + +.is-background-white-dark-invert, +.has-background-white-dark-invert { + --bulma-background-l: var(--bulma-white-dark-invert-l); +} + +.is-color-white-soft, +.has-text-white-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-white-soft, +.has-background-white-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-white-bold, +.has-text-white-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-white-bold, +.has-background-white-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-white-soft-invert, +.has-text-white-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-white-soft-invert, +.has-background-white-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-white-bold-invert, +.has-text-white-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-white-bold-invert, +.has-background-white-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-white-00, +.has-text-white-00 { + --bulma-color-l: var(--bulma-white-00-l); +} + +.is-background-white-00, +.has-background-white-00 { + --bulma-background-l: var(--bulma-white-00-l); +} + +.is-color-white-00-invert, +.has-text-white-00-invert { + --bulma-color-l: var(--bulma-white-00-invert-l); +} + +.is-background-white-00-invert, +.has-background-white-00-invert { + --bulma-background-l: var(--bulma-white-00-invert-l); +} + +.is-color-white-05, +.has-text-white-05 { + --bulma-color-l: var(--bulma-white-05-l); +} + +.is-background-white-05, +.has-background-white-05 { + --bulma-background-l: var(--bulma-white-05-l); +} + +.is-color-white-05-invert, +.has-text-white-05-invert { + --bulma-color-l: var(--bulma-white-05-invert-l); +} + +.is-background-white-05-invert, +.has-background-white-05-invert { + --bulma-background-l: var(--bulma-white-05-invert-l); +} + +.is-color-white-10, +.has-text-white-10 { + --bulma-color-l: var(--bulma-white-10-l); +} + +.is-background-white-10, +.has-background-white-10 { + --bulma-background-l: var(--bulma-white-10-l); +} + +.is-color-white-10-invert, +.has-text-white-10-invert { + --bulma-color-l: var(--bulma-white-10-invert-l); +} + +.is-background-white-10-invert, +.has-background-white-10-invert { + --bulma-background-l: var(--bulma-white-10-invert-l); +} + +.is-color-white-15, +.has-text-white-15 { + --bulma-color-l: var(--bulma-white-15-l); +} + +.is-background-white-15, +.has-background-white-15 { + --bulma-background-l: var(--bulma-white-15-l); +} + +.is-color-white-15-invert, +.has-text-white-15-invert { + --bulma-color-l: var(--bulma-white-15-invert-l); +} + +.is-background-white-15-invert, +.has-background-white-15-invert { + --bulma-background-l: var(--bulma-white-15-invert-l); +} + +.is-color-white-20, +.has-text-white-20 { + --bulma-color-l: var(--bulma-white-20-l); +} + +.is-background-white-20, +.has-background-white-20 { + --bulma-background-l: var(--bulma-white-20-l); +} + +.is-color-white-20-invert, +.has-text-white-20-invert { + --bulma-color-l: var(--bulma-white-20-invert-l); +} + +.is-background-white-20-invert, +.has-background-white-20-invert { + --bulma-background-l: var(--bulma-white-20-invert-l); +} + +.is-color-white-25, +.has-text-white-25 { + --bulma-color-l: var(--bulma-white-25-l); +} + +.is-background-white-25, +.has-background-white-25 { + --bulma-background-l: var(--bulma-white-25-l); +} + +.is-color-white-25-invert, +.has-text-white-25-invert { + --bulma-color-l: var(--bulma-white-25-invert-l); +} + +.is-background-white-25-invert, +.has-background-white-25-invert { + --bulma-background-l: var(--bulma-white-25-invert-l); +} + +.is-color-white-30, +.has-text-white-30 { + --bulma-color-l: var(--bulma-white-30-l); +} + +.is-background-white-30, +.has-background-white-30 { + --bulma-background-l: var(--bulma-white-30-l); +} + +.is-color-white-30-invert, +.has-text-white-30-invert { + --bulma-color-l: var(--bulma-white-30-invert-l); +} + +.is-background-white-30-invert, +.has-background-white-30-invert { + --bulma-background-l: var(--bulma-white-30-invert-l); +} + +.is-color-white-35, +.has-text-white-35 { + --bulma-color-l: var(--bulma-white-35-l); +} + +.is-background-white-35, +.has-background-white-35 { + --bulma-background-l: var(--bulma-white-35-l); +} + +.is-color-white-35-invert, +.has-text-white-35-invert { + --bulma-color-l: var(--bulma-white-35-invert-l); +} + +.is-background-white-35-invert, +.has-background-white-35-invert { + --bulma-background-l: var(--bulma-white-35-invert-l); +} + +.is-color-white-40, +.has-text-white-40 { + --bulma-color-l: var(--bulma-white-40-l); +} + +.is-background-white-40, +.has-background-white-40 { + --bulma-background-l: var(--bulma-white-40-l); +} + +.is-color-white-40-invert, +.has-text-white-40-invert { + --bulma-color-l: var(--bulma-white-40-invert-l); +} + +.is-background-white-40-invert, +.has-background-white-40-invert { + --bulma-background-l: var(--bulma-white-40-invert-l); +} + +.is-color-white-45, +.has-text-white-45 { + --bulma-color-l: var(--bulma-white-45-l); +} + +.is-background-white-45, +.has-background-white-45 { + --bulma-background-l: var(--bulma-white-45-l); +} + +.is-color-white-45-invert, +.has-text-white-45-invert { + --bulma-color-l: var(--bulma-white-45-invert-l); +} + +.is-background-white-45-invert, +.has-background-white-45-invert { + --bulma-background-l: var(--bulma-white-45-invert-l); +} + +.is-color-white-50, +.has-text-white-50 { + --bulma-color-l: var(--bulma-white-50-l); +} + +.is-background-white-50, +.has-background-white-50 { + --bulma-background-l: var(--bulma-white-50-l); +} + +.is-color-white-50-invert, +.has-text-white-50-invert { + --bulma-color-l: var(--bulma-white-50-invert-l); +} + +.is-background-white-50-invert, +.has-background-white-50-invert { + --bulma-background-l: var(--bulma-white-50-invert-l); +} + +.is-color-white-55, +.has-text-white-55 { + --bulma-color-l: var(--bulma-white-55-l); +} + +.is-background-white-55, +.has-background-white-55 { + --bulma-background-l: var(--bulma-white-55-l); +} + +.is-color-white-55-invert, +.has-text-white-55-invert { + --bulma-color-l: var(--bulma-white-55-invert-l); +} + +.is-background-white-55-invert, +.has-background-white-55-invert { + --bulma-background-l: var(--bulma-white-55-invert-l); +} + +.is-color-white-60, +.has-text-white-60 { + --bulma-color-l: var(--bulma-white-60-l); +} + +.is-background-white-60, +.has-background-white-60 { + --bulma-background-l: var(--bulma-white-60-l); +} + +.is-color-white-60-invert, +.has-text-white-60-invert { + --bulma-color-l: var(--bulma-white-60-invert-l); +} + +.is-background-white-60-invert, +.has-background-white-60-invert { + --bulma-background-l: var(--bulma-white-60-invert-l); +} + +.is-color-white-65, +.has-text-white-65 { + --bulma-color-l: var(--bulma-white-65-l); +} + +.is-background-white-65, +.has-background-white-65 { + --bulma-background-l: var(--bulma-white-65-l); +} + +.is-color-white-65-invert, +.has-text-white-65-invert { + --bulma-color-l: var(--bulma-white-65-invert-l); +} + +.is-background-white-65-invert, +.has-background-white-65-invert { + --bulma-background-l: var(--bulma-white-65-invert-l); +} + +.is-color-white-70, +.has-text-white-70 { + --bulma-color-l: var(--bulma-white-70-l); +} + +.is-background-white-70, +.has-background-white-70 { + --bulma-background-l: var(--bulma-white-70-l); +} + +.is-color-white-70-invert, +.has-text-white-70-invert { + --bulma-color-l: var(--bulma-white-70-invert-l); +} + +.is-background-white-70-invert, +.has-background-white-70-invert { + --bulma-background-l: var(--bulma-white-70-invert-l); +} + +.is-color-white-75, +.has-text-white-75 { + --bulma-color-l: var(--bulma-white-75-l); +} + +.is-background-white-75, +.has-background-white-75 { + --bulma-background-l: var(--bulma-white-75-l); +} + +.is-color-white-75-invert, +.has-text-white-75-invert { + --bulma-color-l: var(--bulma-white-75-invert-l); +} + +.is-background-white-75-invert, +.has-background-white-75-invert { + --bulma-background-l: var(--bulma-white-75-invert-l); +} + +.is-color-white-80, +.has-text-white-80 { + --bulma-color-l: var(--bulma-white-80-l); +} + +.is-background-white-80, +.has-background-white-80 { + --bulma-background-l: var(--bulma-white-80-l); +} + +.is-color-white-80-invert, +.has-text-white-80-invert { + --bulma-color-l: var(--bulma-white-80-invert-l); +} + +.is-background-white-80-invert, +.has-background-white-80-invert { + --bulma-background-l: var(--bulma-white-80-invert-l); +} + +.is-color-white-85, +.has-text-white-85 { + --bulma-color-l: var(--bulma-white-85-l); +} + +.is-background-white-85, +.has-background-white-85 { + --bulma-background-l: var(--bulma-white-85-l); +} + +.is-color-white-85-invert, +.has-text-white-85-invert { + --bulma-color-l: var(--bulma-white-85-invert-l); +} + +.is-background-white-85-invert, +.has-background-white-85-invert { + --bulma-background-l: var(--bulma-white-85-invert-l); +} + +.is-color-white-90, +.has-text-white-90 { + --bulma-color-l: var(--bulma-white-90-l); +} + +.is-background-white-90, +.has-background-white-90 { + --bulma-background-l: var(--bulma-white-90-l); +} + +.is-color-white-90-invert, +.has-text-white-90-invert { + --bulma-color-l: var(--bulma-white-90-invert-l); +} + +.is-background-white-90-invert, +.has-background-white-90-invert { + --bulma-background-l: var(--bulma-white-90-invert-l); +} + +.is-color-white-95, +.has-text-white-95 { + --bulma-color-l: var(--bulma-white-95-l); +} + +.is-background-white-95, +.has-background-white-95 { + --bulma-background-l: var(--bulma-white-95-l); +} + +.is-color-white-95-invert, +.has-text-white-95-invert { + --bulma-color-l: var(--bulma-white-95-invert-l); +} + +.is-background-white-95-invert, +.has-background-white-95-invert { + --bulma-background-l: var(--bulma-white-95-invert-l); +} + +.is-color-white-100, +.has-text-white-100 { + --bulma-color-l: var(--bulma-white-100-l); +} + +.is-background-white-100, +.has-background-white-100 { + --bulma-background-l: var(--bulma-white-100-l); +} + +.is-color-white-100-invert, +.has-text-white-100-invert { + --bulma-color-l: var(--bulma-white-100-invert-l); +} + +.is-background-white-100-invert, +.has-background-white-100-invert { + --bulma-background-l: var(--bulma-white-100-invert-l); +} + +a.is-color-white:hover, a.is-color-white:focus-visible, +button.is-color-white:hover, +button.is-color-white:focus-visible, +is-color-white.is-hoverable:hover, +is-color-white.is-hoverable:focus-visible, +a.has-text-white:hover, +a.has-text-white:focus-visible, +button.has-text-white:hover, +button.has-text-white:focus-visible, +has-text-white.is-hoverable:hover, +has-text-white.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-white:active, +button.is-color-white:active, +is-color-white.is-hoverable:active, +a.has-text-white:active, +button.has-text-white:active, +has-text-white.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-white:hover, a.is-background-white:focus-visible, +button.is-background-white:hover, +button.is-background-white:focus-visible, +is-background-white.is-hoverable:hover, +is-background-white.is-hoverable:focus-visible, +a.has-background-white:hover, +a.has-background-white:focus-visible, +button.has-background-white:hover, +button.has-background-white:focus-visible, +has-background-white.is-hoverable:hover, +has-background-white.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-white:active, +button.is-background-white:active, +is-background-white.is-hoverable:active, +a.has-background-white:active, +button.has-background-white:active, +has-background-white.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-white { + --h: var(--bulma-white-h); + --s: var(--bulma-white-s); + --l: var(--bulma-white-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-white-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-white-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-white-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-white-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-white-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-white-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-white-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-white-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-white-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-white-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-white-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-white-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-white-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-white-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-white-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-white-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-white-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-white-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-white-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-white-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-white-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-black], +[class*=has-text-black] { + --bulma-color-l: var(--bulma-black-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-black-h), var(--bulma-black-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-black], +[class*=has-background-black] { + --bulma-background-l: var(--bulma-black-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-black-h), var(--bulma-black-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-black-invert, +.has-text-black-invert { + --bulma-color-l: var(--bulma-black-invert-l); +} + +.is-background-black-invert, +.has-background-black-invert { + --bulma-background-l: var(--bulma-black-invert-l); +} + +.is-color-black-on-scheme, +.has-text-black-on-scheme { + --bulma-color-l: var(--bulma-black-on-scheme-l); +} + +.is-background-black-on-scheme, +.has-background-black-on-scheme { + --bulma-background-l: var(--bulma-black-on-scheme-l); +} + +.is-color-black-light, +.has-text-black-light { + --bulma-color-l: var(--bulma-black-light-l); +} + +.is-background-black-light, +.has-background-black-light { + --bulma-background-l: var(--bulma-black-light-l); +} + +.is-color-black-light-invert, +.has-text-black-light-invert { + --bulma-color-l: var(--bulma-black-light-invert-l); +} + +.is-background-black-light-invert, +.has-background-black-light-invert { + --bulma-background-l: var(--bulma-black-light-invert-l); +} + +.is-color-black-dark, +.has-text-black-dark { + --bulma-color-l: var(--bulma-black-dark-l); +} + +.is-background-black-dark, +.has-background-black-dark { + --bulma-background-l: var(--bulma-black-dark-l); +} + +.is-color-black-dark-invert, +.has-text-black-dark-invert { + --bulma-color-l: var(--bulma-black-dark-invert-l); +} + +.is-background-black-dark-invert, +.has-background-black-dark-invert { + --bulma-background-l: var(--bulma-black-dark-invert-l); +} + +.is-color-black-soft, +.has-text-black-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-black-soft, +.has-background-black-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-black-bold, +.has-text-black-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-black-bold, +.has-background-black-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-black-soft-invert, +.has-text-black-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-black-soft-invert, +.has-background-black-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-black-bold-invert, +.has-text-black-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-black-bold-invert, +.has-background-black-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-black-00, +.has-text-black-00 { + --bulma-color-l: var(--bulma-black-00-l); +} + +.is-background-black-00, +.has-background-black-00 { + --bulma-background-l: var(--bulma-black-00-l); +} + +.is-color-black-00-invert, +.has-text-black-00-invert { + --bulma-color-l: var(--bulma-black-00-invert-l); +} + +.is-background-black-00-invert, +.has-background-black-00-invert { + --bulma-background-l: var(--bulma-black-00-invert-l); +} + +.is-color-black-05, +.has-text-black-05 { + --bulma-color-l: var(--bulma-black-05-l); +} + +.is-background-black-05, +.has-background-black-05 { + --bulma-background-l: var(--bulma-black-05-l); +} + +.is-color-black-05-invert, +.has-text-black-05-invert { + --bulma-color-l: var(--bulma-black-05-invert-l); +} + +.is-background-black-05-invert, +.has-background-black-05-invert { + --bulma-background-l: var(--bulma-black-05-invert-l); +} + +.is-color-black-10, +.has-text-black-10 { + --bulma-color-l: var(--bulma-black-10-l); +} + +.is-background-black-10, +.has-background-black-10 { + --bulma-background-l: var(--bulma-black-10-l); +} + +.is-color-black-10-invert, +.has-text-black-10-invert { + --bulma-color-l: var(--bulma-black-10-invert-l); +} + +.is-background-black-10-invert, +.has-background-black-10-invert { + --bulma-background-l: var(--bulma-black-10-invert-l); +} + +.is-color-black-15, +.has-text-black-15 { + --bulma-color-l: var(--bulma-black-15-l); +} + +.is-background-black-15, +.has-background-black-15 { + --bulma-background-l: var(--bulma-black-15-l); +} + +.is-color-black-15-invert, +.has-text-black-15-invert { + --bulma-color-l: var(--bulma-black-15-invert-l); +} + +.is-background-black-15-invert, +.has-background-black-15-invert { + --bulma-background-l: var(--bulma-black-15-invert-l); +} + +.is-color-black-20, +.has-text-black-20 { + --bulma-color-l: var(--bulma-black-20-l); +} + +.is-background-black-20, +.has-background-black-20 { + --bulma-background-l: var(--bulma-black-20-l); +} + +.is-color-black-20-invert, +.has-text-black-20-invert { + --bulma-color-l: var(--bulma-black-20-invert-l); +} + +.is-background-black-20-invert, +.has-background-black-20-invert { + --bulma-background-l: var(--bulma-black-20-invert-l); +} + +.is-color-black-25, +.has-text-black-25 { + --bulma-color-l: var(--bulma-black-25-l); +} + +.is-background-black-25, +.has-background-black-25 { + --bulma-background-l: var(--bulma-black-25-l); +} + +.is-color-black-25-invert, +.has-text-black-25-invert { + --bulma-color-l: var(--bulma-black-25-invert-l); +} + +.is-background-black-25-invert, +.has-background-black-25-invert { + --bulma-background-l: var(--bulma-black-25-invert-l); +} + +.is-color-black-30, +.has-text-black-30 { + --bulma-color-l: var(--bulma-black-30-l); +} + +.is-background-black-30, +.has-background-black-30 { + --bulma-background-l: var(--bulma-black-30-l); +} + +.is-color-black-30-invert, +.has-text-black-30-invert { + --bulma-color-l: var(--bulma-black-30-invert-l); +} + +.is-background-black-30-invert, +.has-background-black-30-invert { + --bulma-background-l: var(--bulma-black-30-invert-l); +} + +.is-color-black-35, +.has-text-black-35 { + --bulma-color-l: var(--bulma-black-35-l); +} + +.is-background-black-35, +.has-background-black-35 { + --bulma-background-l: var(--bulma-black-35-l); +} + +.is-color-black-35-invert, +.has-text-black-35-invert { + --bulma-color-l: var(--bulma-black-35-invert-l); +} + +.is-background-black-35-invert, +.has-background-black-35-invert { + --bulma-background-l: var(--bulma-black-35-invert-l); +} + +.is-color-black-40, +.has-text-black-40 { + --bulma-color-l: var(--bulma-black-40-l); +} + +.is-background-black-40, +.has-background-black-40 { + --bulma-background-l: var(--bulma-black-40-l); +} + +.is-color-black-40-invert, +.has-text-black-40-invert { + --bulma-color-l: var(--bulma-black-40-invert-l); +} + +.is-background-black-40-invert, +.has-background-black-40-invert { + --bulma-background-l: var(--bulma-black-40-invert-l); +} + +.is-color-black-45, +.has-text-black-45 { + --bulma-color-l: var(--bulma-black-45-l); +} + +.is-background-black-45, +.has-background-black-45 { + --bulma-background-l: var(--bulma-black-45-l); +} + +.is-color-black-45-invert, +.has-text-black-45-invert { + --bulma-color-l: var(--bulma-black-45-invert-l); +} + +.is-background-black-45-invert, +.has-background-black-45-invert { + --bulma-background-l: var(--bulma-black-45-invert-l); +} + +.is-color-black-50, +.has-text-black-50 { + --bulma-color-l: var(--bulma-black-50-l); +} + +.is-background-black-50, +.has-background-black-50 { + --bulma-background-l: var(--bulma-black-50-l); +} + +.is-color-black-50-invert, +.has-text-black-50-invert { + --bulma-color-l: var(--bulma-black-50-invert-l); +} + +.is-background-black-50-invert, +.has-background-black-50-invert { + --bulma-background-l: var(--bulma-black-50-invert-l); +} + +.is-color-black-55, +.has-text-black-55 { + --bulma-color-l: var(--bulma-black-55-l); +} + +.is-background-black-55, +.has-background-black-55 { + --bulma-background-l: var(--bulma-black-55-l); +} + +.is-color-black-55-invert, +.has-text-black-55-invert { + --bulma-color-l: var(--bulma-black-55-invert-l); +} + +.is-background-black-55-invert, +.has-background-black-55-invert { + --bulma-background-l: var(--bulma-black-55-invert-l); +} + +.is-color-black-60, +.has-text-black-60 { + --bulma-color-l: var(--bulma-black-60-l); +} + +.is-background-black-60, +.has-background-black-60 { + --bulma-background-l: var(--bulma-black-60-l); +} + +.is-color-black-60-invert, +.has-text-black-60-invert { + --bulma-color-l: var(--bulma-black-60-invert-l); +} + +.is-background-black-60-invert, +.has-background-black-60-invert { + --bulma-background-l: var(--bulma-black-60-invert-l); +} + +.is-color-black-65, +.has-text-black-65 { + --bulma-color-l: var(--bulma-black-65-l); +} + +.is-background-black-65, +.has-background-black-65 { + --bulma-background-l: var(--bulma-black-65-l); +} + +.is-color-black-65-invert, +.has-text-black-65-invert { + --bulma-color-l: var(--bulma-black-65-invert-l); +} + +.is-background-black-65-invert, +.has-background-black-65-invert { + --bulma-background-l: var(--bulma-black-65-invert-l); +} + +.is-color-black-70, +.has-text-black-70 { + --bulma-color-l: var(--bulma-black-70-l); +} + +.is-background-black-70, +.has-background-black-70 { + --bulma-background-l: var(--bulma-black-70-l); +} + +.is-color-black-70-invert, +.has-text-black-70-invert { + --bulma-color-l: var(--bulma-black-70-invert-l); +} + +.is-background-black-70-invert, +.has-background-black-70-invert { + --bulma-background-l: var(--bulma-black-70-invert-l); +} + +.is-color-black-75, +.has-text-black-75 { + --bulma-color-l: var(--bulma-black-75-l); +} + +.is-background-black-75, +.has-background-black-75 { + --bulma-background-l: var(--bulma-black-75-l); +} + +.is-color-black-75-invert, +.has-text-black-75-invert { + --bulma-color-l: var(--bulma-black-75-invert-l); +} + +.is-background-black-75-invert, +.has-background-black-75-invert { + --bulma-background-l: var(--bulma-black-75-invert-l); +} + +.is-color-black-80, +.has-text-black-80 { + --bulma-color-l: var(--bulma-black-80-l); +} + +.is-background-black-80, +.has-background-black-80 { + --bulma-background-l: var(--bulma-black-80-l); +} + +.is-color-black-80-invert, +.has-text-black-80-invert { + --bulma-color-l: var(--bulma-black-80-invert-l); +} + +.is-background-black-80-invert, +.has-background-black-80-invert { + --bulma-background-l: var(--bulma-black-80-invert-l); +} + +.is-color-black-85, +.has-text-black-85 { + --bulma-color-l: var(--bulma-black-85-l); +} + +.is-background-black-85, +.has-background-black-85 { + --bulma-background-l: var(--bulma-black-85-l); +} + +.is-color-black-85-invert, +.has-text-black-85-invert { + --bulma-color-l: var(--bulma-black-85-invert-l); +} + +.is-background-black-85-invert, +.has-background-black-85-invert { + --bulma-background-l: var(--bulma-black-85-invert-l); +} + +.is-color-black-90, +.has-text-black-90 { + --bulma-color-l: var(--bulma-black-90-l); +} + +.is-background-black-90, +.has-background-black-90 { + --bulma-background-l: var(--bulma-black-90-l); +} + +.is-color-black-90-invert, +.has-text-black-90-invert { + --bulma-color-l: var(--bulma-black-90-invert-l); +} + +.is-background-black-90-invert, +.has-background-black-90-invert { + --bulma-background-l: var(--bulma-black-90-invert-l); +} + +.is-color-black-95, +.has-text-black-95 { + --bulma-color-l: var(--bulma-black-95-l); +} + +.is-background-black-95, +.has-background-black-95 { + --bulma-background-l: var(--bulma-black-95-l); +} + +.is-color-black-95-invert, +.has-text-black-95-invert { + --bulma-color-l: var(--bulma-black-95-invert-l); +} + +.is-background-black-95-invert, +.has-background-black-95-invert { + --bulma-background-l: var(--bulma-black-95-invert-l); +} + +.is-color-black-100, +.has-text-black-100 { + --bulma-color-l: var(--bulma-black-100-l); +} + +.is-background-black-100, +.has-background-black-100 { + --bulma-background-l: var(--bulma-black-100-l); +} + +.is-color-black-100-invert, +.has-text-black-100-invert { + --bulma-color-l: var(--bulma-black-100-invert-l); +} + +.is-background-black-100-invert, +.has-background-black-100-invert { + --bulma-background-l: var(--bulma-black-100-invert-l); +} + +a.is-color-black:hover, a.is-color-black:focus-visible, +button.is-color-black:hover, +button.is-color-black:focus-visible, +is-color-black.is-hoverable:hover, +is-color-black.is-hoverable:focus-visible, +a.has-text-black:hover, +a.has-text-black:focus-visible, +button.has-text-black:hover, +button.has-text-black:focus-visible, +has-text-black.is-hoverable:hover, +has-text-black.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-black:active, +button.is-color-black:active, +is-color-black.is-hoverable:active, +a.has-text-black:active, +button.has-text-black:active, +has-text-black.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-black:hover, a.is-background-black:focus-visible, +button.is-background-black:hover, +button.is-background-black:focus-visible, +is-background-black.is-hoverable:hover, +is-background-black.is-hoverable:focus-visible, +a.has-background-black:hover, +a.has-background-black:focus-visible, +button.has-background-black:hover, +button.has-background-black:focus-visible, +has-background-black.is-hoverable:hover, +has-background-black.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-black:active, +button.is-background-black:active, +is-background-black.is-hoverable:active, +a.has-background-black:active, +button.has-background-black:active, +has-background-black.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-black { + --h: var(--bulma-black-h); + --s: var(--bulma-black-s); + --l: var(--bulma-black-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-black-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-black-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-black-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-black-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-black-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-black-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-black-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-black-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-black-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-black-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-black-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-black-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-black-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-black-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-black-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-black-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-black-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-black-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-black-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-black-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-black-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-light], +[class*=has-text-light] { + --bulma-color-l: var(--bulma-light-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-light-h), var(--bulma-light-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-light], +[class*=has-background-light] { + --bulma-background-l: var(--bulma-light-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-light-h), var(--bulma-light-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-light-invert, +.has-text-light-invert { + --bulma-color-l: var(--bulma-light-invert-l); +} + +.is-background-light-invert, +.has-background-light-invert { + --bulma-background-l: var(--bulma-light-invert-l); +} + +.is-color-light-on-scheme, +.has-text-light-on-scheme { + --bulma-color-l: var(--bulma-light-on-scheme-l); +} + +.is-background-light-on-scheme, +.has-background-light-on-scheme { + --bulma-background-l: var(--bulma-light-on-scheme-l); +} + +.is-color-light-light, +.has-text-light-light { + --bulma-color-l: var(--bulma-light-light-l); +} + +.is-background-light-light, +.has-background-light-light { + --bulma-background-l: var(--bulma-light-light-l); +} + +.is-color-light-light-invert, +.has-text-light-light-invert { + --bulma-color-l: var(--bulma-light-light-invert-l); +} + +.is-background-light-light-invert, +.has-background-light-light-invert { + --bulma-background-l: var(--bulma-light-light-invert-l); +} + +.is-color-light-dark, +.has-text-light-dark { + --bulma-color-l: var(--bulma-light-dark-l); +} + +.is-background-light-dark, +.has-background-light-dark { + --bulma-background-l: var(--bulma-light-dark-l); +} + +.is-color-light-dark-invert, +.has-text-light-dark-invert { + --bulma-color-l: var(--bulma-light-dark-invert-l); +} + +.is-background-light-dark-invert, +.has-background-light-dark-invert { + --bulma-background-l: var(--bulma-light-dark-invert-l); +} + +.is-color-light-soft, +.has-text-light-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-light-soft, +.has-background-light-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-light-bold, +.has-text-light-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-light-bold, +.has-background-light-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-light-soft-invert, +.has-text-light-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-light-soft-invert, +.has-background-light-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-light-bold-invert, +.has-text-light-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-light-bold-invert, +.has-background-light-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-light-00, +.has-text-light-00 { + --bulma-color-l: var(--bulma-light-00-l); +} + +.is-background-light-00, +.has-background-light-00 { + --bulma-background-l: var(--bulma-light-00-l); +} + +.is-color-light-00-invert, +.has-text-light-00-invert { + --bulma-color-l: var(--bulma-light-00-invert-l); +} + +.is-background-light-00-invert, +.has-background-light-00-invert { + --bulma-background-l: var(--bulma-light-00-invert-l); +} + +.is-color-light-05, +.has-text-light-05 { + --bulma-color-l: var(--bulma-light-05-l); +} + +.is-background-light-05, +.has-background-light-05 { + --bulma-background-l: var(--bulma-light-05-l); +} + +.is-color-light-05-invert, +.has-text-light-05-invert { + --bulma-color-l: var(--bulma-light-05-invert-l); +} + +.is-background-light-05-invert, +.has-background-light-05-invert { + --bulma-background-l: var(--bulma-light-05-invert-l); +} + +.is-color-light-10, +.has-text-light-10 { + --bulma-color-l: var(--bulma-light-10-l); +} + +.is-background-light-10, +.has-background-light-10 { + --bulma-background-l: var(--bulma-light-10-l); +} + +.is-color-light-10-invert, +.has-text-light-10-invert { + --bulma-color-l: var(--bulma-light-10-invert-l); +} + +.is-background-light-10-invert, +.has-background-light-10-invert { + --bulma-background-l: var(--bulma-light-10-invert-l); +} + +.is-color-light-15, +.has-text-light-15 { + --bulma-color-l: var(--bulma-light-15-l); +} + +.is-background-light-15, +.has-background-light-15 { + --bulma-background-l: var(--bulma-light-15-l); +} + +.is-color-light-15-invert, +.has-text-light-15-invert { + --bulma-color-l: var(--bulma-light-15-invert-l); +} + +.is-background-light-15-invert, +.has-background-light-15-invert { + --bulma-background-l: var(--bulma-light-15-invert-l); +} + +.is-color-light-20, +.has-text-light-20 { + --bulma-color-l: var(--bulma-light-20-l); +} + +.is-background-light-20, +.has-background-light-20 { + --bulma-background-l: var(--bulma-light-20-l); +} + +.is-color-light-20-invert, +.has-text-light-20-invert { + --bulma-color-l: var(--bulma-light-20-invert-l); +} + +.is-background-light-20-invert, +.has-background-light-20-invert { + --bulma-background-l: var(--bulma-light-20-invert-l); +} + +.is-color-light-25, +.has-text-light-25 { + --bulma-color-l: var(--bulma-light-25-l); +} + +.is-background-light-25, +.has-background-light-25 { + --bulma-background-l: var(--bulma-light-25-l); +} + +.is-color-light-25-invert, +.has-text-light-25-invert { + --bulma-color-l: var(--bulma-light-25-invert-l); +} + +.is-background-light-25-invert, +.has-background-light-25-invert { + --bulma-background-l: var(--bulma-light-25-invert-l); +} + +.is-color-light-30, +.has-text-light-30 { + --bulma-color-l: var(--bulma-light-30-l); +} + +.is-background-light-30, +.has-background-light-30 { + --bulma-background-l: var(--bulma-light-30-l); +} + +.is-color-light-30-invert, +.has-text-light-30-invert { + --bulma-color-l: var(--bulma-light-30-invert-l); +} + +.is-background-light-30-invert, +.has-background-light-30-invert { + --bulma-background-l: var(--bulma-light-30-invert-l); +} + +.is-color-light-35, +.has-text-light-35 { + --bulma-color-l: var(--bulma-light-35-l); +} + +.is-background-light-35, +.has-background-light-35 { + --bulma-background-l: var(--bulma-light-35-l); +} + +.is-color-light-35-invert, +.has-text-light-35-invert { + --bulma-color-l: var(--bulma-light-35-invert-l); +} + +.is-background-light-35-invert, +.has-background-light-35-invert { + --bulma-background-l: var(--bulma-light-35-invert-l); +} + +.is-color-light-40, +.has-text-light-40 { + --bulma-color-l: var(--bulma-light-40-l); +} + +.is-background-light-40, +.has-background-light-40 { + --bulma-background-l: var(--bulma-light-40-l); +} + +.is-color-light-40-invert, +.has-text-light-40-invert { + --bulma-color-l: var(--bulma-light-40-invert-l); +} + +.is-background-light-40-invert, +.has-background-light-40-invert { + --bulma-background-l: var(--bulma-light-40-invert-l); +} + +.is-color-light-45, +.has-text-light-45 { + --bulma-color-l: var(--bulma-light-45-l); +} + +.is-background-light-45, +.has-background-light-45 { + --bulma-background-l: var(--bulma-light-45-l); +} + +.is-color-light-45-invert, +.has-text-light-45-invert { + --bulma-color-l: var(--bulma-light-45-invert-l); +} + +.is-background-light-45-invert, +.has-background-light-45-invert { + --bulma-background-l: var(--bulma-light-45-invert-l); +} + +.is-color-light-50, +.has-text-light-50 { + --bulma-color-l: var(--bulma-light-50-l); +} + +.is-background-light-50, +.has-background-light-50 { + --bulma-background-l: var(--bulma-light-50-l); +} + +.is-color-light-50-invert, +.has-text-light-50-invert { + --bulma-color-l: var(--bulma-light-50-invert-l); +} + +.is-background-light-50-invert, +.has-background-light-50-invert { + --bulma-background-l: var(--bulma-light-50-invert-l); +} + +.is-color-light-55, +.has-text-light-55 { + --bulma-color-l: var(--bulma-light-55-l); +} + +.is-background-light-55, +.has-background-light-55 { + --bulma-background-l: var(--bulma-light-55-l); +} + +.is-color-light-55-invert, +.has-text-light-55-invert { + --bulma-color-l: var(--bulma-light-55-invert-l); +} + +.is-background-light-55-invert, +.has-background-light-55-invert { + --bulma-background-l: var(--bulma-light-55-invert-l); +} + +.is-color-light-60, +.has-text-light-60 { + --bulma-color-l: var(--bulma-light-60-l); +} + +.is-background-light-60, +.has-background-light-60 { + --bulma-background-l: var(--bulma-light-60-l); +} + +.is-color-light-60-invert, +.has-text-light-60-invert { + --bulma-color-l: var(--bulma-light-60-invert-l); +} + +.is-background-light-60-invert, +.has-background-light-60-invert { + --bulma-background-l: var(--bulma-light-60-invert-l); +} + +.is-color-light-65, +.has-text-light-65 { + --bulma-color-l: var(--bulma-light-65-l); +} + +.is-background-light-65, +.has-background-light-65 { + --bulma-background-l: var(--bulma-light-65-l); +} + +.is-color-light-65-invert, +.has-text-light-65-invert { + --bulma-color-l: var(--bulma-light-65-invert-l); +} + +.is-background-light-65-invert, +.has-background-light-65-invert { + --bulma-background-l: var(--bulma-light-65-invert-l); +} + +.is-color-light-70, +.has-text-light-70 { + --bulma-color-l: var(--bulma-light-70-l); +} + +.is-background-light-70, +.has-background-light-70 { + --bulma-background-l: var(--bulma-light-70-l); +} + +.is-color-light-70-invert, +.has-text-light-70-invert { + --bulma-color-l: var(--bulma-light-70-invert-l); +} + +.is-background-light-70-invert, +.has-background-light-70-invert { + --bulma-background-l: var(--bulma-light-70-invert-l); +} + +.is-color-light-75, +.has-text-light-75 { + --bulma-color-l: var(--bulma-light-75-l); +} + +.is-background-light-75, +.has-background-light-75 { + --bulma-background-l: var(--bulma-light-75-l); +} + +.is-color-light-75-invert, +.has-text-light-75-invert { + --bulma-color-l: var(--bulma-light-75-invert-l); +} + +.is-background-light-75-invert, +.has-background-light-75-invert { + --bulma-background-l: var(--bulma-light-75-invert-l); +} + +.is-color-light-80, +.has-text-light-80 { + --bulma-color-l: var(--bulma-light-80-l); +} + +.is-background-light-80, +.has-background-light-80 { + --bulma-background-l: var(--bulma-light-80-l); +} + +.is-color-light-80-invert, +.has-text-light-80-invert { + --bulma-color-l: var(--bulma-light-80-invert-l); +} + +.is-background-light-80-invert, +.has-background-light-80-invert { + --bulma-background-l: var(--bulma-light-80-invert-l); +} + +.is-color-light-85, +.has-text-light-85 { + --bulma-color-l: var(--bulma-light-85-l); +} + +.is-background-light-85, +.has-background-light-85 { + --bulma-background-l: var(--bulma-light-85-l); +} + +.is-color-light-85-invert, +.has-text-light-85-invert { + --bulma-color-l: var(--bulma-light-85-invert-l); +} + +.is-background-light-85-invert, +.has-background-light-85-invert { + --bulma-background-l: var(--bulma-light-85-invert-l); +} + +.is-color-light-90, +.has-text-light-90 { + --bulma-color-l: var(--bulma-light-90-l); +} + +.is-background-light-90, +.has-background-light-90 { + --bulma-background-l: var(--bulma-light-90-l); +} + +.is-color-light-90-invert, +.has-text-light-90-invert { + --bulma-color-l: var(--bulma-light-90-invert-l); +} + +.is-background-light-90-invert, +.has-background-light-90-invert { + --bulma-background-l: var(--bulma-light-90-invert-l); +} + +.is-color-light-95, +.has-text-light-95 { + --bulma-color-l: var(--bulma-light-95-l); +} + +.is-background-light-95, +.has-background-light-95 { + --bulma-background-l: var(--bulma-light-95-l); +} + +.is-color-light-95-invert, +.has-text-light-95-invert { + --bulma-color-l: var(--bulma-light-95-invert-l); +} + +.is-background-light-95-invert, +.has-background-light-95-invert { + --bulma-background-l: var(--bulma-light-95-invert-l); +} + +.is-color-light-100, +.has-text-light-100 { + --bulma-color-l: var(--bulma-light-100-l); +} + +.is-background-light-100, +.has-background-light-100 { + --bulma-background-l: var(--bulma-light-100-l); +} + +.is-color-light-100-invert, +.has-text-light-100-invert { + --bulma-color-l: var(--bulma-light-100-invert-l); +} + +.is-background-light-100-invert, +.has-background-light-100-invert { + --bulma-background-l: var(--bulma-light-100-invert-l); +} + +a.is-color-light:hover, a.is-color-light:focus-visible, +button.is-color-light:hover, +button.is-color-light:focus-visible, +is-color-light.is-hoverable:hover, +is-color-light.is-hoverable:focus-visible, +a.has-text-light:hover, +a.has-text-light:focus-visible, +button.has-text-light:hover, +button.has-text-light:focus-visible, +has-text-light.is-hoverable:hover, +has-text-light.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-light:active, +button.is-color-light:active, +is-color-light.is-hoverable:active, +a.has-text-light:active, +button.has-text-light:active, +has-text-light.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-light:hover, a.is-background-light:focus-visible, +button.is-background-light:hover, +button.is-background-light:focus-visible, +is-background-light.is-hoverable:hover, +is-background-light.is-hoverable:focus-visible, +a.has-background-light:hover, +a.has-background-light:focus-visible, +button.has-background-light:hover, +button.has-background-light:focus-visible, +has-background-light.is-hoverable:hover, +has-background-light.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-light:active, +button.is-background-light:active, +is-background-light.is-hoverable:active, +a.has-background-light:active, +button.has-background-light:active, +has-background-light.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-light { + --h: var(--bulma-light-h); + --s: var(--bulma-light-s); + --l: var(--bulma-light-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-light-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-light-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-light-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-light-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-light-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-light-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-light-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-light-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-light-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-light-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-light-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-light-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-light-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-light-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-light-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-light-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-light-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-light-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-light-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-light-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-light-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-dark], +[class*=has-text-dark] { + --bulma-color-l: var(--bulma-dark-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-dark], +[class*=has-background-dark] { + --bulma-background-l: var(--bulma-dark-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-dark-invert, +.has-text-dark-invert { + --bulma-color-l: var(--bulma-dark-invert-l); +} + +.is-background-dark-invert, +.has-background-dark-invert { + --bulma-background-l: var(--bulma-dark-invert-l); +} + +.is-color-dark-on-scheme, +.has-text-dark-on-scheme { + --bulma-color-l: var(--bulma-dark-on-scheme-l); +} + +.is-background-dark-on-scheme, +.has-background-dark-on-scheme { + --bulma-background-l: var(--bulma-dark-on-scheme-l); +} + +.is-color-dark-light, +.has-text-dark-light { + --bulma-color-l: var(--bulma-dark-light-l); +} + +.is-background-dark-light, +.has-background-dark-light { + --bulma-background-l: var(--bulma-dark-light-l); +} + +.is-color-dark-light-invert, +.has-text-dark-light-invert { + --bulma-color-l: var(--bulma-dark-light-invert-l); +} + +.is-background-dark-light-invert, +.has-background-dark-light-invert { + --bulma-background-l: var(--bulma-dark-light-invert-l); +} + +.is-color-dark-dark, +.has-text-dark-dark { + --bulma-color-l: var(--bulma-dark-dark-l); +} + +.is-background-dark-dark, +.has-background-dark-dark { + --bulma-background-l: var(--bulma-dark-dark-l); +} + +.is-color-dark-dark-invert, +.has-text-dark-dark-invert { + --bulma-color-l: var(--bulma-dark-dark-invert-l); +} + +.is-background-dark-dark-invert, +.has-background-dark-dark-invert { + --bulma-background-l: var(--bulma-dark-dark-invert-l); +} + +.is-color-dark-soft, +.has-text-dark-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-dark-soft, +.has-background-dark-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-dark-bold, +.has-text-dark-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-dark-bold, +.has-background-dark-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-dark-soft-invert, +.has-text-dark-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-dark-soft-invert, +.has-background-dark-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-dark-bold-invert, +.has-text-dark-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-dark-bold-invert, +.has-background-dark-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-dark-00, +.has-text-dark-00 { + --bulma-color-l: var(--bulma-dark-00-l); +} + +.is-background-dark-00, +.has-background-dark-00 { + --bulma-background-l: var(--bulma-dark-00-l); +} + +.is-color-dark-00-invert, +.has-text-dark-00-invert { + --bulma-color-l: var(--bulma-dark-00-invert-l); +} + +.is-background-dark-00-invert, +.has-background-dark-00-invert { + --bulma-background-l: var(--bulma-dark-00-invert-l); +} + +.is-color-dark-05, +.has-text-dark-05 { + --bulma-color-l: var(--bulma-dark-05-l); +} + +.is-background-dark-05, +.has-background-dark-05 { + --bulma-background-l: var(--bulma-dark-05-l); +} + +.is-color-dark-05-invert, +.has-text-dark-05-invert { + --bulma-color-l: var(--bulma-dark-05-invert-l); +} + +.is-background-dark-05-invert, +.has-background-dark-05-invert { + --bulma-background-l: var(--bulma-dark-05-invert-l); +} + +.is-color-dark-10, +.has-text-dark-10 { + --bulma-color-l: var(--bulma-dark-10-l); +} + +.is-background-dark-10, +.has-background-dark-10 { + --bulma-background-l: var(--bulma-dark-10-l); +} + +.is-color-dark-10-invert, +.has-text-dark-10-invert { + --bulma-color-l: var(--bulma-dark-10-invert-l); +} + +.is-background-dark-10-invert, +.has-background-dark-10-invert { + --bulma-background-l: var(--bulma-dark-10-invert-l); +} + +.is-color-dark-15, +.has-text-dark-15 { + --bulma-color-l: var(--bulma-dark-15-l); +} + +.is-background-dark-15, +.has-background-dark-15 { + --bulma-background-l: var(--bulma-dark-15-l); +} + +.is-color-dark-15-invert, +.has-text-dark-15-invert { + --bulma-color-l: var(--bulma-dark-15-invert-l); +} + +.is-background-dark-15-invert, +.has-background-dark-15-invert { + --bulma-background-l: var(--bulma-dark-15-invert-l); +} + +.is-color-dark-20, +.has-text-dark-20 { + --bulma-color-l: var(--bulma-dark-20-l); +} + +.is-background-dark-20, +.has-background-dark-20 { + --bulma-background-l: var(--bulma-dark-20-l); +} + +.is-color-dark-20-invert, +.has-text-dark-20-invert { + --bulma-color-l: var(--bulma-dark-20-invert-l); +} + +.is-background-dark-20-invert, +.has-background-dark-20-invert { + --bulma-background-l: var(--bulma-dark-20-invert-l); +} + +.is-color-dark-25, +.has-text-dark-25 { + --bulma-color-l: var(--bulma-dark-25-l); +} + +.is-background-dark-25, +.has-background-dark-25 { + --bulma-background-l: var(--bulma-dark-25-l); +} + +.is-color-dark-25-invert, +.has-text-dark-25-invert { + --bulma-color-l: var(--bulma-dark-25-invert-l); +} + +.is-background-dark-25-invert, +.has-background-dark-25-invert { + --bulma-background-l: var(--bulma-dark-25-invert-l); +} + +.is-color-dark-30, +.has-text-dark-30 { + --bulma-color-l: var(--bulma-dark-30-l); +} + +.is-background-dark-30, +.has-background-dark-30 { + --bulma-background-l: var(--bulma-dark-30-l); +} + +.is-color-dark-30-invert, +.has-text-dark-30-invert { + --bulma-color-l: var(--bulma-dark-30-invert-l); +} + +.is-background-dark-30-invert, +.has-background-dark-30-invert { + --bulma-background-l: var(--bulma-dark-30-invert-l); +} + +.is-color-dark-35, +.has-text-dark-35 { + --bulma-color-l: var(--bulma-dark-35-l); +} + +.is-background-dark-35, +.has-background-dark-35 { + --bulma-background-l: var(--bulma-dark-35-l); +} + +.is-color-dark-35-invert, +.has-text-dark-35-invert { + --bulma-color-l: var(--bulma-dark-35-invert-l); +} + +.is-background-dark-35-invert, +.has-background-dark-35-invert { + --bulma-background-l: var(--bulma-dark-35-invert-l); +} + +.is-color-dark-40, +.has-text-dark-40 { + --bulma-color-l: var(--bulma-dark-40-l); +} + +.is-background-dark-40, +.has-background-dark-40 { + --bulma-background-l: var(--bulma-dark-40-l); +} + +.is-color-dark-40-invert, +.has-text-dark-40-invert { + --bulma-color-l: var(--bulma-dark-40-invert-l); +} + +.is-background-dark-40-invert, +.has-background-dark-40-invert { + --bulma-background-l: var(--bulma-dark-40-invert-l); +} + +.is-color-dark-45, +.has-text-dark-45 { + --bulma-color-l: var(--bulma-dark-45-l); +} + +.is-background-dark-45, +.has-background-dark-45 { + --bulma-background-l: var(--bulma-dark-45-l); +} + +.is-color-dark-45-invert, +.has-text-dark-45-invert { + --bulma-color-l: var(--bulma-dark-45-invert-l); +} + +.is-background-dark-45-invert, +.has-background-dark-45-invert { + --bulma-background-l: var(--bulma-dark-45-invert-l); +} + +.is-color-dark-50, +.has-text-dark-50 { + --bulma-color-l: var(--bulma-dark-50-l); +} + +.is-background-dark-50, +.has-background-dark-50 { + --bulma-background-l: var(--bulma-dark-50-l); +} + +.is-color-dark-50-invert, +.has-text-dark-50-invert { + --bulma-color-l: var(--bulma-dark-50-invert-l); +} + +.is-background-dark-50-invert, +.has-background-dark-50-invert { + --bulma-background-l: var(--bulma-dark-50-invert-l); +} + +.is-color-dark-55, +.has-text-dark-55 { + --bulma-color-l: var(--bulma-dark-55-l); +} + +.is-background-dark-55, +.has-background-dark-55 { + --bulma-background-l: var(--bulma-dark-55-l); +} + +.is-color-dark-55-invert, +.has-text-dark-55-invert { + --bulma-color-l: var(--bulma-dark-55-invert-l); +} + +.is-background-dark-55-invert, +.has-background-dark-55-invert { + --bulma-background-l: var(--bulma-dark-55-invert-l); +} + +.is-color-dark-60, +.has-text-dark-60 { + --bulma-color-l: var(--bulma-dark-60-l); +} + +.is-background-dark-60, +.has-background-dark-60 { + --bulma-background-l: var(--bulma-dark-60-l); +} + +.is-color-dark-60-invert, +.has-text-dark-60-invert { + --bulma-color-l: var(--bulma-dark-60-invert-l); +} + +.is-background-dark-60-invert, +.has-background-dark-60-invert { + --bulma-background-l: var(--bulma-dark-60-invert-l); +} + +.is-color-dark-65, +.has-text-dark-65 { + --bulma-color-l: var(--bulma-dark-65-l); +} + +.is-background-dark-65, +.has-background-dark-65 { + --bulma-background-l: var(--bulma-dark-65-l); +} + +.is-color-dark-65-invert, +.has-text-dark-65-invert { + --bulma-color-l: var(--bulma-dark-65-invert-l); +} + +.is-background-dark-65-invert, +.has-background-dark-65-invert { + --bulma-background-l: var(--bulma-dark-65-invert-l); +} + +.is-color-dark-70, +.has-text-dark-70 { + --bulma-color-l: var(--bulma-dark-70-l); +} + +.is-background-dark-70, +.has-background-dark-70 { + --bulma-background-l: var(--bulma-dark-70-l); +} + +.is-color-dark-70-invert, +.has-text-dark-70-invert { + --bulma-color-l: var(--bulma-dark-70-invert-l); +} + +.is-background-dark-70-invert, +.has-background-dark-70-invert { + --bulma-background-l: var(--bulma-dark-70-invert-l); +} + +.is-color-dark-75, +.has-text-dark-75 { + --bulma-color-l: var(--bulma-dark-75-l); +} + +.is-background-dark-75, +.has-background-dark-75 { + --bulma-background-l: var(--bulma-dark-75-l); +} + +.is-color-dark-75-invert, +.has-text-dark-75-invert { + --bulma-color-l: var(--bulma-dark-75-invert-l); +} + +.is-background-dark-75-invert, +.has-background-dark-75-invert { + --bulma-background-l: var(--bulma-dark-75-invert-l); +} + +.is-color-dark-80, +.has-text-dark-80 { + --bulma-color-l: var(--bulma-dark-80-l); +} + +.is-background-dark-80, +.has-background-dark-80 { + --bulma-background-l: var(--bulma-dark-80-l); +} + +.is-color-dark-80-invert, +.has-text-dark-80-invert { + --bulma-color-l: var(--bulma-dark-80-invert-l); +} + +.is-background-dark-80-invert, +.has-background-dark-80-invert { + --bulma-background-l: var(--bulma-dark-80-invert-l); +} + +.is-color-dark-85, +.has-text-dark-85 { + --bulma-color-l: var(--bulma-dark-85-l); +} + +.is-background-dark-85, +.has-background-dark-85 { + --bulma-background-l: var(--bulma-dark-85-l); +} + +.is-color-dark-85-invert, +.has-text-dark-85-invert { + --bulma-color-l: var(--bulma-dark-85-invert-l); +} + +.is-background-dark-85-invert, +.has-background-dark-85-invert { + --bulma-background-l: var(--bulma-dark-85-invert-l); +} + +.is-color-dark-90, +.has-text-dark-90 { + --bulma-color-l: var(--bulma-dark-90-l); +} + +.is-background-dark-90, +.has-background-dark-90 { + --bulma-background-l: var(--bulma-dark-90-l); +} + +.is-color-dark-90-invert, +.has-text-dark-90-invert { + --bulma-color-l: var(--bulma-dark-90-invert-l); +} + +.is-background-dark-90-invert, +.has-background-dark-90-invert { + --bulma-background-l: var(--bulma-dark-90-invert-l); +} + +.is-color-dark-95, +.has-text-dark-95 { + --bulma-color-l: var(--bulma-dark-95-l); +} + +.is-background-dark-95, +.has-background-dark-95 { + --bulma-background-l: var(--bulma-dark-95-l); +} + +.is-color-dark-95-invert, +.has-text-dark-95-invert { + --bulma-color-l: var(--bulma-dark-95-invert-l); +} + +.is-background-dark-95-invert, +.has-background-dark-95-invert { + --bulma-background-l: var(--bulma-dark-95-invert-l); +} + +.is-color-dark-100, +.has-text-dark-100 { + --bulma-color-l: var(--bulma-dark-100-l); +} + +.is-background-dark-100, +.has-background-dark-100 { + --bulma-background-l: var(--bulma-dark-100-l); +} + +.is-color-dark-100-invert, +.has-text-dark-100-invert { + --bulma-color-l: var(--bulma-dark-100-invert-l); +} + +.is-background-dark-100-invert, +.has-background-dark-100-invert { + --bulma-background-l: var(--bulma-dark-100-invert-l); +} + +a.is-color-dark:hover, a.is-color-dark:focus-visible, +button.is-color-dark:hover, +button.is-color-dark:focus-visible, +is-color-dark.is-hoverable:hover, +is-color-dark.is-hoverable:focus-visible, +a.has-text-dark:hover, +a.has-text-dark:focus-visible, +button.has-text-dark:hover, +button.has-text-dark:focus-visible, +has-text-dark.is-hoverable:hover, +has-text-dark.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-dark:active, +button.is-color-dark:active, +is-color-dark.is-hoverable:active, +a.has-text-dark:active, +button.has-text-dark:active, +has-text-dark.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-dark:hover, a.is-background-dark:focus-visible, +button.is-background-dark:hover, +button.is-background-dark:focus-visible, +is-background-dark.is-hoverable:hover, +is-background-dark.is-hoverable:focus-visible, +a.has-background-dark:hover, +a.has-background-dark:focus-visible, +button.has-background-dark:hover, +button.has-background-dark:focus-visible, +has-background-dark.is-hoverable:hover, +has-background-dark.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-dark:active, +button.is-background-dark:active, +is-background-dark.is-hoverable:active, +a.has-background-dark:active, +button.has-background-dark:active, +has-background-dark.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-dark { + --h: var(--bulma-dark-h); + --s: var(--bulma-dark-s); + --l: var(--bulma-dark-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-dark-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-dark-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-dark-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-dark-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-dark-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-dark-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-dark-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-dark-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-dark-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-dark-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-dark-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-dark-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-dark-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-dark-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-dark-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-dark-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-dark-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-dark-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-dark-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-dark-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-dark-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-text], +[class*=has-text-text] { + --bulma-color-l: var(--bulma-text-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-text-h), var(--bulma-text-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-text], +[class*=has-background-text] { + --bulma-background-l: var(--bulma-text-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-text-h), var(--bulma-text-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-text-invert, +.has-text-text-invert { + --bulma-color-l: var(--bulma-text-invert-l); +} + +.is-background-text-invert, +.has-background-text-invert { + --bulma-background-l: var(--bulma-text-invert-l); +} + +.is-color-text-on-scheme, +.has-text-text-on-scheme { + --bulma-color-l: var(--bulma-text-on-scheme-l); +} + +.is-background-text-on-scheme, +.has-background-text-on-scheme { + --bulma-background-l: var(--bulma-text-on-scheme-l); +} + +.is-color-text-light, +.has-text-text-light { + --bulma-color-l: var(--bulma-text-light-l); +} + +.is-background-text-light, +.has-background-text-light { + --bulma-background-l: var(--bulma-text-light-l); +} + +.is-color-text-light-invert, +.has-text-text-light-invert { + --bulma-color-l: var(--bulma-text-light-invert-l); +} + +.is-background-text-light-invert, +.has-background-text-light-invert { + --bulma-background-l: var(--bulma-text-light-invert-l); +} + +.is-color-text-dark, +.has-text-text-dark { + --bulma-color-l: var(--bulma-text-dark-l); +} + +.is-background-text-dark, +.has-background-text-dark { + --bulma-background-l: var(--bulma-text-dark-l); +} + +.is-color-text-dark-invert, +.has-text-text-dark-invert { + --bulma-color-l: var(--bulma-text-dark-invert-l); +} + +.is-background-text-dark-invert, +.has-background-text-dark-invert { + --bulma-background-l: var(--bulma-text-dark-invert-l); +} + +.is-color-text-soft, +.has-text-text-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-text-soft, +.has-background-text-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-text-bold, +.has-text-text-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-text-bold, +.has-background-text-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-text-soft-invert, +.has-text-text-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-text-soft-invert, +.has-background-text-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-text-bold-invert, +.has-text-text-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-text-bold-invert, +.has-background-text-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-text-00, +.has-text-text-00 { + --bulma-color-l: var(--bulma-text-00-l); +} + +.is-background-text-00, +.has-background-text-00 { + --bulma-background-l: var(--bulma-text-00-l); +} + +.is-color-text-00-invert, +.has-text-text-00-invert { + --bulma-color-l: var(--bulma-text-00-invert-l); +} + +.is-background-text-00-invert, +.has-background-text-00-invert { + --bulma-background-l: var(--bulma-text-00-invert-l); +} + +.is-color-text-05, +.has-text-text-05 { + --bulma-color-l: var(--bulma-text-05-l); +} + +.is-background-text-05, +.has-background-text-05 { + --bulma-background-l: var(--bulma-text-05-l); +} + +.is-color-text-05-invert, +.has-text-text-05-invert { + --bulma-color-l: var(--bulma-text-05-invert-l); +} + +.is-background-text-05-invert, +.has-background-text-05-invert { + --bulma-background-l: var(--bulma-text-05-invert-l); +} + +.is-color-text-10, +.has-text-text-10 { + --bulma-color-l: var(--bulma-text-10-l); +} + +.is-background-text-10, +.has-background-text-10 { + --bulma-background-l: var(--bulma-text-10-l); +} + +.is-color-text-10-invert, +.has-text-text-10-invert { + --bulma-color-l: var(--bulma-text-10-invert-l); +} + +.is-background-text-10-invert, +.has-background-text-10-invert { + --bulma-background-l: var(--bulma-text-10-invert-l); +} + +.is-color-text-15, +.has-text-text-15 { + --bulma-color-l: var(--bulma-text-15-l); +} + +.is-background-text-15, +.has-background-text-15 { + --bulma-background-l: var(--bulma-text-15-l); +} + +.is-color-text-15-invert, +.has-text-text-15-invert { + --bulma-color-l: var(--bulma-text-15-invert-l); +} + +.is-background-text-15-invert, +.has-background-text-15-invert { + --bulma-background-l: var(--bulma-text-15-invert-l); +} + +.is-color-text-20, +.has-text-text-20 { + --bulma-color-l: var(--bulma-text-20-l); +} + +.is-background-text-20, +.has-background-text-20 { + --bulma-background-l: var(--bulma-text-20-l); +} + +.is-color-text-20-invert, +.has-text-text-20-invert { + --bulma-color-l: var(--bulma-text-20-invert-l); +} + +.is-background-text-20-invert, +.has-background-text-20-invert { + --bulma-background-l: var(--bulma-text-20-invert-l); +} + +.is-color-text-25, +.has-text-text-25 { + --bulma-color-l: var(--bulma-text-25-l); +} + +.is-background-text-25, +.has-background-text-25 { + --bulma-background-l: var(--bulma-text-25-l); +} + +.is-color-text-25-invert, +.has-text-text-25-invert { + --bulma-color-l: var(--bulma-text-25-invert-l); +} + +.is-background-text-25-invert, +.has-background-text-25-invert { + --bulma-background-l: var(--bulma-text-25-invert-l); +} + +.is-color-text-30, +.has-text-text-30 { + --bulma-color-l: var(--bulma-text-30-l); +} + +.is-background-text-30, +.has-background-text-30 { + --bulma-background-l: var(--bulma-text-30-l); +} + +.is-color-text-30-invert, +.has-text-text-30-invert { + --bulma-color-l: var(--bulma-text-30-invert-l); +} + +.is-background-text-30-invert, +.has-background-text-30-invert { + --bulma-background-l: var(--bulma-text-30-invert-l); +} + +.is-color-text-35, +.has-text-text-35 { + --bulma-color-l: var(--bulma-text-35-l); +} + +.is-background-text-35, +.has-background-text-35 { + --bulma-background-l: var(--bulma-text-35-l); +} + +.is-color-text-35-invert, +.has-text-text-35-invert { + --bulma-color-l: var(--bulma-text-35-invert-l); +} + +.is-background-text-35-invert, +.has-background-text-35-invert { + --bulma-background-l: var(--bulma-text-35-invert-l); +} + +.is-color-text-40, +.has-text-text-40 { + --bulma-color-l: var(--bulma-text-40-l); +} + +.is-background-text-40, +.has-background-text-40 { + --bulma-background-l: var(--bulma-text-40-l); +} + +.is-color-text-40-invert, +.has-text-text-40-invert { + --bulma-color-l: var(--bulma-text-40-invert-l); +} + +.is-background-text-40-invert, +.has-background-text-40-invert { + --bulma-background-l: var(--bulma-text-40-invert-l); +} + +.is-color-text-45, +.has-text-text-45 { + --bulma-color-l: var(--bulma-text-45-l); +} + +.is-background-text-45, +.has-background-text-45 { + --bulma-background-l: var(--bulma-text-45-l); +} + +.is-color-text-45-invert, +.has-text-text-45-invert { + --bulma-color-l: var(--bulma-text-45-invert-l); +} + +.is-background-text-45-invert, +.has-background-text-45-invert { + --bulma-background-l: var(--bulma-text-45-invert-l); +} + +.is-color-text-50, +.has-text-text-50 { + --bulma-color-l: var(--bulma-text-50-l); +} + +.is-background-text-50, +.has-background-text-50 { + --bulma-background-l: var(--bulma-text-50-l); +} + +.is-color-text-50-invert, +.has-text-text-50-invert { + --bulma-color-l: var(--bulma-text-50-invert-l); +} + +.is-background-text-50-invert, +.has-background-text-50-invert { + --bulma-background-l: var(--bulma-text-50-invert-l); +} + +.is-color-text-55, +.has-text-text-55 { + --bulma-color-l: var(--bulma-text-55-l); +} + +.is-background-text-55, +.has-background-text-55 { + --bulma-background-l: var(--bulma-text-55-l); +} + +.is-color-text-55-invert, +.has-text-text-55-invert { + --bulma-color-l: var(--bulma-text-55-invert-l); +} + +.is-background-text-55-invert, +.has-background-text-55-invert { + --bulma-background-l: var(--bulma-text-55-invert-l); +} + +.is-color-text-60, +.has-text-text-60 { + --bulma-color-l: var(--bulma-text-60-l); +} + +.is-background-text-60, +.has-background-text-60 { + --bulma-background-l: var(--bulma-text-60-l); +} + +.is-color-text-60-invert, +.has-text-text-60-invert { + --bulma-color-l: var(--bulma-text-60-invert-l); +} + +.is-background-text-60-invert, +.has-background-text-60-invert { + --bulma-background-l: var(--bulma-text-60-invert-l); +} + +.is-color-text-65, +.has-text-text-65 { + --bulma-color-l: var(--bulma-text-65-l); +} + +.is-background-text-65, +.has-background-text-65 { + --bulma-background-l: var(--bulma-text-65-l); +} + +.is-color-text-65-invert, +.has-text-text-65-invert { + --bulma-color-l: var(--bulma-text-65-invert-l); +} + +.is-background-text-65-invert, +.has-background-text-65-invert { + --bulma-background-l: var(--bulma-text-65-invert-l); +} + +.is-color-text-70, +.has-text-text-70 { + --bulma-color-l: var(--bulma-text-70-l); +} + +.is-background-text-70, +.has-background-text-70 { + --bulma-background-l: var(--bulma-text-70-l); +} + +.is-color-text-70-invert, +.has-text-text-70-invert { + --bulma-color-l: var(--bulma-text-70-invert-l); +} + +.is-background-text-70-invert, +.has-background-text-70-invert { + --bulma-background-l: var(--bulma-text-70-invert-l); +} + +.is-color-text-75, +.has-text-text-75 { + --bulma-color-l: var(--bulma-text-75-l); +} + +.is-background-text-75, +.has-background-text-75 { + --bulma-background-l: var(--bulma-text-75-l); +} + +.is-color-text-75-invert, +.has-text-text-75-invert { + --bulma-color-l: var(--bulma-text-75-invert-l); +} + +.is-background-text-75-invert, +.has-background-text-75-invert { + --bulma-background-l: var(--bulma-text-75-invert-l); +} + +.is-color-text-80, +.has-text-text-80 { + --bulma-color-l: var(--bulma-text-80-l); +} + +.is-background-text-80, +.has-background-text-80 { + --bulma-background-l: var(--bulma-text-80-l); +} + +.is-color-text-80-invert, +.has-text-text-80-invert { + --bulma-color-l: var(--bulma-text-80-invert-l); +} + +.is-background-text-80-invert, +.has-background-text-80-invert { + --bulma-background-l: var(--bulma-text-80-invert-l); +} + +.is-color-text-85, +.has-text-text-85 { + --bulma-color-l: var(--bulma-text-85-l); +} + +.is-background-text-85, +.has-background-text-85 { + --bulma-background-l: var(--bulma-text-85-l); +} + +.is-color-text-85-invert, +.has-text-text-85-invert { + --bulma-color-l: var(--bulma-text-85-invert-l); +} + +.is-background-text-85-invert, +.has-background-text-85-invert { + --bulma-background-l: var(--bulma-text-85-invert-l); +} + +.is-color-text-90, +.has-text-text-90 { + --bulma-color-l: var(--bulma-text-90-l); +} + +.is-background-text-90, +.has-background-text-90 { + --bulma-background-l: var(--bulma-text-90-l); +} + +.is-color-text-90-invert, +.has-text-text-90-invert { + --bulma-color-l: var(--bulma-text-90-invert-l); +} + +.is-background-text-90-invert, +.has-background-text-90-invert { + --bulma-background-l: var(--bulma-text-90-invert-l); +} + +.is-color-text-95, +.has-text-text-95 { + --bulma-color-l: var(--bulma-text-95-l); +} + +.is-background-text-95, +.has-background-text-95 { + --bulma-background-l: var(--bulma-text-95-l); +} + +.is-color-text-95-invert, +.has-text-text-95-invert { + --bulma-color-l: var(--bulma-text-95-invert-l); +} + +.is-background-text-95-invert, +.has-background-text-95-invert { + --bulma-background-l: var(--bulma-text-95-invert-l); +} + +.is-color-text-100, +.has-text-text-100 { + --bulma-color-l: var(--bulma-text-100-l); +} + +.is-background-text-100, +.has-background-text-100 { + --bulma-background-l: var(--bulma-text-100-l); +} + +.is-color-text-100-invert, +.has-text-text-100-invert { + --bulma-color-l: var(--bulma-text-100-invert-l); +} + +.is-background-text-100-invert, +.has-background-text-100-invert { + --bulma-background-l: var(--bulma-text-100-invert-l); +} + +a.is-color-text:hover, a.is-color-text:focus-visible, +button.is-color-text:hover, +button.is-color-text:focus-visible, +is-color-text.is-hoverable:hover, +is-color-text.is-hoverable:focus-visible, +a.has-text-text:hover, +a.has-text-text:focus-visible, +button.has-text-text:hover, +button.has-text-text:focus-visible, +has-text-text.is-hoverable:hover, +has-text-text.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-text:active, +button.is-color-text:active, +is-color-text.is-hoverable:active, +a.has-text-text:active, +button.has-text-text:active, +has-text-text.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-text:hover, a.is-background-text:focus-visible, +button.is-background-text:hover, +button.is-background-text:focus-visible, +is-background-text.is-hoverable:hover, +is-background-text.is-hoverable:focus-visible, +a.has-background-text:hover, +a.has-background-text:focus-visible, +button.has-background-text:hover, +button.has-background-text:focus-visible, +has-background-text.is-hoverable:hover, +has-background-text.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-text:active, +button.is-background-text:active, +is-background-text.is-hoverable:active, +a.has-background-text:active, +button.has-background-text:active, +has-background-text.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-text { + --h: var(--bulma-text-h); + --s: var(--bulma-text-s); + --l: var(--bulma-text-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-text-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-text-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-text-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-text-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-text-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-text-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-text-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-text-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-text-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-text-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-text-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-text-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-text-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-text-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-text-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-text-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-text-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-text-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-text-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-text-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-text-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-primary], +[class*=has-text-primary] { + --bulma-color-l: var(--bulma-primary-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-primary], +[class*=has-background-primary] { + --bulma-background-l: var(--bulma-primary-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-primary-invert, +.has-text-primary-invert { + --bulma-color-l: var(--bulma-primary-invert-l); +} + +.is-background-primary-invert, +.has-background-primary-invert { + --bulma-background-l: var(--bulma-primary-invert-l); +} + +.is-color-primary-on-scheme, +.has-text-primary-on-scheme { + --bulma-color-l: var(--bulma-primary-on-scheme-l); +} + +.is-background-primary-on-scheme, +.has-background-primary-on-scheme { + --bulma-background-l: var(--bulma-primary-on-scheme-l); +} + +.is-color-primary-light, +.has-text-primary-light { + --bulma-color-l: var(--bulma-primary-light-l); +} + +.is-background-primary-light, +.has-background-primary-light { + --bulma-background-l: var(--bulma-primary-light-l); +} + +.is-color-primary-light-invert, +.has-text-primary-light-invert { + --bulma-color-l: var(--bulma-primary-light-invert-l); +} + +.is-background-primary-light-invert, +.has-background-primary-light-invert { + --bulma-background-l: var(--bulma-primary-light-invert-l); +} + +.is-color-primary-dark, +.has-text-primary-dark { + --bulma-color-l: var(--bulma-primary-dark-l); +} + +.is-background-primary-dark, +.has-background-primary-dark { + --bulma-background-l: var(--bulma-primary-dark-l); +} + +.is-color-primary-dark-invert, +.has-text-primary-dark-invert { + --bulma-color-l: var(--bulma-primary-dark-invert-l); +} + +.is-background-primary-dark-invert, +.has-background-primary-dark-invert { + --bulma-background-l: var(--bulma-primary-dark-invert-l); +} + +.is-color-primary-soft, +.has-text-primary-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-primary-soft, +.has-background-primary-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-primary-bold, +.has-text-primary-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-primary-bold, +.has-background-primary-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-primary-soft-invert, +.has-text-primary-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-primary-soft-invert, +.has-background-primary-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-primary-bold-invert, +.has-text-primary-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-primary-bold-invert, +.has-background-primary-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-primary-00, +.has-text-primary-00 { + --bulma-color-l: var(--bulma-primary-00-l); +} + +.is-background-primary-00, +.has-background-primary-00 { + --bulma-background-l: var(--bulma-primary-00-l); +} + +.is-color-primary-00-invert, +.has-text-primary-00-invert { + --bulma-color-l: var(--bulma-primary-00-invert-l); +} + +.is-background-primary-00-invert, +.has-background-primary-00-invert { + --bulma-background-l: var(--bulma-primary-00-invert-l); +} + +.is-color-primary-05, +.has-text-primary-05 { + --bulma-color-l: var(--bulma-primary-05-l); +} + +.is-background-primary-05, +.has-background-primary-05 { + --bulma-background-l: var(--bulma-primary-05-l); +} + +.is-color-primary-05-invert, +.has-text-primary-05-invert { + --bulma-color-l: var(--bulma-primary-05-invert-l); +} + +.is-background-primary-05-invert, +.has-background-primary-05-invert { + --bulma-background-l: var(--bulma-primary-05-invert-l); +} + +.is-color-primary-10, +.has-text-primary-10 { + --bulma-color-l: var(--bulma-primary-10-l); +} + +.is-background-primary-10, +.has-background-primary-10 { + --bulma-background-l: var(--bulma-primary-10-l); +} + +.is-color-primary-10-invert, +.has-text-primary-10-invert { + --bulma-color-l: var(--bulma-primary-10-invert-l); +} + +.is-background-primary-10-invert, +.has-background-primary-10-invert { + --bulma-background-l: var(--bulma-primary-10-invert-l); +} + +.is-color-primary-15, +.has-text-primary-15 { + --bulma-color-l: var(--bulma-primary-15-l); +} + +.is-background-primary-15, +.has-background-primary-15 { + --bulma-background-l: var(--bulma-primary-15-l); +} + +.is-color-primary-15-invert, +.has-text-primary-15-invert { + --bulma-color-l: var(--bulma-primary-15-invert-l); +} + +.is-background-primary-15-invert, +.has-background-primary-15-invert { + --bulma-background-l: var(--bulma-primary-15-invert-l); +} + +.is-color-primary-20, +.has-text-primary-20 { + --bulma-color-l: var(--bulma-primary-20-l); +} + +.is-background-primary-20, +.has-background-primary-20 { + --bulma-background-l: var(--bulma-primary-20-l); +} + +.is-color-primary-20-invert, +.has-text-primary-20-invert { + --bulma-color-l: var(--bulma-primary-20-invert-l); +} + +.is-background-primary-20-invert, +.has-background-primary-20-invert { + --bulma-background-l: var(--bulma-primary-20-invert-l); +} + +.is-color-primary-25, +.has-text-primary-25 { + --bulma-color-l: var(--bulma-primary-25-l); +} + +.is-background-primary-25, +.has-background-primary-25 { + --bulma-background-l: var(--bulma-primary-25-l); +} + +.is-color-primary-25-invert, +.has-text-primary-25-invert { + --bulma-color-l: var(--bulma-primary-25-invert-l); +} + +.is-background-primary-25-invert, +.has-background-primary-25-invert { + --bulma-background-l: var(--bulma-primary-25-invert-l); +} + +.is-color-primary-30, +.has-text-primary-30 { + --bulma-color-l: var(--bulma-primary-30-l); +} + +.is-background-primary-30, +.has-background-primary-30 { + --bulma-background-l: var(--bulma-primary-30-l); +} + +.is-color-primary-30-invert, +.has-text-primary-30-invert { + --bulma-color-l: var(--bulma-primary-30-invert-l); +} + +.is-background-primary-30-invert, +.has-background-primary-30-invert { + --bulma-background-l: var(--bulma-primary-30-invert-l); +} + +.is-color-primary-35, +.has-text-primary-35 { + --bulma-color-l: var(--bulma-primary-35-l); +} + +.is-background-primary-35, +.has-background-primary-35 { + --bulma-background-l: var(--bulma-primary-35-l); +} + +.is-color-primary-35-invert, +.has-text-primary-35-invert { + --bulma-color-l: var(--bulma-primary-35-invert-l); +} + +.is-background-primary-35-invert, +.has-background-primary-35-invert { + --bulma-background-l: var(--bulma-primary-35-invert-l); +} + +.is-color-primary-40, +.has-text-primary-40 { + --bulma-color-l: var(--bulma-primary-40-l); +} + +.is-background-primary-40, +.has-background-primary-40 { + --bulma-background-l: var(--bulma-primary-40-l); +} + +.is-color-primary-40-invert, +.has-text-primary-40-invert { + --bulma-color-l: var(--bulma-primary-40-invert-l); +} + +.is-background-primary-40-invert, +.has-background-primary-40-invert { + --bulma-background-l: var(--bulma-primary-40-invert-l); +} + +.is-color-primary-45, +.has-text-primary-45 { + --bulma-color-l: var(--bulma-primary-45-l); +} + +.is-background-primary-45, +.has-background-primary-45 { + --bulma-background-l: var(--bulma-primary-45-l); +} + +.is-color-primary-45-invert, +.has-text-primary-45-invert { + --bulma-color-l: var(--bulma-primary-45-invert-l); +} + +.is-background-primary-45-invert, +.has-background-primary-45-invert { + --bulma-background-l: var(--bulma-primary-45-invert-l); +} + +.is-color-primary-50, +.has-text-primary-50 { + --bulma-color-l: var(--bulma-primary-50-l); +} + +.is-background-primary-50, +.has-background-primary-50 { + --bulma-background-l: var(--bulma-primary-50-l); +} + +.is-color-primary-50-invert, +.has-text-primary-50-invert { + --bulma-color-l: var(--bulma-primary-50-invert-l); +} + +.is-background-primary-50-invert, +.has-background-primary-50-invert { + --bulma-background-l: var(--bulma-primary-50-invert-l); +} + +.is-color-primary-55, +.has-text-primary-55 { + --bulma-color-l: var(--bulma-primary-55-l); +} + +.is-background-primary-55, +.has-background-primary-55 { + --bulma-background-l: var(--bulma-primary-55-l); +} + +.is-color-primary-55-invert, +.has-text-primary-55-invert { + --bulma-color-l: var(--bulma-primary-55-invert-l); +} + +.is-background-primary-55-invert, +.has-background-primary-55-invert { + --bulma-background-l: var(--bulma-primary-55-invert-l); +} + +.is-color-primary-60, +.has-text-primary-60 { + --bulma-color-l: var(--bulma-primary-60-l); +} + +.is-background-primary-60, +.has-background-primary-60 { + --bulma-background-l: var(--bulma-primary-60-l); +} + +.is-color-primary-60-invert, +.has-text-primary-60-invert { + --bulma-color-l: var(--bulma-primary-60-invert-l); +} + +.is-background-primary-60-invert, +.has-background-primary-60-invert { + --bulma-background-l: var(--bulma-primary-60-invert-l); +} + +.is-color-primary-65, +.has-text-primary-65 { + --bulma-color-l: var(--bulma-primary-65-l); +} + +.is-background-primary-65, +.has-background-primary-65 { + --bulma-background-l: var(--bulma-primary-65-l); +} + +.is-color-primary-65-invert, +.has-text-primary-65-invert { + --bulma-color-l: var(--bulma-primary-65-invert-l); +} + +.is-background-primary-65-invert, +.has-background-primary-65-invert { + --bulma-background-l: var(--bulma-primary-65-invert-l); +} + +.is-color-primary-70, +.has-text-primary-70 { + --bulma-color-l: var(--bulma-primary-70-l); +} + +.is-background-primary-70, +.has-background-primary-70 { + --bulma-background-l: var(--bulma-primary-70-l); +} + +.is-color-primary-70-invert, +.has-text-primary-70-invert { + --bulma-color-l: var(--bulma-primary-70-invert-l); +} + +.is-background-primary-70-invert, +.has-background-primary-70-invert { + --bulma-background-l: var(--bulma-primary-70-invert-l); +} + +.is-color-primary-75, +.has-text-primary-75 { + --bulma-color-l: var(--bulma-primary-75-l); +} + +.is-background-primary-75, +.has-background-primary-75 { + --bulma-background-l: var(--bulma-primary-75-l); +} + +.is-color-primary-75-invert, +.has-text-primary-75-invert { + --bulma-color-l: var(--bulma-primary-75-invert-l); +} + +.is-background-primary-75-invert, +.has-background-primary-75-invert { + --bulma-background-l: var(--bulma-primary-75-invert-l); +} + +.is-color-primary-80, +.has-text-primary-80 { + --bulma-color-l: var(--bulma-primary-80-l); +} + +.is-background-primary-80, +.has-background-primary-80 { + --bulma-background-l: var(--bulma-primary-80-l); +} + +.is-color-primary-80-invert, +.has-text-primary-80-invert { + --bulma-color-l: var(--bulma-primary-80-invert-l); +} + +.is-background-primary-80-invert, +.has-background-primary-80-invert { + --bulma-background-l: var(--bulma-primary-80-invert-l); +} + +.is-color-primary-85, +.has-text-primary-85 { + --bulma-color-l: var(--bulma-primary-85-l); +} + +.is-background-primary-85, +.has-background-primary-85 { + --bulma-background-l: var(--bulma-primary-85-l); +} + +.is-color-primary-85-invert, +.has-text-primary-85-invert { + --bulma-color-l: var(--bulma-primary-85-invert-l); +} + +.is-background-primary-85-invert, +.has-background-primary-85-invert { + --bulma-background-l: var(--bulma-primary-85-invert-l); +} + +.is-color-primary-90, +.has-text-primary-90 { + --bulma-color-l: var(--bulma-primary-90-l); +} + +.is-background-primary-90, +.has-background-primary-90 { + --bulma-background-l: var(--bulma-primary-90-l); +} + +.is-color-primary-90-invert, +.has-text-primary-90-invert { + --bulma-color-l: var(--bulma-primary-90-invert-l); +} + +.is-background-primary-90-invert, +.has-background-primary-90-invert { + --bulma-background-l: var(--bulma-primary-90-invert-l); +} + +.is-color-primary-95, +.has-text-primary-95 { + --bulma-color-l: var(--bulma-primary-95-l); +} + +.is-background-primary-95, +.has-background-primary-95 { + --bulma-background-l: var(--bulma-primary-95-l); +} + +.is-color-primary-95-invert, +.has-text-primary-95-invert { + --bulma-color-l: var(--bulma-primary-95-invert-l); +} + +.is-background-primary-95-invert, +.has-background-primary-95-invert { + --bulma-background-l: var(--bulma-primary-95-invert-l); +} + +.is-color-primary-100, +.has-text-primary-100 { + --bulma-color-l: var(--bulma-primary-100-l); +} + +.is-background-primary-100, +.has-background-primary-100 { + --bulma-background-l: var(--bulma-primary-100-l); +} + +.is-color-primary-100-invert, +.has-text-primary-100-invert { + --bulma-color-l: var(--bulma-primary-100-invert-l); +} + +.is-background-primary-100-invert, +.has-background-primary-100-invert { + --bulma-background-l: var(--bulma-primary-100-invert-l); +} + +a.is-color-primary:hover, a.is-color-primary:focus-visible, +button.is-color-primary:hover, +button.is-color-primary:focus-visible, +is-color-primary.is-hoverable:hover, +is-color-primary.is-hoverable:focus-visible, +a.has-text-primary:hover, +a.has-text-primary:focus-visible, +button.has-text-primary:hover, +button.has-text-primary:focus-visible, +has-text-primary.is-hoverable:hover, +has-text-primary.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-primary:active, +button.is-color-primary:active, +is-color-primary.is-hoverable:active, +a.has-text-primary:active, +button.has-text-primary:active, +has-text-primary.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-primary:hover, a.is-background-primary:focus-visible, +button.is-background-primary:hover, +button.is-background-primary:focus-visible, +is-background-primary.is-hoverable:hover, +is-background-primary.is-hoverable:focus-visible, +a.has-background-primary:hover, +a.has-background-primary:focus-visible, +button.has-background-primary:hover, +button.has-background-primary:focus-visible, +has-background-primary.is-hoverable:hover, +has-background-primary.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-primary:active, +button.is-background-primary:active, +is-background-primary.is-hoverable:active, +a.has-background-primary:active, +button.has-background-primary:active, +has-background-primary.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-primary { + --h: var(--bulma-primary-h); + --s: var(--bulma-primary-s); + --l: var(--bulma-primary-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-primary-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-primary-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-primary-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-primary-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-primary-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-primary-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-primary-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-primary-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-primary-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-primary-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-primary-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-primary-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-primary-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-primary-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-primary-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-primary-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-primary-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-primary-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-primary-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-primary-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-primary-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-link], +[class*=has-text-link] { + --bulma-color-l: var(--bulma-link-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-link], +[class*=has-background-link] { + --bulma-background-l: var(--bulma-link-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-link-invert, +.has-text-link-invert { + --bulma-color-l: var(--bulma-link-invert-l); +} + +.is-background-link-invert, +.has-background-link-invert { + --bulma-background-l: var(--bulma-link-invert-l); +} + +.is-color-link-on-scheme, +.has-text-link-on-scheme { + --bulma-color-l: var(--bulma-link-on-scheme-l); +} + +.is-background-link-on-scheme, +.has-background-link-on-scheme { + --bulma-background-l: var(--bulma-link-on-scheme-l); +} + +.is-color-link-light, +.has-text-link-light { + --bulma-color-l: var(--bulma-link-light-l); +} + +.is-background-link-light, +.has-background-link-light { + --bulma-background-l: var(--bulma-link-light-l); +} + +.is-color-link-light-invert, +.has-text-link-light-invert { + --bulma-color-l: var(--bulma-link-light-invert-l); +} + +.is-background-link-light-invert, +.has-background-link-light-invert { + --bulma-background-l: var(--bulma-link-light-invert-l); +} + +.is-color-link-dark, +.has-text-link-dark { + --bulma-color-l: var(--bulma-link-dark-l); +} + +.is-background-link-dark, +.has-background-link-dark { + --bulma-background-l: var(--bulma-link-dark-l); +} + +.is-color-link-dark-invert, +.has-text-link-dark-invert { + --bulma-color-l: var(--bulma-link-dark-invert-l); +} + +.is-background-link-dark-invert, +.has-background-link-dark-invert { + --bulma-background-l: var(--bulma-link-dark-invert-l); +} + +.is-color-link-soft, +.has-text-link-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-link-soft, +.has-background-link-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-link-bold, +.has-text-link-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-link-bold, +.has-background-link-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-link-soft-invert, +.has-text-link-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-link-soft-invert, +.has-background-link-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-link-bold-invert, +.has-text-link-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-link-bold-invert, +.has-background-link-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-link-00, +.has-text-link-00 { + --bulma-color-l: var(--bulma-link-00-l); +} + +.is-background-link-00, +.has-background-link-00 { + --bulma-background-l: var(--bulma-link-00-l); +} + +.is-color-link-00-invert, +.has-text-link-00-invert { + --bulma-color-l: var(--bulma-link-00-invert-l); +} + +.is-background-link-00-invert, +.has-background-link-00-invert { + --bulma-background-l: var(--bulma-link-00-invert-l); +} + +.is-color-link-05, +.has-text-link-05 { + --bulma-color-l: var(--bulma-link-05-l); +} + +.is-background-link-05, +.has-background-link-05 { + --bulma-background-l: var(--bulma-link-05-l); +} + +.is-color-link-05-invert, +.has-text-link-05-invert { + --bulma-color-l: var(--bulma-link-05-invert-l); +} + +.is-background-link-05-invert, +.has-background-link-05-invert { + --bulma-background-l: var(--bulma-link-05-invert-l); +} + +.is-color-link-10, +.has-text-link-10 { + --bulma-color-l: var(--bulma-link-10-l); +} + +.is-background-link-10, +.has-background-link-10 { + --bulma-background-l: var(--bulma-link-10-l); +} + +.is-color-link-10-invert, +.has-text-link-10-invert { + --bulma-color-l: var(--bulma-link-10-invert-l); +} + +.is-background-link-10-invert, +.has-background-link-10-invert { + --bulma-background-l: var(--bulma-link-10-invert-l); +} + +.is-color-link-15, +.has-text-link-15 { + --bulma-color-l: var(--bulma-link-15-l); +} + +.is-background-link-15, +.has-background-link-15 { + --bulma-background-l: var(--bulma-link-15-l); +} + +.is-color-link-15-invert, +.has-text-link-15-invert { + --bulma-color-l: var(--bulma-link-15-invert-l); +} + +.is-background-link-15-invert, +.has-background-link-15-invert { + --bulma-background-l: var(--bulma-link-15-invert-l); +} + +.is-color-link-20, +.has-text-link-20 { + --bulma-color-l: var(--bulma-link-20-l); +} + +.is-background-link-20, +.has-background-link-20 { + --bulma-background-l: var(--bulma-link-20-l); +} + +.is-color-link-20-invert, +.has-text-link-20-invert { + --bulma-color-l: var(--bulma-link-20-invert-l); +} + +.is-background-link-20-invert, +.has-background-link-20-invert { + --bulma-background-l: var(--bulma-link-20-invert-l); +} + +.is-color-link-25, +.has-text-link-25 { + --bulma-color-l: var(--bulma-link-25-l); +} + +.is-background-link-25, +.has-background-link-25 { + --bulma-background-l: var(--bulma-link-25-l); +} + +.is-color-link-25-invert, +.has-text-link-25-invert { + --bulma-color-l: var(--bulma-link-25-invert-l); +} + +.is-background-link-25-invert, +.has-background-link-25-invert { + --bulma-background-l: var(--bulma-link-25-invert-l); +} + +.is-color-link-30, +.has-text-link-30 { + --bulma-color-l: var(--bulma-link-30-l); +} + +.is-background-link-30, +.has-background-link-30 { + --bulma-background-l: var(--bulma-link-30-l); +} + +.is-color-link-30-invert, +.has-text-link-30-invert { + --bulma-color-l: var(--bulma-link-30-invert-l); +} + +.is-background-link-30-invert, +.has-background-link-30-invert { + --bulma-background-l: var(--bulma-link-30-invert-l); +} + +.is-color-link-35, +.has-text-link-35 { + --bulma-color-l: var(--bulma-link-35-l); +} + +.is-background-link-35, +.has-background-link-35 { + --bulma-background-l: var(--bulma-link-35-l); +} + +.is-color-link-35-invert, +.has-text-link-35-invert { + --bulma-color-l: var(--bulma-link-35-invert-l); +} + +.is-background-link-35-invert, +.has-background-link-35-invert { + --bulma-background-l: var(--bulma-link-35-invert-l); +} + +.is-color-link-40, +.has-text-link-40 { + --bulma-color-l: var(--bulma-link-40-l); +} + +.is-background-link-40, +.has-background-link-40 { + --bulma-background-l: var(--bulma-link-40-l); +} + +.is-color-link-40-invert, +.has-text-link-40-invert { + --bulma-color-l: var(--bulma-link-40-invert-l); +} + +.is-background-link-40-invert, +.has-background-link-40-invert { + --bulma-background-l: var(--bulma-link-40-invert-l); +} + +.is-color-link-45, +.has-text-link-45 { + --bulma-color-l: var(--bulma-link-45-l); +} + +.is-background-link-45, +.has-background-link-45 { + --bulma-background-l: var(--bulma-link-45-l); +} + +.is-color-link-45-invert, +.has-text-link-45-invert { + --bulma-color-l: var(--bulma-link-45-invert-l); +} + +.is-background-link-45-invert, +.has-background-link-45-invert { + --bulma-background-l: var(--bulma-link-45-invert-l); +} + +.is-color-link-50, +.has-text-link-50 { + --bulma-color-l: var(--bulma-link-50-l); +} + +.is-background-link-50, +.has-background-link-50 { + --bulma-background-l: var(--bulma-link-50-l); +} + +.is-color-link-50-invert, +.has-text-link-50-invert { + --bulma-color-l: var(--bulma-link-50-invert-l); +} + +.is-background-link-50-invert, +.has-background-link-50-invert { + --bulma-background-l: var(--bulma-link-50-invert-l); +} + +.is-color-link-55, +.has-text-link-55 { + --bulma-color-l: var(--bulma-link-55-l); +} + +.is-background-link-55, +.has-background-link-55 { + --bulma-background-l: var(--bulma-link-55-l); +} + +.is-color-link-55-invert, +.has-text-link-55-invert { + --bulma-color-l: var(--bulma-link-55-invert-l); +} + +.is-background-link-55-invert, +.has-background-link-55-invert { + --bulma-background-l: var(--bulma-link-55-invert-l); +} + +.is-color-link-60, +.has-text-link-60 { + --bulma-color-l: var(--bulma-link-60-l); +} + +.is-background-link-60, +.has-background-link-60 { + --bulma-background-l: var(--bulma-link-60-l); +} + +.is-color-link-60-invert, +.has-text-link-60-invert { + --bulma-color-l: var(--bulma-link-60-invert-l); +} + +.is-background-link-60-invert, +.has-background-link-60-invert { + --bulma-background-l: var(--bulma-link-60-invert-l); +} + +.is-color-link-65, +.has-text-link-65 { + --bulma-color-l: var(--bulma-link-65-l); +} + +.is-background-link-65, +.has-background-link-65 { + --bulma-background-l: var(--bulma-link-65-l); +} + +.is-color-link-65-invert, +.has-text-link-65-invert { + --bulma-color-l: var(--bulma-link-65-invert-l); +} + +.is-background-link-65-invert, +.has-background-link-65-invert { + --bulma-background-l: var(--bulma-link-65-invert-l); +} + +.is-color-link-70, +.has-text-link-70 { + --bulma-color-l: var(--bulma-link-70-l); +} + +.is-background-link-70, +.has-background-link-70 { + --bulma-background-l: var(--bulma-link-70-l); +} + +.is-color-link-70-invert, +.has-text-link-70-invert { + --bulma-color-l: var(--bulma-link-70-invert-l); +} + +.is-background-link-70-invert, +.has-background-link-70-invert { + --bulma-background-l: var(--bulma-link-70-invert-l); +} + +.is-color-link-75, +.has-text-link-75 { + --bulma-color-l: var(--bulma-link-75-l); +} + +.is-background-link-75, +.has-background-link-75 { + --bulma-background-l: var(--bulma-link-75-l); +} + +.is-color-link-75-invert, +.has-text-link-75-invert { + --bulma-color-l: var(--bulma-link-75-invert-l); +} + +.is-background-link-75-invert, +.has-background-link-75-invert { + --bulma-background-l: var(--bulma-link-75-invert-l); +} + +.is-color-link-80, +.has-text-link-80 { + --bulma-color-l: var(--bulma-link-80-l); +} + +.is-background-link-80, +.has-background-link-80 { + --bulma-background-l: var(--bulma-link-80-l); +} + +.is-color-link-80-invert, +.has-text-link-80-invert { + --bulma-color-l: var(--bulma-link-80-invert-l); +} + +.is-background-link-80-invert, +.has-background-link-80-invert { + --bulma-background-l: var(--bulma-link-80-invert-l); +} + +.is-color-link-85, +.has-text-link-85 { + --bulma-color-l: var(--bulma-link-85-l); +} + +.is-background-link-85, +.has-background-link-85 { + --bulma-background-l: var(--bulma-link-85-l); +} + +.is-color-link-85-invert, +.has-text-link-85-invert { + --bulma-color-l: var(--bulma-link-85-invert-l); +} + +.is-background-link-85-invert, +.has-background-link-85-invert { + --bulma-background-l: var(--bulma-link-85-invert-l); +} + +.is-color-link-90, +.has-text-link-90 { + --bulma-color-l: var(--bulma-link-90-l); +} + +.is-background-link-90, +.has-background-link-90 { + --bulma-background-l: var(--bulma-link-90-l); +} + +.is-color-link-90-invert, +.has-text-link-90-invert { + --bulma-color-l: var(--bulma-link-90-invert-l); +} + +.is-background-link-90-invert, +.has-background-link-90-invert { + --bulma-background-l: var(--bulma-link-90-invert-l); +} + +.is-color-link-95, +.has-text-link-95 { + --bulma-color-l: var(--bulma-link-95-l); +} + +.is-background-link-95, +.has-background-link-95 { + --bulma-background-l: var(--bulma-link-95-l); +} + +.is-color-link-95-invert, +.has-text-link-95-invert { + --bulma-color-l: var(--bulma-link-95-invert-l); +} + +.is-background-link-95-invert, +.has-background-link-95-invert { + --bulma-background-l: var(--bulma-link-95-invert-l); +} + +.is-color-link-100, +.has-text-link-100 { + --bulma-color-l: var(--bulma-link-100-l); +} + +.is-background-link-100, +.has-background-link-100 { + --bulma-background-l: var(--bulma-link-100-l); +} + +.is-color-link-100-invert, +.has-text-link-100-invert { + --bulma-color-l: var(--bulma-link-100-invert-l); +} + +.is-background-link-100-invert, +.has-background-link-100-invert { + --bulma-background-l: var(--bulma-link-100-invert-l); +} + +a.is-color-link:hover, a.is-color-link:focus-visible, +button.is-color-link:hover, +button.is-color-link:focus-visible, +is-color-link.is-hoverable:hover, +is-color-link.is-hoverable:focus-visible, +a.has-text-link:hover, +a.has-text-link:focus-visible, +button.has-text-link:hover, +button.has-text-link:focus-visible, +has-text-link.is-hoverable:hover, +has-text-link.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-link:active, +button.is-color-link:active, +is-color-link.is-hoverable:active, +a.has-text-link:active, +button.has-text-link:active, +has-text-link.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-link:hover, a.is-background-link:focus-visible, +button.is-background-link:hover, +button.is-background-link:focus-visible, +is-background-link.is-hoverable:hover, +is-background-link.is-hoverable:focus-visible, +a.has-background-link:hover, +a.has-background-link:focus-visible, +button.has-background-link:hover, +button.has-background-link:focus-visible, +has-background-link.is-hoverable:hover, +has-background-link.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-link:active, +button.is-background-link:active, +is-background-link.is-hoverable:active, +a.has-background-link:active, +button.has-background-link:active, +has-background-link.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-link { + --h: var(--bulma-link-h); + --s: var(--bulma-link-s); + --l: var(--bulma-link-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-link-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-link-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-link-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-link-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-link-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-link-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-link-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-link-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-link-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-link-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-link-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-link-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-link-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-link-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-link-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-link-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-link-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-link-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-link-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-link-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-link-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-info], +[class*=has-text-info] { + --bulma-color-l: var(--bulma-info-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-info], +[class*=has-background-info] { + --bulma-background-l: var(--bulma-info-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-info-h), var(--bulma-info-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-info-invert, +.has-text-info-invert { + --bulma-color-l: var(--bulma-info-invert-l); +} + +.is-background-info-invert, +.has-background-info-invert { + --bulma-background-l: var(--bulma-info-invert-l); +} + +.is-color-info-on-scheme, +.has-text-info-on-scheme { + --bulma-color-l: var(--bulma-info-on-scheme-l); +} + +.is-background-info-on-scheme, +.has-background-info-on-scheme { + --bulma-background-l: var(--bulma-info-on-scheme-l); +} + +.is-color-info-light, +.has-text-info-light { + --bulma-color-l: var(--bulma-info-light-l); +} + +.is-background-info-light, +.has-background-info-light { + --bulma-background-l: var(--bulma-info-light-l); +} + +.is-color-info-light-invert, +.has-text-info-light-invert { + --bulma-color-l: var(--bulma-info-light-invert-l); +} + +.is-background-info-light-invert, +.has-background-info-light-invert { + --bulma-background-l: var(--bulma-info-light-invert-l); +} + +.is-color-info-dark, +.has-text-info-dark { + --bulma-color-l: var(--bulma-info-dark-l); +} + +.is-background-info-dark, +.has-background-info-dark { + --bulma-background-l: var(--bulma-info-dark-l); +} + +.is-color-info-dark-invert, +.has-text-info-dark-invert { + --bulma-color-l: var(--bulma-info-dark-invert-l); +} + +.is-background-info-dark-invert, +.has-background-info-dark-invert { + --bulma-background-l: var(--bulma-info-dark-invert-l); +} + +.is-color-info-soft, +.has-text-info-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-info-soft, +.has-background-info-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-info-bold, +.has-text-info-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-info-bold, +.has-background-info-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-info-soft-invert, +.has-text-info-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-info-soft-invert, +.has-background-info-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-info-bold-invert, +.has-text-info-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-info-bold-invert, +.has-background-info-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-info-00, +.has-text-info-00 { + --bulma-color-l: var(--bulma-info-00-l); +} + +.is-background-info-00, +.has-background-info-00 { + --bulma-background-l: var(--bulma-info-00-l); +} + +.is-color-info-00-invert, +.has-text-info-00-invert { + --bulma-color-l: var(--bulma-info-00-invert-l); +} + +.is-background-info-00-invert, +.has-background-info-00-invert { + --bulma-background-l: var(--bulma-info-00-invert-l); +} + +.is-color-info-05, +.has-text-info-05 { + --bulma-color-l: var(--bulma-info-05-l); +} + +.is-background-info-05, +.has-background-info-05 { + --bulma-background-l: var(--bulma-info-05-l); +} + +.is-color-info-05-invert, +.has-text-info-05-invert { + --bulma-color-l: var(--bulma-info-05-invert-l); +} + +.is-background-info-05-invert, +.has-background-info-05-invert { + --bulma-background-l: var(--bulma-info-05-invert-l); +} + +.is-color-info-10, +.has-text-info-10 { + --bulma-color-l: var(--bulma-info-10-l); +} + +.is-background-info-10, +.has-background-info-10 { + --bulma-background-l: var(--bulma-info-10-l); +} + +.is-color-info-10-invert, +.has-text-info-10-invert { + --bulma-color-l: var(--bulma-info-10-invert-l); +} + +.is-background-info-10-invert, +.has-background-info-10-invert { + --bulma-background-l: var(--bulma-info-10-invert-l); +} + +.is-color-info-15, +.has-text-info-15 { + --bulma-color-l: var(--bulma-info-15-l); +} + +.is-background-info-15, +.has-background-info-15 { + --bulma-background-l: var(--bulma-info-15-l); +} + +.is-color-info-15-invert, +.has-text-info-15-invert { + --bulma-color-l: var(--bulma-info-15-invert-l); +} + +.is-background-info-15-invert, +.has-background-info-15-invert { + --bulma-background-l: var(--bulma-info-15-invert-l); +} + +.is-color-info-20, +.has-text-info-20 { + --bulma-color-l: var(--bulma-info-20-l); +} + +.is-background-info-20, +.has-background-info-20 { + --bulma-background-l: var(--bulma-info-20-l); +} + +.is-color-info-20-invert, +.has-text-info-20-invert { + --bulma-color-l: var(--bulma-info-20-invert-l); +} + +.is-background-info-20-invert, +.has-background-info-20-invert { + --bulma-background-l: var(--bulma-info-20-invert-l); +} + +.is-color-info-25, +.has-text-info-25 { + --bulma-color-l: var(--bulma-info-25-l); +} + +.is-background-info-25, +.has-background-info-25 { + --bulma-background-l: var(--bulma-info-25-l); +} + +.is-color-info-25-invert, +.has-text-info-25-invert { + --bulma-color-l: var(--bulma-info-25-invert-l); +} + +.is-background-info-25-invert, +.has-background-info-25-invert { + --bulma-background-l: var(--bulma-info-25-invert-l); +} + +.is-color-info-30, +.has-text-info-30 { + --bulma-color-l: var(--bulma-info-30-l); +} + +.is-background-info-30, +.has-background-info-30 { + --bulma-background-l: var(--bulma-info-30-l); +} + +.is-color-info-30-invert, +.has-text-info-30-invert { + --bulma-color-l: var(--bulma-info-30-invert-l); +} + +.is-background-info-30-invert, +.has-background-info-30-invert { + --bulma-background-l: var(--bulma-info-30-invert-l); +} + +.is-color-info-35, +.has-text-info-35 { + --bulma-color-l: var(--bulma-info-35-l); +} + +.is-background-info-35, +.has-background-info-35 { + --bulma-background-l: var(--bulma-info-35-l); +} + +.is-color-info-35-invert, +.has-text-info-35-invert { + --bulma-color-l: var(--bulma-info-35-invert-l); +} + +.is-background-info-35-invert, +.has-background-info-35-invert { + --bulma-background-l: var(--bulma-info-35-invert-l); +} + +.is-color-info-40, +.has-text-info-40 { + --bulma-color-l: var(--bulma-info-40-l); +} + +.is-background-info-40, +.has-background-info-40 { + --bulma-background-l: var(--bulma-info-40-l); +} + +.is-color-info-40-invert, +.has-text-info-40-invert { + --bulma-color-l: var(--bulma-info-40-invert-l); +} + +.is-background-info-40-invert, +.has-background-info-40-invert { + --bulma-background-l: var(--bulma-info-40-invert-l); +} + +.is-color-info-45, +.has-text-info-45 { + --bulma-color-l: var(--bulma-info-45-l); +} + +.is-background-info-45, +.has-background-info-45 { + --bulma-background-l: var(--bulma-info-45-l); +} + +.is-color-info-45-invert, +.has-text-info-45-invert { + --bulma-color-l: var(--bulma-info-45-invert-l); +} + +.is-background-info-45-invert, +.has-background-info-45-invert { + --bulma-background-l: var(--bulma-info-45-invert-l); +} + +.is-color-info-50, +.has-text-info-50 { + --bulma-color-l: var(--bulma-info-50-l); +} + +.is-background-info-50, +.has-background-info-50 { + --bulma-background-l: var(--bulma-info-50-l); +} + +.is-color-info-50-invert, +.has-text-info-50-invert { + --bulma-color-l: var(--bulma-info-50-invert-l); +} + +.is-background-info-50-invert, +.has-background-info-50-invert { + --bulma-background-l: var(--bulma-info-50-invert-l); +} + +.is-color-info-55, +.has-text-info-55 { + --bulma-color-l: var(--bulma-info-55-l); +} + +.is-background-info-55, +.has-background-info-55 { + --bulma-background-l: var(--bulma-info-55-l); +} + +.is-color-info-55-invert, +.has-text-info-55-invert { + --bulma-color-l: var(--bulma-info-55-invert-l); +} + +.is-background-info-55-invert, +.has-background-info-55-invert { + --bulma-background-l: var(--bulma-info-55-invert-l); +} + +.is-color-info-60, +.has-text-info-60 { + --bulma-color-l: var(--bulma-info-60-l); +} + +.is-background-info-60, +.has-background-info-60 { + --bulma-background-l: var(--bulma-info-60-l); +} + +.is-color-info-60-invert, +.has-text-info-60-invert { + --bulma-color-l: var(--bulma-info-60-invert-l); +} + +.is-background-info-60-invert, +.has-background-info-60-invert { + --bulma-background-l: var(--bulma-info-60-invert-l); +} + +.is-color-info-65, +.has-text-info-65 { + --bulma-color-l: var(--bulma-info-65-l); +} + +.is-background-info-65, +.has-background-info-65 { + --bulma-background-l: var(--bulma-info-65-l); +} + +.is-color-info-65-invert, +.has-text-info-65-invert { + --bulma-color-l: var(--bulma-info-65-invert-l); +} + +.is-background-info-65-invert, +.has-background-info-65-invert { + --bulma-background-l: var(--bulma-info-65-invert-l); +} + +.is-color-info-70, +.has-text-info-70 { + --bulma-color-l: var(--bulma-info-70-l); +} + +.is-background-info-70, +.has-background-info-70 { + --bulma-background-l: var(--bulma-info-70-l); +} + +.is-color-info-70-invert, +.has-text-info-70-invert { + --bulma-color-l: var(--bulma-info-70-invert-l); +} + +.is-background-info-70-invert, +.has-background-info-70-invert { + --bulma-background-l: var(--bulma-info-70-invert-l); +} + +.is-color-info-75, +.has-text-info-75 { + --bulma-color-l: var(--bulma-info-75-l); +} + +.is-background-info-75, +.has-background-info-75 { + --bulma-background-l: var(--bulma-info-75-l); +} + +.is-color-info-75-invert, +.has-text-info-75-invert { + --bulma-color-l: var(--bulma-info-75-invert-l); +} + +.is-background-info-75-invert, +.has-background-info-75-invert { + --bulma-background-l: var(--bulma-info-75-invert-l); +} + +.is-color-info-80, +.has-text-info-80 { + --bulma-color-l: var(--bulma-info-80-l); +} + +.is-background-info-80, +.has-background-info-80 { + --bulma-background-l: var(--bulma-info-80-l); +} + +.is-color-info-80-invert, +.has-text-info-80-invert { + --bulma-color-l: var(--bulma-info-80-invert-l); +} + +.is-background-info-80-invert, +.has-background-info-80-invert { + --bulma-background-l: var(--bulma-info-80-invert-l); +} + +.is-color-info-85, +.has-text-info-85 { + --bulma-color-l: var(--bulma-info-85-l); +} + +.is-background-info-85, +.has-background-info-85 { + --bulma-background-l: var(--bulma-info-85-l); +} + +.is-color-info-85-invert, +.has-text-info-85-invert { + --bulma-color-l: var(--bulma-info-85-invert-l); +} + +.is-background-info-85-invert, +.has-background-info-85-invert { + --bulma-background-l: var(--bulma-info-85-invert-l); +} + +.is-color-info-90, +.has-text-info-90 { + --bulma-color-l: var(--bulma-info-90-l); +} + +.is-background-info-90, +.has-background-info-90 { + --bulma-background-l: var(--bulma-info-90-l); +} + +.is-color-info-90-invert, +.has-text-info-90-invert { + --bulma-color-l: var(--bulma-info-90-invert-l); +} + +.is-background-info-90-invert, +.has-background-info-90-invert { + --bulma-background-l: var(--bulma-info-90-invert-l); +} + +.is-color-info-95, +.has-text-info-95 { + --bulma-color-l: var(--bulma-info-95-l); +} + +.is-background-info-95, +.has-background-info-95 { + --bulma-background-l: var(--bulma-info-95-l); +} + +.is-color-info-95-invert, +.has-text-info-95-invert { + --bulma-color-l: var(--bulma-info-95-invert-l); +} + +.is-background-info-95-invert, +.has-background-info-95-invert { + --bulma-background-l: var(--bulma-info-95-invert-l); +} + +.is-color-info-100, +.has-text-info-100 { + --bulma-color-l: var(--bulma-info-100-l); +} + +.is-background-info-100, +.has-background-info-100 { + --bulma-background-l: var(--bulma-info-100-l); +} + +.is-color-info-100-invert, +.has-text-info-100-invert { + --bulma-color-l: var(--bulma-info-100-invert-l); +} + +.is-background-info-100-invert, +.has-background-info-100-invert { + --bulma-background-l: var(--bulma-info-100-invert-l); +} + +a.is-color-info:hover, a.is-color-info:focus-visible, +button.is-color-info:hover, +button.is-color-info:focus-visible, +is-color-info.is-hoverable:hover, +is-color-info.is-hoverable:focus-visible, +a.has-text-info:hover, +a.has-text-info:focus-visible, +button.has-text-info:hover, +button.has-text-info:focus-visible, +has-text-info.is-hoverable:hover, +has-text-info.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-info:active, +button.is-color-info:active, +is-color-info.is-hoverable:active, +a.has-text-info:active, +button.has-text-info:active, +has-text-info.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-info:hover, a.is-background-info:focus-visible, +button.is-background-info:hover, +button.is-background-info:focus-visible, +is-background-info.is-hoverable:hover, +is-background-info.is-hoverable:focus-visible, +a.has-background-info:hover, +a.has-background-info:focus-visible, +button.has-background-info:hover, +button.has-background-info:focus-visible, +has-background-info.is-hoverable:hover, +has-background-info.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-info:active, +button.is-background-info:active, +is-background-info.is-hoverable:active, +a.has-background-info:active, +button.has-background-info:active, +has-background-info.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-info { + --h: var(--bulma-info-h); + --s: var(--bulma-info-s); + --l: var(--bulma-info-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-info-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-info-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-info-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-info-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-info-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-info-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-info-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-info-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-info-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-info-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-info-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-info-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-info-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-info-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-info-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-info-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-info-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-info-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-info-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-info-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-info-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-success], +[class*=has-text-success] { + --bulma-color-l: var(--bulma-success-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-success], +[class*=has-background-success] { + --bulma-background-l: var(--bulma-success-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-success-invert, +.has-text-success-invert { + --bulma-color-l: var(--bulma-success-invert-l); +} + +.is-background-success-invert, +.has-background-success-invert { + --bulma-background-l: var(--bulma-success-invert-l); +} + +.is-color-success-on-scheme, +.has-text-success-on-scheme { + --bulma-color-l: var(--bulma-success-on-scheme-l); +} + +.is-background-success-on-scheme, +.has-background-success-on-scheme { + --bulma-background-l: var(--bulma-success-on-scheme-l); +} + +.is-color-success-light, +.has-text-success-light { + --bulma-color-l: var(--bulma-success-light-l); +} + +.is-background-success-light, +.has-background-success-light { + --bulma-background-l: var(--bulma-success-light-l); +} + +.is-color-success-light-invert, +.has-text-success-light-invert { + --bulma-color-l: var(--bulma-success-light-invert-l); +} + +.is-background-success-light-invert, +.has-background-success-light-invert { + --bulma-background-l: var(--bulma-success-light-invert-l); +} + +.is-color-success-dark, +.has-text-success-dark { + --bulma-color-l: var(--bulma-success-dark-l); +} + +.is-background-success-dark, +.has-background-success-dark { + --bulma-background-l: var(--bulma-success-dark-l); +} + +.is-color-success-dark-invert, +.has-text-success-dark-invert { + --bulma-color-l: var(--bulma-success-dark-invert-l); +} + +.is-background-success-dark-invert, +.has-background-success-dark-invert { + --bulma-background-l: var(--bulma-success-dark-invert-l); +} + +.is-color-success-soft, +.has-text-success-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-success-soft, +.has-background-success-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-success-bold, +.has-text-success-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-success-bold, +.has-background-success-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-success-soft-invert, +.has-text-success-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-success-soft-invert, +.has-background-success-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-success-bold-invert, +.has-text-success-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-success-bold-invert, +.has-background-success-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-success-00, +.has-text-success-00 { + --bulma-color-l: var(--bulma-success-00-l); +} + +.is-background-success-00, +.has-background-success-00 { + --bulma-background-l: var(--bulma-success-00-l); +} + +.is-color-success-00-invert, +.has-text-success-00-invert { + --bulma-color-l: var(--bulma-success-00-invert-l); +} + +.is-background-success-00-invert, +.has-background-success-00-invert { + --bulma-background-l: var(--bulma-success-00-invert-l); +} + +.is-color-success-05, +.has-text-success-05 { + --bulma-color-l: var(--bulma-success-05-l); +} + +.is-background-success-05, +.has-background-success-05 { + --bulma-background-l: var(--bulma-success-05-l); +} + +.is-color-success-05-invert, +.has-text-success-05-invert { + --bulma-color-l: var(--bulma-success-05-invert-l); +} + +.is-background-success-05-invert, +.has-background-success-05-invert { + --bulma-background-l: var(--bulma-success-05-invert-l); +} + +.is-color-success-10, +.has-text-success-10 { + --bulma-color-l: var(--bulma-success-10-l); +} + +.is-background-success-10, +.has-background-success-10 { + --bulma-background-l: var(--bulma-success-10-l); +} + +.is-color-success-10-invert, +.has-text-success-10-invert { + --bulma-color-l: var(--bulma-success-10-invert-l); +} + +.is-background-success-10-invert, +.has-background-success-10-invert { + --bulma-background-l: var(--bulma-success-10-invert-l); +} + +.is-color-success-15, +.has-text-success-15 { + --bulma-color-l: var(--bulma-success-15-l); +} + +.is-background-success-15, +.has-background-success-15 { + --bulma-background-l: var(--bulma-success-15-l); +} + +.is-color-success-15-invert, +.has-text-success-15-invert { + --bulma-color-l: var(--bulma-success-15-invert-l); +} + +.is-background-success-15-invert, +.has-background-success-15-invert { + --bulma-background-l: var(--bulma-success-15-invert-l); +} + +.is-color-success-20, +.has-text-success-20 { + --bulma-color-l: var(--bulma-success-20-l); +} + +.is-background-success-20, +.has-background-success-20 { + --bulma-background-l: var(--bulma-success-20-l); +} + +.is-color-success-20-invert, +.has-text-success-20-invert { + --bulma-color-l: var(--bulma-success-20-invert-l); +} + +.is-background-success-20-invert, +.has-background-success-20-invert { + --bulma-background-l: var(--bulma-success-20-invert-l); +} + +.is-color-success-25, +.has-text-success-25 { + --bulma-color-l: var(--bulma-success-25-l); +} + +.is-background-success-25, +.has-background-success-25 { + --bulma-background-l: var(--bulma-success-25-l); +} + +.is-color-success-25-invert, +.has-text-success-25-invert { + --bulma-color-l: var(--bulma-success-25-invert-l); +} + +.is-background-success-25-invert, +.has-background-success-25-invert { + --bulma-background-l: var(--bulma-success-25-invert-l); +} + +.is-color-success-30, +.has-text-success-30 { + --bulma-color-l: var(--bulma-success-30-l); +} + +.is-background-success-30, +.has-background-success-30 { + --bulma-background-l: var(--bulma-success-30-l); +} + +.is-color-success-30-invert, +.has-text-success-30-invert { + --bulma-color-l: var(--bulma-success-30-invert-l); +} + +.is-background-success-30-invert, +.has-background-success-30-invert { + --bulma-background-l: var(--bulma-success-30-invert-l); +} + +.is-color-success-35, +.has-text-success-35 { + --bulma-color-l: var(--bulma-success-35-l); +} + +.is-background-success-35, +.has-background-success-35 { + --bulma-background-l: var(--bulma-success-35-l); +} + +.is-color-success-35-invert, +.has-text-success-35-invert { + --bulma-color-l: var(--bulma-success-35-invert-l); +} + +.is-background-success-35-invert, +.has-background-success-35-invert { + --bulma-background-l: var(--bulma-success-35-invert-l); +} + +.is-color-success-40, +.has-text-success-40 { + --bulma-color-l: var(--bulma-success-40-l); +} + +.is-background-success-40, +.has-background-success-40 { + --bulma-background-l: var(--bulma-success-40-l); +} + +.is-color-success-40-invert, +.has-text-success-40-invert { + --bulma-color-l: var(--bulma-success-40-invert-l); +} + +.is-background-success-40-invert, +.has-background-success-40-invert { + --bulma-background-l: var(--bulma-success-40-invert-l); +} + +.is-color-success-45, +.has-text-success-45 { + --bulma-color-l: var(--bulma-success-45-l); +} + +.is-background-success-45, +.has-background-success-45 { + --bulma-background-l: var(--bulma-success-45-l); +} + +.is-color-success-45-invert, +.has-text-success-45-invert { + --bulma-color-l: var(--bulma-success-45-invert-l); +} + +.is-background-success-45-invert, +.has-background-success-45-invert { + --bulma-background-l: var(--bulma-success-45-invert-l); +} + +.is-color-success-50, +.has-text-success-50 { + --bulma-color-l: var(--bulma-success-50-l); +} + +.is-background-success-50, +.has-background-success-50 { + --bulma-background-l: var(--bulma-success-50-l); +} + +.is-color-success-50-invert, +.has-text-success-50-invert { + --bulma-color-l: var(--bulma-success-50-invert-l); +} + +.is-background-success-50-invert, +.has-background-success-50-invert { + --bulma-background-l: var(--bulma-success-50-invert-l); +} + +.is-color-success-55, +.has-text-success-55 { + --bulma-color-l: var(--bulma-success-55-l); +} + +.is-background-success-55, +.has-background-success-55 { + --bulma-background-l: var(--bulma-success-55-l); +} + +.is-color-success-55-invert, +.has-text-success-55-invert { + --bulma-color-l: var(--bulma-success-55-invert-l); +} + +.is-background-success-55-invert, +.has-background-success-55-invert { + --bulma-background-l: var(--bulma-success-55-invert-l); +} + +.is-color-success-60, +.has-text-success-60 { + --bulma-color-l: var(--bulma-success-60-l); +} + +.is-background-success-60, +.has-background-success-60 { + --bulma-background-l: var(--bulma-success-60-l); +} + +.is-color-success-60-invert, +.has-text-success-60-invert { + --bulma-color-l: var(--bulma-success-60-invert-l); +} + +.is-background-success-60-invert, +.has-background-success-60-invert { + --bulma-background-l: var(--bulma-success-60-invert-l); +} + +.is-color-success-65, +.has-text-success-65 { + --bulma-color-l: var(--bulma-success-65-l); +} + +.is-background-success-65, +.has-background-success-65 { + --bulma-background-l: var(--bulma-success-65-l); +} + +.is-color-success-65-invert, +.has-text-success-65-invert { + --bulma-color-l: var(--bulma-success-65-invert-l); +} + +.is-background-success-65-invert, +.has-background-success-65-invert { + --bulma-background-l: var(--bulma-success-65-invert-l); +} + +.is-color-success-70, +.has-text-success-70 { + --bulma-color-l: var(--bulma-success-70-l); +} + +.is-background-success-70, +.has-background-success-70 { + --bulma-background-l: var(--bulma-success-70-l); +} + +.is-color-success-70-invert, +.has-text-success-70-invert { + --bulma-color-l: var(--bulma-success-70-invert-l); +} + +.is-background-success-70-invert, +.has-background-success-70-invert { + --bulma-background-l: var(--bulma-success-70-invert-l); +} + +.is-color-success-75, +.has-text-success-75 { + --bulma-color-l: var(--bulma-success-75-l); +} + +.is-background-success-75, +.has-background-success-75 { + --bulma-background-l: var(--bulma-success-75-l); +} + +.is-color-success-75-invert, +.has-text-success-75-invert { + --bulma-color-l: var(--bulma-success-75-invert-l); +} + +.is-background-success-75-invert, +.has-background-success-75-invert { + --bulma-background-l: var(--bulma-success-75-invert-l); +} + +.is-color-success-80, +.has-text-success-80 { + --bulma-color-l: var(--bulma-success-80-l); +} + +.is-background-success-80, +.has-background-success-80 { + --bulma-background-l: var(--bulma-success-80-l); +} + +.is-color-success-80-invert, +.has-text-success-80-invert { + --bulma-color-l: var(--bulma-success-80-invert-l); +} + +.is-background-success-80-invert, +.has-background-success-80-invert { + --bulma-background-l: var(--bulma-success-80-invert-l); +} + +.is-color-success-85, +.has-text-success-85 { + --bulma-color-l: var(--bulma-success-85-l); +} + +.is-background-success-85, +.has-background-success-85 { + --bulma-background-l: var(--bulma-success-85-l); +} + +.is-color-success-85-invert, +.has-text-success-85-invert { + --bulma-color-l: var(--bulma-success-85-invert-l); +} + +.is-background-success-85-invert, +.has-background-success-85-invert { + --bulma-background-l: var(--bulma-success-85-invert-l); +} + +.is-color-success-90, +.has-text-success-90 { + --bulma-color-l: var(--bulma-success-90-l); +} + +.is-background-success-90, +.has-background-success-90 { + --bulma-background-l: var(--bulma-success-90-l); +} + +.is-color-success-90-invert, +.has-text-success-90-invert { + --bulma-color-l: var(--bulma-success-90-invert-l); +} + +.is-background-success-90-invert, +.has-background-success-90-invert { + --bulma-background-l: var(--bulma-success-90-invert-l); +} + +.is-color-success-95, +.has-text-success-95 { + --bulma-color-l: var(--bulma-success-95-l); +} + +.is-background-success-95, +.has-background-success-95 { + --bulma-background-l: var(--bulma-success-95-l); +} + +.is-color-success-95-invert, +.has-text-success-95-invert { + --bulma-color-l: var(--bulma-success-95-invert-l); +} + +.is-background-success-95-invert, +.has-background-success-95-invert { + --bulma-background-l: var(--bulma-success-95-invert-l); +} + +.is-color-success-100, +.has-text-success-100 { + --bulma-color-l: var(--bulma-success-100-l); +} + +.is-background-success-100, +.has-background-success-100 { + --bulma-background-l: var(--bulma-success-100-l); +} + +.is-color-success-100-invert, +.has-text-success-100-invert { + --bulma-color-l: var(--bulma-success-100-invert-l); +} + +.is-background-success-100-invert, +.has-background-success-100-invert { + --bulma-background-l: var(--bulma-success-100-invert-l); +} + +a.is-color-success:hover, a.is-color-success:focus-visible, +button.is-color-success:hover, +button.is-color-success:focus-visible, +is-color-success.is-hoverable:hover, +is-color-success.is-hoverable:focus-visible, +a.has-text-success:hover, +a.has-text-success:focus-visible, +button.has-text-success:hover, +button.has-text-success:focus-visible, +has-text-success.is-hoverable:hover, +has-text-success.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-success:active, +button.is-color-success:active, +is-color-success.is-hoverable:active, +a.has-text-success:active, +button.has-text-success:active, +has-text-success.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-success:hover, a.is-background-success:focus-visible, +button.is-background-success:hover, +button.is-background-success:focus-visible, +is-background-success.is-hoverable:hover, +is-background-success.is-hoverable:focus-visible, +a.has-background-success:hover, +a.has-background-success:focus-visible, +button.has-background-success:hover, +button.has-background-success:focus-visible, +has-background-success.is-hoverable:hover, +has-background-success.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-success:active, +button.is-background-success:active, +is-background-success.is-hoverable:active, +a.has-background-success:active, +button.has-background-success:active, +has-background-success.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-success { + --h: var(--bulma-success-h); + --s: var(--bulma-success-s); + --l: var(--bulma-success-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-success-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-success-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-success-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-success-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-success-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-success-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-success-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-success-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-success-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-success-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-success-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-success-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-success-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-success-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-success-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-success-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-success-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-success-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-success-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-success-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-success-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-warning], +[class*=has-text-warning] { + --bulma-color-l: var(--bulma-warning-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-warning], +[class*=has-background-warning] { + --bulma-background-l: var(--bulma-warning-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-warning-h), var(--bulma-warning-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-warning-invert, +.has-text-warning-invert { + --bulma-color-l: var(--bulma-warning-invert-l); +} + +.is-background-warning-invert, +.has-background-warning-invert { + --bulma-background-l: var(--bulma-warning-invert-l); +} + +.is-color-warning-on-scheme, +.has-text-warning-on-scheme { + --bulma-color-l: var(--bulma-warning-on-scheme-l); +} + +.is-background-warning-on-scheme, +.has-background-warning-on-scheme { + --bulma-background-l: var(--bulma-warning-on-scheme-l); +} + +.is-color-warning-light, +.has-text-warning-light { + --bulma-color-l: var(--bulma-warning-light-l); +} + +.is-background-warning-light, +.has-background-warning-light { + --bulma-background-l: var(--bulma-warning-light-l); +} + +.is-color-warning-light-invert, +.has-text-warning-light-invert { + --bulma-color-l: var(--bulma-warning-light-invert-l); +} + +.is-background-warning-light-invert, +.has-background-warning-light-invert { + --bulma-background-l: var(--bulma-warning-light-invert-l); +} + +.is-color-warning-dark, +.has-text-warning-dark { + --bulma-color-l: var(--bulma-warning-dark-l); +} + +.is-background-warning-dark, +.has-background-warning-dark { + --bulma-background-l: var(--bulma-warning-dark-l); +} + +.is-color-warning-dark-invert, +.has-text-warning-dark-invert { + --bulma-color-l: var(--bulma-warning-dark-invert-l); +} + +.is-background-warning-dark-invert, +.has-background-warning-dark-invert { + --bulma-background-l: var(--bulma-warning-dark-invert-l); +} + +.is-color-warning-soft, +.has-text-warning-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-warning-soft, +.has-background-warning-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-warning-bold, +.has-text-warning-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-warning-bold, +.has-background-warning-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-warning-soft-invert, +.has-text-warning-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-warning-soft-invert, +.has-background-warning-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-warning-bold-invert, +.has-text-warning-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-warning-bold-invert, +.has-background-warning-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-warning-00, +.has-text-warning-00 { + --bulma-color-l: var(--bulma-warning-00-l); +} + +.is-background-warning-00, +.has-background-warning-00 { + --bulma-background-l: var(--bulma-warning-00-l); +} + +.is-color-warning-00-invert, +.has-text-warning-00-invert { + --bulma-color-l: var(--bulma-warning-00-invert-l); +} + +.is-background-warning-00-invert, +.has-background-warning-00-invert { + --bulma-background-l: var(--bulma-warning-00-invert-l); +} + +.is-color-warning-05, +.has-text-warning-05 { + --bulma-color-l: var(--bulma-warning-05-l); +} + +.is-background-warning-05, +.has-background-warning-05 { + --bulma-background-l: var(--bulma-warning-05-l); +} + +.is-color-warning-05-invert, +.has-text-warning-05-invert { + --bulma-color-l: var(--bulma-warning-05-invert-l); +} + +.is-background-warning-05-invert, +.has-background-warning-05-invert { + --bulma-background-l: var(--bulma-warning-05-invert-l); +} + +.is-color-warning-10, +.has-text-warning-10 { + --bulma-color-l: var(--bulma-warning-10-l); +} + +.is-background-warning-10, +.has-background-warning-10 { + --bulma-background-l: var(--bulma-warning-10-l); +} + +.is-color-warning-10-invert, +.has-text-warning-10-invert { + --bulma-color-l: var(--bulma-warning-10-invert-l); +} + +.is-background-warning-10-invert, +.has-background-warning-10-invert { + --bulma-background-l: var(--bulma-warning-10-invert-l); +} + +.is-color-warning-15, +.has-text-warning-15 { + --bulma-color-l: var(--bulma-warning-15-l); +} + +.is-background-warning-15, +.has-background-warning-15 { + --bulma-background-l: var(--bulma-warning-15-l); +} + +.is-color-warning-15-invert, +.has-text-warning-15-invert { + --bulma-color-l: var(--bulma-warning-15-invert-l); +} + +.is-background-warning-15-invert, +.has-background-warning-15-invert { + --bulma-background-l: var(--bulma-warning-15-invert-l); +} + +.is-color-warning-20, +.has-text-warning-20 { + --bulma-color-l: var(--bulma-warning-20-l); +} + +.is-background-warning-20, +.has-background-warning-20 { + --bulma-background-l: var(--bulma-warning-20-l); +} + +.is-color-warning-20-invert, +.has-text-warning-20-invert { + --bulma-color-l: var(--bulma-warning-20-invert-l); +} + +.is-background-warning-20-invert, +.has-background-warning-20-invert { + --bulma-background-l: var(--bulma-warning-20-invert-l); +} + +.is-color-warning-25, +.has-text-warning-25 { + --bulma-color-l: var(--bulma-warning-25-l); +} + +.is-background-warning-25, +.has-background-warning-25 { + --bulma-background-l: var(--bulma-warning-25-l); +} + +.is-color-warning-25-invert, +.has-text-warning-25-invert { + --bulma-color-l: var(--bulma-warning-25-invert-l); +} + +.is-background-warning-25-invert, +.has-background-warning-25-invert { + --bulma-background-l: var(--bulma-warning-25-invert-l); +} + +.is-color-warning-30, +.has-text-warning-30 { + --bulma-color-l: var(--bulma-warning-30-l); +} + +.is-background-warning-30, +.has-background-warning-30 { + --bulma-background-l: var(--bulma-warning-30-l); +} + +.is-color-warning-30-invert, +.has-text-warning-30-invert { + --bulma-color-l: var(--bulma-warning-30-invert-l); +} + +.is-background-warning-30-invert, +.has-background-warning-30-invert { + --bulma-background-l: var(--bulma-warning-30-invert-l); +} + +.is-color-warning-35, +.has-text-warning-35 { + --bulma-color-l: var(--bulma-warning-35-l); +} + +.is-background-warning-35, +.has-background-warning-35 { + --bulma-background-l: var(--bulma-warning-35-l); +} + +.is-color-warning-35-invert, +.has-text-warning-35-invert { + --bulma-color-l: var(--bulma-warning-35-invert-l); +} + +.is-background-warning-35-invert, +.has-background-warning-35-invert { + --bulma-background-l: var(--bulma-warning-35-invert-l); +} + +.is-color-warning-40, +.has-text-warning-40 { + --bulma-color-l: var(--bulma-warning-40-l); +} + +.is-background-warning-40, +.has-background-warning-40 { + --bulma-background-l: var(--bulma-warning-40-l); +} + +.is-color-warning-40-invert, +.has-text-warning-40-invert { + --bulma-color-l: var(--bulma-warning-40-invert-l); +} + +.is-background-warning-40-invert, +.has-background-warning-40-invert { + --bulma-background-l: var(--bulma-warning-40-invert-l); +} + +.is-color-warning-45, +.has-text-warning-45 { + --bulma-color-l: var(--bulma-warning-45-l); +} + +.is-background-warning-45, +.has-background-warning-45 { + --bulma-background-l: var(--bulma-warning-45-l); +} + +.is-color-warning-45-invert, +.has-text-warning-45-invert { + --bulma-color-l: var(--bulma-warning-45-invert-l); +} + +.is-background-warning-45-invert, +.has-background-warning-45-invert { + --bulma-background-l: var(--bulma-warning-45-invert-l); +} + +.is-color-warning-50, +.has-text-warning-50 { + --bulma-color-l: var(--bulma-warning-50-l); +} + +.is-background-warning-50, +.has-background-warning-50 { + --bulma-background-l: var(--bulma-warning-50-l); +} + +.is-color-warning-50-invert, +.has-text-warning-50-invert { + --bulma-color-l: var(--bulma-warning-50-invert-l); +} + +.is-background-warning-50-invert, +.has-background-warning-50-invert { + --bulma-background-l: var(--bulma-warning-50-invert-l); +} + +.is-color-warning-55, +.has-text-warning-55 { + --bulma-color-l: var(--bulma-warning-55-l); +} + +.is-background-warning-55, +.has-background-warning-55 { + --bulma-background-l: var(--bulma-warning-55-l); +} + +.is-color-warning-55-invert, +.has-text-warning-55-invert { + --bulma-color-l: var(--bulma-warning-55-invert-l); +} + +.is-background-warning-55-invert, +.has-background-warning-55-invert { + --bulma-background-l: var(--bulma-warning-55-invert-l); +} + +.is-color-warning-60, +.has-text-warning-60 { + --bulma-color-l: var(--bulma-warning-60-l); +} + +.is-background-warning-60, +.has-background-warning-60 { + --bulma-background-l: var(--bulma-warning-60-l); +} + +.is-color-warning-60-invert, +.has-text-warning-60-invert { + --bulma-color-l: var(--bulma-warning-60-invert-l); +} + +.is-background-warning-60-invert, +.has-background-warning-60-invert { + --bulma-background-l: var(--bulma-warning-60-invert-l); +} + +.is-color-warning-65, +.has-text-warning-65 { + --bulma-color-l: var(--bulma-warning-65-l); +} + +.is-background-warning-65, +.has-background-warning-65 { + --bulma-background-l: var(--bulma-warning-65-l); +} + +.is-color-warning-65-invert, +.has-text-warning-65-invert { + --bulma-color-l: var(--bulma-warning-65-invert-l); +} + +.is-background-warning-65-invert, +.has-background-warning-65-invert { + --bulma-background-l: var(--bulma-warning-65-invert-l); +} + +.is-color-warning-70, +.has-text-warning-70 { + --bulma-color-l: var(--bulma-warning-70-l); +} + +.is-background-warning-70, +.has-background-warning-70 { + --bulma-background-l: var(--bulma-warning-70-l); +} + +.is-color-warning-70-invert, +.has-text-warning-70-invert { + --bulma-color-l: var(--bulma-warning-70-invert-l); +} + +.is-background-warning-70-invert, +.has-background-warning-70-invert { + --bulma-background-l: var(--bulma-warning-70-invert-l); +} + +.is-color-warning-75, +.has-text-warning-75 { + --bulma-color-l: var(--bulma-warning-75-l); +} + +.is-background-warning-75, +.has-background-warning-75 { + --bulma-background-l: var(--bulma-warning-75-l); +} + +.is-color-warning-75-invert, +.has-text-warning-75-invert { + --bulma-color-l: var(--bulma-warning-75-invert-l); +} + +.is-background-warning-75-invert, +.has-background-warning-75-invert { + --bulma-background-l: var(--bulma-warning-75-invert-l); +} + +.is-color-warning-80, +.has-text-warning-80 { + --bulma-color-l: var(--bulma-warning-80-l); +} + +.is-background-warning-80, +.has-background-warning-80 { + --bulma-background-l: var(--bulma-warning-80-l); +} + +.is-color-warning-80-invert, +.has-text-warning-80-invert { + --bulma-color-l: var(--bulma-warning-80-invert-l); +} + +.is-background-warning-80-invert, +.has-background-warning-80-invert { + --bulma-background-l: var(--bulma-warning-80-invert-l); +} + +.is-color-warning-85, +.has-text-warning-85 { + --bulma-color-l: var(--bulma-warning-85-l); +} + +.is-background-warning-85, +.has-background-warning-85 { + --bulma-background-l: var(--bulma-warning-85-l); +} + +.is-color-warning-85-invert, +.has-text-warning-85-invert { + --bulma-color-l: var(--bulma-warning-85-invert-l); +} + +.is-background-warning-85-invert, +.has-background-warning-85-invert { + --bulma-background-l: var(--bulma-warning-85-invert-l); +} + +.is-color-warning-90, +.has-text-warning-90 { + --bulma-color-l: var(--bulma-warning-90-l); +} + +.is-background-warning-90, +.has-background-warning-90 { + --bulma-background-l: var(--bulma-warning-90-l); +} + +.is-color-warning-90-invert, +.has-text-warning-90-invert { + --bulma-color-l: var(--bulma-warning-90-invert-l); +} + +.is-background-warning-90-invert, +.has-background-warning-90-invert { + --bulma-background-l: var(--bulma-warning-90-invert-l); +} + +.is-color-warning-95, +.has-text-warning-95 { + --bulma-color-l: var(--bulma-warning-95-l); +} + +.is-background-warning-95, +.has-background-warning-95 { + --bulma-background-l: var(--bulma-warning-95-l); +} + +.is-color-warning-95-invert, +.has-text-warning-95-invert { + --bulma-color-l: var(--bulma-warning-95-invert-l); +} + +.is-background-warning-95-invert, +.has-background-warning-95-invert { + --bulma-background-l: var(--bulma-warning-95-invert-l); +} + +.is-color-warning-100, +.has-text-warning-100 { + --bulma-color-l: var(--bulma-warning-100-l); +} + +.is-background-warning-100, +.has-background-warning-100 { + --bulma-background-l: var(--bulma-warning-100-l); +} + +.is-color-warning-100-invert, +.has-text-warning-100-invert { + --bulma-color-l: var(--bulma-warning-100-invert-l); +} + +.is-background-warning-100-invert, +.has-background-warning-100-invert { + --bulma-background-l: var(--bulma-warning-100-invert-l); +} + +a.is-color-warning:hover, a.is-color-warning:focus-visible, +button.is-color-warning:hover, +button.is-color-warning:focus-visible, +is-color-warning.is-hoverable:hover, +is-color-warning.is-hoverable:focus-visible, +a.has-text-warning:hover, +a.has-text-warning:focus-visible, +button.has-text-warning:hover, +button.has-text-warning:focus-visible, +has-text-warning.is-hoverable:hover, +has-text-warning.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-warning:active, +button.is-color-warning:active, +is-color-warning.is-hoverable:active, +a.has-text-warning:active, +button.has-text-warning:active, +has-text-warning.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-warning:hover, a.is-background-warning:focus-visible, +button.is-background-warning:hover, +button.is-background-warning:focus-visible, +is-background-warning.is-hoverable:hover, +is-background-warning.is-hoverable:focus-visible, +a.has-background-warning:hover, +a.has-background-warning:focus-visible, +button.has-background-warning:hover, +button.has-background-warning:focus-visible, +has-background-warning.is-hoverable:hover, +has-background-warning.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-warning:active, +button.is-background-warning:active, +is-background-warning.is-hoverable:active, +a.has-background-warning:active, +button.has-background-warning:active, +has-background-warning.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-warning { + --h: var(--bulma-warning-h); + --s: var(--bulma-warning-s); + --l: var(--bulma-warning-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-warning-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-warning-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-warning-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-warning-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-warning-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-warning-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-warning-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-warning-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-warning-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-warning-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-warning-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-warning-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-warning-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-warning-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-warning-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-warning-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-warning-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-warning-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-warning-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-warning-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-warning-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +[class*=is-color-danger], +[class*=has-text-danger] { + --bulma-color-l: var(--bulma-danger-l); + --bulma-color-l-delta: 0%; + color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-color-l) + var(--bulma-color-l-delta))) !important; +} + +[class*=is-background-danger], +[class*=has-background-danger] { + --bulma-background-l: var(--bulma-danger-l); + --bulma-background-l-delta: 0%; + background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), calc(var(--bulma-background-l) + var(--bulma-background-l-delta))) !important; +} + +.is-color-danger-invert, +.has-text-danger-invert { + --bulma-color-l: var(--bulma-danger-invert-l); +} + +.is-background-danger-invert, +.has-background-danger-invert { + --bulma-background-l: var(--bulma-danger-invert-l); +} + +.is-color-danger-on-scheme, +.has-text-danger-on-scheme { + --bulma-color-l: var(--bulma-danger-on-scheme-l); +} + +.is-background-danger-on-scheme, +.has-background-danger-on-scheme { + --bulma-background-l: var(--bulma-danger-on-scheme-l); +} + +.is-color-danger-light, +.has-text-danger-light { + --bulma-color-l: var(--bulma-danger-light-l); +} + +.is-background-danger-light, +.has-background-danger-light { + --bulma-background-l: var(--bulma-danger-light-l); +} + +.is-color-danger-light-invert, +.has-text-danger-light-invert { + --bulma-color-l: var(--bulma-danger-light-invert-l); +} + +.is-background-danger-light-invert, +.has-background-danger-light-invert { + --bulma-background-l: var(--bulma-danger-light-invert-l); +} + +.is-color-danger-dark, +.has-text-danger-dark { + --bulma-color-l: var(--bulma-danger-dark-l); +} + +.is-background-danger-dark, +.has-background-danger-dark { + --bulma-background-l: var(--bulma-danger-dark-l); +} + +.is-color-danger-dark-invert, +.has-text-danger-dark-invert { + --bulma-color-l: var(--bulma-danger-dark-invert-l); +} + +.is-background-danger-dark-invert, +.has-background-danger-dark-invert { + --bulma-background-l: var(--bulma-danger-dark-invert-l); +} + +.is-color-danger-soft, +.has-text-danger-soft { + --bulma-color-l: var(--bulma-soft-l); +} + +.is-background-danger-soft, +.has-background-danger-soft { + --bulma-background-l: var(--bulma-soft-l); +} + +.is-color-danger-bold, +.has-text-danger-bold { + --bulma-color-l: var(--bulma-bold-l); +} + +.is-background-danger-bold, +.has-background-danger-bold { + --bulma-background-l: var(--bulma-bold-l); +} + +.is-color-danger-soft-invert, +.has-text-danger-soft-invert { + --bulma-color-l: var(--bulma-soft-invert-l); +} + +.is-background-danger-soft-invert, +.has-background-danger-soft-invert { + --bulma-background-l: var(--bulma-soft-invert-l); +} + +.is-color-danger-bold-invert, +.has-text-danger-bold-invert { + --bulma-color-l: var(--bulma-bold-invert-l); +} + +.is-background-danger-bold-invert, +.has-background-danger-bold-invert { + --bulma-background-l: var(--bulma-bold-invert-l); +} + +.is-color-danger-00, +.has-text-danger-00 { + --bulma-color-l: var(--bulma-danger-00-l); +} + +.is-background-danger-00, +.has-background-danger-00 { + --bulma-background-l: var(--bulma-danger-00-l); +} + +.is-color-danger-00-invert, +.has-text-danger-00-invert { + --bulma-color-l: var(--bulma-danger-00-invert-l); +} + +.is-background-danger-00-invert, +.has-background-danger-00-invert { + --bulma-background-l: var(--bulma-danger-00-invert-l); +} + +.is-color-danger-05, +.has-text-danger-05 { + --bulma-color-l: var(--bulma-danger-05-l); +} + +.is-background-danger-05, +.has-background-danger-05 { + --bulma-background-l: var(--bulma-danger-05-l); +} + +.is-color-danger-05-invert, +.has-text-danger-05-invert { + --bulma-color-l: var(--bulma-danger-05-invert-l); +} + +.is-background-danger-05-invert, +.has-background-danger-05-invert { + --bulma-background-l: var(--bulma-danger-05-invert-l); +} + +.is-color-danger-10, +.has-text-danger-10 { + --bulma-color-l: var(--bulma-danger-10-l); +} + +.is-background-danger-10, +.has-background-danger-10 { + --bulma-background-l: var(--bulma-danger-10-l); +} + +.is-color-danger-10-invert, +.has-text-danger-10-invert { + --bulma-color-l: var(--bulma-danger-10-invert-l); +} + +.is-background-danger-10-invert, +.has-background-danger-10-invert { + --bulma-background-l: var(--bulma-danger-10-invert-l); +} + +.is-color-danger-15, +.has-text-danger-15 { + --bulma-color-l: var(--bulma-danger-15-l); +} + +.is-background-danger-15, +.has-background-danger-15 { + --bulma-background-l: var(--bulma-danger-15-l); +} + +.is-color-danger-15-invert, +.has-text-danger-15-invert { + --bulma-color-l: var(--bulma-danger-15-invert-l); +} + +.is-background-danger-15-invert, +.has-background-danger-15-invert { + --bulma-background-l: var(--bulma-danger-15-invert-l); +} + +.is-color-danger-20, +.has-text-danger-20 { + --bulma-color-l: var(--bulma-danger-20-l); +} + +.is-background-danger-20, +.has-background-danger-20 { + --bulma-background-l: var(--bulma-danger-20-l); +} + +.is-color-danger-20-invert, +.has-text-danger-20-invert { + --bulma-color-l: var(--bulma-danger-20-invert-l); +} + +.is-background-danger-20-invert, +.has-background-danger-20-invert { + --bulma-background-l: var(--bulma-danger-20-invert-l); +} + +.is-color-danger-25, +.has-text-danger-25 { + --bulma-color-l: var(--bulma-danger-25-l); +} + +.is-background-danger-25, +.has-background-danger-25 { + --bulma-background-l: var(--bulma-danger-25-l); +} + +.is-color-danger-25-invert, +.has-text-danger-25-invert { + --bulma-color-l: var(--bulma-danger-25-invert-l); +} + +.is-background-danger-25-invert, +.has-background-danger-25-invert { + --bulma-background-l: var(--bulma-danger-25-invert-l); +} + +.is-color-danger-30, +.has-text-danger-30 { + --bulma-color-l: var(--bulma-danger-30-l); +} + +.is-background-danger-30, +.has-background-danger-30 { + --bulma-background-l: var(--bulma-danger-30-l); +} + +.is-color-danger-30-invert, +.has-text-danger-30-invert { + --bulma-color-l: var(--bulma-danger-30-invert-l); +} + +.is-background-danger-30-invert, +.has-background-danger-30-invert { + --bulma-background-l: var(--bulma-danger-30-invert-l); +} + +.is-color-danger-35, +.has-text-danger-35 { + --bulma-color-l: var(--bulma-danger-35-l); +} + +.is-background-danger-35, +.has-background-danger-35 { + --bulma-background-l: var(--bulma-danger-35-l); +} + +.is-color-danger-35-invert, +.has-text-danger-35-invert { + --bulma-color-l: var(--bulma-danger-35-invert-l); +} + +.is-background-danger-35-invert, +.has-background-danger-35-invert { + --bulma-background-l: var(--bulma-danger-35-invert-l); +} + +.is-color-danger-40, +.has-text-danger-40 { + --bulma-color-l: var(--bulma-danger-40-l); +} + +.is-background-danger-40, +.has-background-danger-40 { + --bulma-background-l: var(--bulma-danger-40-l); +} + +.is-color-danger-40-invert, +.has-text-danger-40-invert { + --bulma-color-l: var(--bulma-danger-40-invert-l); +} + +.is-background-danger-40-invert, +.has-background-danger-40-invert { + --bulma-background-l: var(--bulma-danger-40-invert-l); +} + +.is-color-danger-45, +.has-text-danger-45 { + --bulma-color-l: var(--bulma-danger-45-l); +} + +.is-background-danger-45, +.has-background-danger-45 { + --bulma-background-l: var(--bulma-danger-45-l); +} + +.is-color-danger-45-invert, +.has-text-danger-45-invert { + --bulma-color-l: var(--bulma-danger-45-invert-l); +} + +.is-background-danger-45-invert, +.has-background-danger-45-invert { + --bulma-background-l: var(--bulma-danger-45-invert-l); +} + +.is-color-danger-50, +.has-text-danger-50 { + --bulma-color-l: var(--bulma-danger-50-l); +} + +.is-background-danger-50, +.has-background-danger-50 { + --bulma-background-l: var(--bulma-danger-50-l); +} + +.is-color-danger-50-invert, +.has-text-danger-50-invert { + --bulma-color-l: var(--bulma-danger-50-invert-l); +} + +.is-background-danger-50-invert, +.has-background-danger-50-invert { + --bulma-background-l: var(--bulma-danger-50-invert-l); +} + +.is-color-danger-55, +.has-text-danger-55 { + --bulma-color-l: var(--bulma-danger-55-l); +} + +.is-background-danger-55, +.has-background-danger-55 { + --bulma-background-l: var(--bulma-danger-55-l); +} + +.is-color-danger-55-invert, +.has-text-danger-55-invert { + --bulma-color-l: var(--bulma-danger-55-invert-l); +} + +.is-background-danger-55-invert, +.has-background-danger-55-invert { + --bulma-background-l: var(--bulma-danger-55-invert-l); +} + +.is-color-danger-60, +.has-text-danger-60 { + --bulma-color-l: var(--bulma-danger-60-l); +} + +.is-background-danger-60, +.has-background-danger-60 { + --bulma-background-l: var(--bulma-danger-60-l); +} + +.is-color-danger-60-invert, +.has-text-danger-60-invert { + --bulma-color-l: var(--bulma-danger-60-invert-l); +} + +.is-background-danger-60-invert, +.has-background-danger-60-invert { + --bulma-background-l: var(--bulma-danger-60-invert-l); +} + +.is-color-danger-65, +.has-text-danger-65 { + --bulma-color-l: var(--bulma-danger-65-l); +} + +.is-background-danger-65, +.has-background-danger-65 { + --bulma-background-l: var(--bulma-danger-65-l); +} + +.is-color-danger-65-invert, +.has-text-danger-65-invert { + --bulma-color-l: var(--bulma-danger-65-invert-l); +} + +.is-background-danger-65-invert, +.has-background-danger-65-invert { + --bulma-background-l: var(--bulma-danger-65-invert-l); +} + +.is-color-danger-70, +.has-text-danger-70 { + --bulma-color-l: var(--bulma-danger-70-l); +} + +.is-background-danger-70, +.has-background-danger-70 { + --bulma-background-l: var(--bulma-danger-70-l); +} + +.is-color-danger-70-invert, +.has-text-danger-70-invert { + --bulma-color-l: var(--bulma-danger-70-invert-l); +} + +.is-background-danger-70-invert, +.has-background-danger-70-invert { + --bulma-background-l: var(--bulma-danger-70-invert-l); +} + +.is-color-danger-75, +.has-text-danger-75 { + --bulma-color-l: var(--bulma-danger-75-l); +} + +.is-background-danger-75, +.has-background-danger-75 { + --bulma-background-l: var(--bulma-danger-75-l); +} + +.is-color-danger-75-invert, +.has-text-danger-75-invert { + --bulma-color-l: var(--bulma-danger-75-invert-l); +} + +.is-background-danger-75-invert, +.has-background-danger-75-invert { + --bulma-background-l: var(--bulma-danger-75-invert-l); +} + +.is-color-danger-80, +.has-text-danger-80 { + --bulma-color-l: var(--bulma-danger-80-l); +} + +.is-background-danger-80, +.has-background-danger-80 { + --bulma-background-l: var(--bulma-danger-80-l); +} + +.is-color-danger-80-invert, +.has-text-danger-80-invert { + --bulma-color-l: var(--bulma-danger-80-invert-l); +} + +.is-background-danger-80-invert, +.has-background-danger-80-invert { + --bulma-background-l: var(--bulma-danger-80-invert-l); +} + +.is-color-danger-85, +.has-text-danger-85 { + --bulma-color-l: var(--bulma-danger-85-l); +} + +.is-background-danger-85, +.has-background-danger-85 { + --bulma-background-l: var(--bulma-danger-85-l); +} + +.is-color-danger-85-invert, +.has-text-danger-85-invert { + --bulma-color-l: var(--bulma-danger-85-invert-l); +} + +.is-background-danger-85-invert, +.has-background-danger-85-invert { + --bulma-background-l: var(--bulma-danger-85-invert-l); +} + +.is-color-danger-90, +.has-text-danger-90 { + --bulma-color-l: var(--bulma-danger-90-l); +} + +.is-background-danger-90, +.has-background-danger-90 { + --bulma-background-l: var(--bulma-danger-90-l); +} + +.is-color-danger-90-invert, +.has-text-danger-90-invert { + --bulma-color-l: var(--bulma-danger-90-invert-l); +} + +.is-background-danger-90-invert, +.has-background-danger-90-invert { + --bulma-background-l: var(--bulma-danger-90-invert-l); +} + +.is-color-danger-95, +.has-text-danger-95 { + --bulma-color-l: var(--bulma-danger-95-l); +} + +.is-background-danger-95, +.has-background-danger-95 { + --bulma-background-l: var(--bulma-danger-95-l); +} + +.is-color-danger-95-invert, +.has-text-danger-95-invert { + --bulma-color-l: var(--bulma-danger-95-invert-l); +} + +.is-background-danger-95-invert, +.has-background-danger-95-invert { + --bulma-background-l: var(--bulma-danger-95-invert-l); +} + +.is-color-danger-100, +.has-text-danger-100 { + --bulma-color-l: var(--bulma-danger-100-l); +} + +.is-background-danger-100, +.has-background-danger-100 { + --bulma-background-l: var(--bulma-danger-100-l); +} + +.is-color-danger-100-invert, +.has-text-danger-100-invert { + --bulma-color-l: var(--bulma-danger-100-invert-l); +} + +.is-background-danger-100-invert, +.has-background-danger-100-invert { + --bulma-background-l: var(--bulma-danger-100-invert-l); +} + +a.is-color-danger:hover, a.is-color-danger:focus-visible, +button.is-color-danger:hover, +button.is-color-danger:focus-visible, +is-color-danger.is-hoverable:hover, +is-color-danger.is-hoverable:focus-visible, +a.has-text-danger:hover, +a.has-text-danger:focus-visible, +button.has-text-danger:hover, +button.has-text-danger:focus-visible, +has-text-danger.is-hoverable:hover, +has-text-danger.is-hoverable:focus-visible { + --bulma-color-l-delta: var(--bulma-hover-color-l-delta); +} +a.is-color-danger:active, +button.is-color-danger:active, +is-color-danger.is-hoverable:active, +a.has-text-danger:active, +button.has-text-danger:active, +has-text-danger.is-hoverable:active { + --bulma-color-l-delta: var(--bulma-active-color-l-delta); +} + +a.is-background-danger:hover, a.is-background-danger:focus-visible, +button.is-background-danger:hover, +button.is-background-danger:focus-visible, +is-background-danger.is-hoverable:hover, +is-background-danger.is-hoverable:focus-visible, +a.has-background-danger:hover, +a.has-background-danger:focus-visible, +button.has-background-danger:hover, +button.has-background-danger:focus-visible, +has-background-danger.is-hoverable:hover, +has-background-danger.is-hoverable:focus-visible { + --bulma-background-l-delta: var(--bulma-hover-background-l-delta); +} +a.is-background-danger:active, +button.is-background-danger:active, +is-background-danger.is-hoverable:active, +a.has-background-danger:active, +button.has-background-danger:active, +has-background-danger.is-hoverable:active { + --bulma-background-l-delta: var(--bulma-active-background-l-delta); +} + +.is-palette-danger { + --h: var(--bulma-danger-h); + --s: var(--bulma-danger-s); + --l: var(--bulma-danger-l); + --color: hsl(var(--h), var(--s), var(--l)); + --00-l: var(--bulma-danger-00-l); + --color-00: hsl(var(--h), var(--s), var(--00-l)); + --05-l: var(--bulma-danger-05-l); + --color-05: hsl(var(--h), var(--s), var(--05-l)); + --10-l: var(--bulma-danger-10-l); + --color-10: hsl(var(--h), var(--s), var(--10-l)); + --15-l: var(--bulma-danger-15-l); + --color-15: hsl(var(--h), var(--s), var(--15-l)); + --20-l: var(--bulma-danger-20-l); + --color-20: hsl(var(--h), var(--s), var(--20-l)); + --25-l: var(--bulma-danger-25-l); + --color-25: hsl(var(--h), var(--s), var(--25-l)); + --30-l: var(--bulma-danger-30-l); + --color-30: hsl(var(--h), var(--s), var(--30-l)); + --35-l: var(--bulma-danger-35-l); + --color-35: hsl(var(--h), var(--s), var(--35-l)); + --40-l: var(--bulma-danger-40-l); + --color-40: hsl(var(--h), var(--s), var(--40-l)); + --45-l: var(--bulma-danger-45-l); + --color-45: hsl(var(--h), var(--s), var(--45-l)); + --50-l: var(--bulma-danger-50-l); + --color-50: hsl(var(--h), var(--s), var(--50-l)); + --55-l: var(--bulma-danger-55-l); + --color-55: hsl(var(--h), var(--s), var(--55-l)); + --60-l: var(--bulma-danger-60-l); + --color-60: hsl(var(--h), var(--s), var(--60-l)); + --65-l: var(--bulma-danger-65-l); + --color-65: hsl(var(--h), var(--s), var(--65-l)); + --70-l: var(--bulma-danger-70-l); + --color-70: hsl(var(--h), var(--s), var(--70-l)); + --75-l: var(--bulma-danger-75-l); + --color-75: hsl(var(--h), var(--s), var(--75-l)); + --80-l: var(--bulma-danger-80-l); + --color-80: hsl(var(--h), var(--s), var(--80-l)); + --85-l: var(--bulma-danger-85-l); + --color-85: hsl(var(--h), var(--s), var(--85-l)); + --90-l: var(--bulma-danger-90-l); + --color-90: hsl(var(--h), var(--s), var(--90-l)); + --95-l: var(--bulma-danger-95-l); + --color-95: hsl(var(--h), var(--s), var(--95-l)); + --100-l: var(--bulma-danger-100-l); + --color-100: hsl(var(--h), var(--s), var(--100-l)); +} + +.is-color-black-bis, +.has-text-black-bis { + color: hsl(221, 14%, 9%) !important; +} + +.is-background-black-bis, +.has-background-black-bis { + background-color: hsl(221, 14%, 9%) !important; +} + +.is-color-black-ter, +.has-text-black-ter { + color: hsl(221, 14%, 14%) !important; +} + +.is-background-black-ter, +.has-background-black-ter { + background-color: hsl(221, 14%, 14%) !important; +} + +.is-color-grey-darker, +.has-text-grey-darker { + color: hsl(221, 14%, 21%) !important; +} + +.is-background-grey-darker, +.has-background-grey-darker { + background-color: hsl(221, 14%, 21%) !important; +} + +.is-color-grey-dark, +.has-text-grey-dark { + color: hsl(221, 14%, 29%) !important; +} + +.is-background-grey-dark, +.has-background-grey-dark { + background-color: hsl(221, 14%, 29%) !important; +} + +.is-color-grey, +.has-text-grey { + color: hsl(221, 14%, 48%) !important; +} + +.is-background-grey, +.has-background-grey { + background-color: hsl(221, 14%, 48%) !important; +} + +.is-color-grey-light, +.has-text-grey-light { + color: hsl(221, 14%, 71%) !important; +} + +.is-background-grey-light, +.has-background-grey-light { + background-color: hsl(221, 14%, 71%) !important; +} + +.is-color-grey-lighter, +.has-text-grey-lighter { + color: hsl(221, 14%, 86%) !important; +} + +.is-background-grey-lighter, +.has-background-grey-lighter { + background-color: hsl(221, 14%, 86%) !important; +} + +.is-color-white-ter, +.has-text-white-ter { + color: hsl(221, 14%, 96%) !important; +} + +.is-background-white-ter, +.has-background-white-ter { + background-color: hsl(221, 14%, 96%) !important; +} + +.is-color-white-bis, +.has-text-white-bis { + color: hsl(221, 14%, 98%) !important; +} + +.is-background-white-bis, +.has-background-white-bis { + background-color: hsl(221, 14%, 98%) !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-float-left, +.is-pulled-left { + float: left !important; +} + +.is-float-right, +.is-pulled-right { + float: right !important; +} + +.is-float-none { + float: none !important; +} + +.is-clear-both { + clear: both !important; +} + +.is-clear-left { + clear: left !important; +} + +.is-clear-none { + clear: none !important; +} + +.is-clear-right { + clear: right !important; +} + +.is-gapless { + gap: 0 !important; +} + +.is-gap-0 { + gap: 0rem !important; +} + +.is-gap-0\.5 { + gap: 0.25rem !important; +} + +.is-gap-1 { + gap: 0.5rem !important; +} + +.is-gap-1\.5 { + gap: 0.75rem !important; +} + +.is-gap-2 { + gap: 1rem !important; +} + +.is-gap-2\.5 { + gap: 1.25rem !important; +} + +.is-gap-3 { + gap: 1.5rem !important; +} + +.is-gap-3\.5 { + gap: 1.75rem !important; +} + +.is-gap-4 { + gap: 2rem !important; +} + +.is-gap-4\.5 { + gap: 2.25rem !important; +} + +.is-gap-5 { + gap: 2.5rem !important; +} + +.is-gap-5\.5 { + gap: 2.75rem !important; +} + +.is-gap-6 { + gap: 3rem !important; +} + +.is-gap-6\.5 { + gap: 3.25rem !important; +} + +.is-gap-7 { + gap: 3.5rem !important; +} + +.is-gap-7\.5 { + gap: 3.75rem !important; +} + +.is-gap-8 { + gap: 4rem !important; +} + +.is-column-gap-0 { + column-gap: 0rem !important; +} + +.is-column-gap-0\.5 { + column-gap: 0.25rem !important; +} + +.is-column-gap-1 { + column-gap: 0.5rem !important; +} + +.is-column-gap-1\.5 { + column-gap: 0.75rem !important; +} + +.is-column-gap-2 { + column-gap: 1rem !important; +} + +.is-column-gap-2\.5 { + column-gap: 1.25rem !important; +} + +.is-column-gap-3 { + column-gap: 1.5rem !important; +} + +.is-column-gap-3\.5 { + column-gap: 1.75rem !important; +} + +.is-column-gap-4 { + column-gap: 2rem !important; +} + +.is-column-gap-4\.5 { + column-gap: 2.25rem !important; +} + +.is-column-gap-5 { + column-gap: 2.5rem !important; +} + +.is-column-gap-5\.5 { + column-gap: 2.75rem !important; +} + +.is-column-gap-6 { + column-gap: 3rem !important; +} + +.is-column-gap-6\.5 { + column-gap: 3.25rem !important; +} + +.is-column-gap-7 { + column-gap: 3.5rem !important; +} + +.is-column-gap-7\.5 { + column-gap: 3.75rem !important; +} + +.is-column-gap-8 { + column-gap: 4rem !important; +} + +.is-row-gap-0 { + row-gap: 0rem !important; +} + +.is-row-gap-0\.5 { + row-gap: 0.25rem !important; +} + +.is-row-gap-1 { + row-gap: 0.5rem !important; +} + +.is-row-gap-1\.5 { + row-gap: 0.75rem !important; +} + +.is-row-gap-2 { + row-gap: 1rem !important; +} + +.is-row-gap-2\.5 { + row-gap: 1.25rem !important; +} + +.is-row-gap-3 { + row-gap: 1.5rem !important; +} + +.is-row-gap-3\.5 { + row-gap: 1.75rem !important; +} + +.is-row-gap-4 { + row-gap: 2rem !important; +} + +.is-row-gap-4\.5 { + row-gap: 2.25rem !important; +} + +.is-row-gap-5 { + row-gap: 2.5rem !important; +} + +.is-row-gap-5\.5 { + row-gap: 2.75rem !important; +} + +.is-row-gap-6 { + row-gap: 3rem !important; +} + +.is-row-gap-6\.5 { + row-gap: 3.25rem !important; +} + +.is-row-gap-7 { + row-gap: 3.5rem !important; +} + +.is-row-gap-7\.5 { + row-gap: 3.75rem !important; +} + +.is-row-gap-8 { + row-gap: 4rem !important; +} + +.is-clipped { + overflow: hidden !important; +} + +.is-overflow-auto { + overflow: auto !important; +} + +.is-overflow-x-auto { + overflow-x: auto !important; +} + +.is-overflow-y-auto { + overflow-y: auto !important; +} + +.is-overflow-clip { + overflow: clip !important; +} + +.is-overflow-x-clip { + overflow-x: clip !important; +} + +.is-overflow-y-clip { + overflow-y: clip !important; +} + +.is-overflow-hidden { + overflow: hidden !important; +} + +.is-overflow-x-hidden { + overflow-x: hidden !important; +} + +.is-overflow-y-hidden { + overflow-y: hidden !important; +} + +.is-overflow-scroll { + overflow: scroll !important; +} + +.is-overflow-x-scroll { + overflow-x: scroll !important; +} + +.is-overflow-y-scroll { + overflow-y: scroll !important; +} + +.is-overflow-visible { + overflow: visible !important; +} + +.is-overflow-x-visible { + overflow-x: visible !important; +} + +.is-overflow-y-visible { + overflow-y: visible !important; +} + +.is-relative { + position: relative !important; +} + +.is-position-absolute { + position: absolute !important; +} + +.is-position-fixed { + position: fixed !important; +} + +.is-position-relative { + position: relative !important; +} + +.is-position-static { + position: static !important; +} + +.is-position-sticky { + position: sticky !important; +} + +.marginless { + margin: 0 !important; +} + +.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: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-secondary { + font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-sans-serif { + font-family: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-monospace { + font-family: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace !important; +} + +.is-family-code { + font-family: "Inconsolata", "Hack", "SF Mono", "Roboto Mono", "Source Code Pro", "Ubuntu Mono", monospace !important; +} + +.is-display-none, +.is-hidden { + display: none !important; +} + +.is-display-block, +.is-block { + display: block !important; +} + +@media screen and (max-width: 768px) { + .is-display-block-mobile, + .is-block-mobile { + display: block !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-block-tablet, + .is-block-tablet { + display: block !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-block-tablet-only, + .is-block-tablet-only { + display: block !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-block-touch, + .is-block-touch { + display: block !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-block-desktop, + .is-block-desktop { + display: block !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-block-desktop-only, + .is-block-desktop-only { + display: block !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-block-widescreen, + .is-block-widescreen { + display: block !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-block-widescreen-only, + .is-block-widescreen-only { + display: block !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-block-fullhd, + .is-block-fullhd { + display: block !important; + } +} +.is-display-flex, +.is-flex { + display: flex !important; +} + +@media screen and (max-width: 768px) { + .is-display-flex-mobile, + .is-flex-mobile { + display: flex !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-flex-tablet, + .is-flex-tablet { + display: flex !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-flex-tablet-only, + .is-flex-tablet-only { + display: flex !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-flex-touch, + .is-flex-touch { + display: flex !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-flex-desktop, + .is-flex-desktop { + display: flex !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-flex-desktop-only, + .is-flex-desktop-only { + display: flex !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-flex-widescreen, + .is-flex-widescreen { + display: flex !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-flex-widescreen-only, + .is-flex-widescreen-only { + display: flex !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-flex-fullhd, + .is-flex-fullhd { + display: flex !important; + } +} +.is-display-inline, +.is-inline { + display: inline !important; +} + +@media screen and (max-width: 768px) { + .is-display-inline-mobile, + .is-inline-mobile { + display: inline !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-inline-tablet, + .is-inline-tablet { + display: inline !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-inline-tablet-only, + .is-inline-tablet-only { + display: inline !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-inline-touch, + .is-inline-touch { + display: inline !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-inline-desktop, + .is-inline-desktop { + display: inline !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-inline-desktop-only, + .is-inline-desktop-only { + display: inline !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-inline-widescreen, + .is-inline-widescreen { + display: inline !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-inline-widescreen-only, + .is-inline-widescreen-only { + display: inline !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-inline-fullhd, + .is-inline-fullhd { + display: inline !important; + } +} +.is-display-inline-block, +.is-inline-block { + display: inline-block !important; +} + +@media screen and (max-width: 768px) { + .is-display-inline-block-mobile, + .is-inline-block-mobile { + display: inline-block !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-inline-block-tablet, + .is-inline-block-tablet { + display: inline-block !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-inline-block-tablet-only, + .is-inline-block-tablet-only { + display: inline-block !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-inline-block-touch, + .is-inline-block-touch { + display: inline-block !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-inline-block-desktop, + .is-inline-block-desktop { + display: inline-block !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-inline-block-desktop-only, + .is-inline-block-desktop-only { + display: inline-block !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-inline-block-widescreen, + .is-inline-block-widescreen { + display: inline-block !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-inline-block-widescreen-only, + .is-inline-block-widescreen-only { + display: inline-block !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-inline-block-fullhd, + .is-inline-block-fullhd { + display: inline-block !important; + } +} +.is-display-inline-flex, +.is-inline-flex { + display: inline-flex !important; +} + +@media screen and (max-width: 768px) { + .is-display-inline-flex-mobile, + .is-inline-flex-mobile { + display: inline-flex !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-inline-flex-tablet, + .is-inline-flex-tablet { + display: inline-flex !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-inline-flex-tablet-only, + .is-inline-flex-tablet-only { + display: inline-flex !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-inline-flex-touch, + .is-inline-flex-touch { + display: inline-flex !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-inline-flex-desktop, + .is-inline-flex-desktop { + display: inline-flex !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-inline-flex-desktop-only, + .is-inline-flex-desktop-only { + display: inline-flex !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-inline-flex-widescreen, + .is-inline-flex-widescreen { + display: inline-flex !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-inline-flex-widescreen-only, + .is-inline-flex-widescreen-only { + display: inline-flex !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-inline-flex-fullhd, + .is-inline-flex-fullhd { + display: inline-flex !important; + } +} +.is-display-grid, +.is-grid { + display: grid !important; +} + +@media screen and (max-width: 768px) { + .is-display-grid-mobile, + .is-grid-mobile { + display: grid !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-grid-tablet, + .is-grid-tablet { + display: grid !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-grid-tablet-only, + .is-grid-tablet-only { + display: grid !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-grid-touch, + .is-grid-touch { + display: grid !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-grid-desktop, + .is-grid-desktop { + display: grid !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-grid-desktop-only, + .is-grid-desktop-only { + display: grid !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-grid-widescreen, + .is-grid-widescreen { + display: grid !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-grid-widescreen-only, + .is-grid-widescreen-only { + display: grid !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-grid-fullhd, + .is-grid-fullhd { + display: grid !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-display-none-mobile, + .is-hidden-mobile { + display: none !important; + } +} +@media screen and (min-width: 769px), print { + .is-display-none-tablet, + .is-hidden-tablet { + display: none !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-display-none-tablet-only, + .is-hidden-tablet-only { + display: none !important; + } +} +@media screen and (max-width: 1023px) { + .is-display-none-touch, + .is-hidden-touch { + display: none !important; + } +} +@media screen and (min-width: 1024px) { + .is-display-none-desktop, + .is-hidden-desktop { + display: none !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-display-none-desktop-only, + .is-hidden-desktop-only { + display: none !important; + } +} +@media screen and (min-width: 1216px) { + .is-display-none-widescreen, + .is-hidden-widescreen { + display: none !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-display-none-widescreen-only, + .is-hidden-widescreen-only { + display: none !important; + } +} +@media screen and (min-width: 1408px) { + .is-display-none-fullhd, + .is-hidden-fullhd { + display: none !important; + } +} +.is-visibility-hidden, +.is-invisible { + visibility: hidden !important; +} + +@media screen and (max-width: 768px) { + .is-visibility-hidden-mobile, + .is-invisible-mobile { + visibility: hidden !important; + } +} +@media screen and (min-width: 769px), print { + .is-visibility-hidden-tablet, + .is-invisible-tablet { + visibility: hidden !important; + } +} +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-visibility-hidden-tablet-only, + .is-invisible-tablet-only { + visibility: hidden !important; + } +} +@media screen and (max-width: 1023px) { + .is-visibility-hidden-touch, + .is-invisible-touch { + visibility: hidden !important; + } +} +@media screen and (min-width: 1024px) { + .is-visibility-hidden-desktop, + .is-invisible-desktop { + visibility: hidden !important; + } +} +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-visibility-hidden-desktop-only, + .is-invisible-desktop-only { + visibility: hidden !important; + } +} +@media screen and (min-width: 1216px) { + .is-visibility-hidden-widescreen, + .is-invisible-widescreen { + visibility: hidden !important; + } +} +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-visibility-hidden-widescreen-only, + .is-invisible-widescreen-only { + visibility: hidden !important; + } +} +@media screen and (min-width: 1408px) { + .is-visibility-hidden-fullhd, + .is-invisible-fullhd { + visibility: hidden !important; + } +} +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-clickable { + cursor: pointer !important; + pointer-events: all !important; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/web/assets/css/style.scss b/web/assets/css/style.scss new file mode 100644 index 0000000..1a87f74 --- /dev/null +++ b/web/assets/css/style.scss @@ -0,0 +1,15 @@ +// Set your brand colors +$custom-primary: #abc7ff; +$custom-link: #edb1ff; +$custom-info: #6715ef; + + +// Path to Bulma's sass folder +@use "sass" with ( + $primary: $custom-primary, + $info: $custom-info, + $link: $custom-link, +); + +// Import the Google Font +@import url("https://fonts.googleapis.com/css?family=Nunito:400,700"); \ No newline at end of file diff --git a/web/handlers/homePageHandler.go b/web/handlers/homePageHandler.go index 5b776c4..0e98e80 100644 --- a/web/handlers/homePageHandler.go +++ b/web/handlers/homePageHandler.go @@ -2,6 +2,7 @@ package handlers import ( g "github.com/maragudk/gomponents" + . "github.com/maragudk/gomponents/html" "net/http" "portfolio/web/components" ) @@ -19,5 +20,8 @@ func createHomeBody(w http.ResponseWriter, r *http.Request) []g.Node { return []g.Node{ components.Navbar(), + Main( + ID("main"), + ), } } diff --git a/web/handlers/pageTemplates.go b/web/handlers/pageTemplates.go index 13d299c..6581a15 100644 --- a/web/handlers/pageTemplates.go +++ b/web/handlers/pageTemplates.go @@ -4,9 +4,10 @@ import ( g "github.com/maragudk/gomponents" c "github.com/maragudk/gomponents/components" . "github.com/maragudk/gomponents/html" + "portfolio/web/components" ) -func Page(title string, body []g.Node) g.Node { +func Page(title string, body g.Node) g.Node { return c.HTML5(c.HTML5Props{ Title: title, @@ -14,8 +15,15 @@ func Page(title string, body []g.Node) g.Node { Head: []g.Node{ Script(Src("https://cdn.tailwindcss.com?plugins=typography")), Link(Rel("icon"), Type("image/x-icon"), Href("assets/images/favicon.ico")), - Link(Rel("stylesheet"), Href("https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css")), + //Link(Rel("stylesheet"), Href("https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css")), + Link(Rel("stylesheet"), Href("assets/css/style.css")), + }, + Body: []g.Node{ + components.Navbar(), + Main( + ID("main"), + body, + ), }, - Body: body, }) } diff --git a/web/handlers/projectPageHandler.go b/web/handlers/projectPageHandler.go index 819636d..c91c1a7 100644 --- a/web/handlers/projectPageHandler.go +++ b/web/handlers/projectPageHandler.go @@ -2,6 +2,7 @@ package handlers import ( g "github.com/maragudk/gomponents" + . "github.com/maragudk/gomponents/html" "net/http" "portfolio/web/components" "portfolio/web/services" @@ -16,10 +17,10 @@ func ProjectPageHandler(w http.ResponseWriter, r *http.Request) { } -func createProjectBody(w http.ResponseWriter, r *http.Request) []g.Node { +func createProjectBody(w http.ResponseWriter, r *http.Request) g.Node { - return []g.Node{ - components.Navbar(), + return Body( components.ProjectList(services.ReadProjectsJson()), - } + ) + }