From b73e183091d85887c0228f6b1c475a3f5f5a2e6d Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 14 Dec 2022 17:15:51 +0000 Subject: [PATCH] Init dark theme --- docs/.gitignore | 8 +- docs/_layouts/cypress.html | 22 +- docs/bulma.scss | 1 + docs/css/bulma.css | 1512 +++++++++++++++---------- docs/cyp/base/generic.html | 32 +- sass/components/card.scss | 2 +- sass/components/modal.scss | 2 +- sass/components/navbar.scss | 14 +- sass/components/pagination.scss | 2 +- sass/elements/box.scss | 4 +- sass/form/shared.scss | 2 +- sass/layout/hero.scss | 2 +- sass/themes/dark.scss | 64 ++ sass/themes/default.scss | 91 +- sass/utilities/css-variables.scss | 25 +- sass/utilities/derived-variables.scss | 66 +- sass/utilities/initial-variables.scss | 10 +- sass/utilities/mixins.scss | 6 +- 18 files changed, 1194 insertions(+), 671 deletions(-) create mode 100644 sass/themes/dark.scss diff --git a/docs/.gitignore b/docs/.gitignore index 1b8f16f3..14acf1d5 100644 --- a/docs/.gitignore +++ b/docs/.gitignore @@ -6,20 +6,21 @@ _config.local.yml _config.version.yml _layouts/basic.html _layouts/dev.html +bulma-test.css bulma-test.sass bulma-test.scss -bulma-test.css bulma-website-local.sass -css/bulma-test.css css/bulma-docs.css.map -PUBLISHING.md +css/bulma-test.css npm-debug.log +PUBLISHING.md test.html test.sass test.scss # Folders +.jekyll-cache .sass-cache /bulma /cypress/videos @@ -28,4 +29,3 @@ test.scss /styles/node_modules /versions _site -.jekyll-cache diff --git a/docs/_layouts/cypress.html b/docs/_layouts/cypress.html index 9906ea92..8cf49a2c 100644 --- a/docs/_layouts/cypress.html +++ b/docs/_layouts/cypress.html @@ -1,14 +1,22 @@ - + - - - + + + - {% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %} + + {% if page.fulltitle %}{{ page.fulltitle | markdownify | strip_html }}{% + else %}{% if page.title %}{{ page.title | markdownify | strip_html }} | {% + endif %}{{ site.data.meta.title | markdownify | strip_html }}{% endif %} + - - + + {{ content }} diff --git a/docs/bulma.scss b/docs/bulma.scss index 1292aa4c..9febe6a6 100644 --- a/docs/bulma.scss +++ b/docs/bulma.scss @@ -1,2 +1,3 @@ @charset "utf-8"; @import "../bulma"; +// @import "../sass/themes/dark"; diff --git a/docs/css/bulma.css b/docs/css/bulma.css index bab641e3..1282c4bc 100644 --- a/docs/css/bulma.css +++ b/docs/css/bulma.css @@ -105,7 +105,7 @@ fieldset[disabled] .pagination-ellipsis { user-select: none; -moz-appearance: none; -webkit-appearance: none; - background-color: rgba(10, 10, 10, 0.2); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.2); border: none; border-radius: 9999px; cursor: pointer; @@ -126,7 +126,7 @@ fieldset[disabled] .pagination-ellipsis { } .delete::before, .modal-close::before, .delete::after, .modal-close::after { - background-color: white; + background-color: var(--bulma-white); content: ""; display: block; left: 50%; @@ -147,11 +147,11 @@ fieldset[disabled] .pagination-ellipsis { } .delete:hover, .modal-close:hover, .delete:focus, .modal-close:focus { - background-color: rgba(10, 10, 10, 0.3); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.3); } .delete:active, .modal-close:active { - background-color: rgba(10, 10, 10, 0.4); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.4); } .is-small.delete, .is-small.modal-close { @@ -492,8 +492,8 @@ table th { --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 rgba(10, 10, 10, 0.1), 0 0 0 1px var(--bulma-link); - --bulma-box-link-active-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px var(--bulma-link); + --bulma-box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(var(--bulma-shadow-color-rgb), 0.1), 0 0 0 1px var(--bulma-link); + --bulma-box-link-active-shadow: inset 0 1px 2px rgba(var(--bulma-shadow-color-rgb), 0.2), 0 0 0 1px var(--bulma-link); } .box { @@ -526,7 +526,7 @@ a.box:active { --bulma-button-focus-color: var(--bulma-link-focus); --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: rgba(72, 95, 199, 0.25); + --bulma-button-focus-box-shadow-color: rgba(60, 87, 211, 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); @@ -1189,13 +1189,13 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined { } .button.is-link { - background-color: #485fc7; + background-color: #3c57d3; border-color: transparent; color: #fff; } .button.is-link:hover, .button.is-link.is-hovered { - background-color: #3e56c4; + background-color: #314ed0; border-color: transparent; color: #fff; } @@ -1206,25 +1206,25 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined { } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { - box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 95, 199, 0.25); + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(60, 87, 211, 0.25); } .button.is-link:active, .button.is-link.is-active { - background-color: #3a51bb; + background-color: #2d4ac8; border-color: transparent; color: #fff; } .button.is-link[disabled], fieldset[disabled] .button.is-link { - background-color: #485fc7; - border-color: #485fc7; + background-color: #3c57d3; + border-color: #3c57d3; box-shadow: none; } .button.is-link.is-inverted { background-color: #fff; - color: #485fc7; + color: #3c57d3; } .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { @@ -1236,7 +1236,7 @@ fieldset[disabled] .button.is-link.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; - color: #485fc7; + color: #3c57d3; } .button.is-link.is-loading::after { @@ -1245,18 +1245,18 @@ fieldset[disabled] .button.is-link.is-inverted { .button.is-link.is-outlined { background-color: transparent; - border-color: #485fc7; - color: #485fc7; + border-color: #3c57d3; + color: #3c57d3; } .button.is-link.is-outlined:hover, .button.is-link.is-outlined.is-hovered, .button.is-link.is-outlined:focus, .button.is-link.is-outlined.is-focused { - background-color: #485fc7; - border-color: #485fc7; + background-color: #3c57d3; + border-color: #3c57d3; color: #fff; } .button.is-link.is-outlined.is-loading::after { - border-color: transparent transparent #485fc7 #485fc7 !important; + border-color: transparent transparent #3c57d3 #3c57d3 !important; } .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { @@ -1266,9 +1266,9 @@ fieldset[disabled] .button.is-link.is-inverted { .button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { background-color: transparent; - border-color: #485fc7; + border-color: #3c57d3; box-shadow: none; - color: #485fc7; + color: #3c57d3; } .button.is-link.is-inverted.is-outlined { @@ -1279,11 +1279,11 @@ fieldset[disabled] .button.is-link.is-outlined { .button.is-link.is-inverted.is-outlined:hover, .button.is-link.is-inverted.is-outlined.is-hovered, .button.is-link.is-inverted.is-outlined:focus, .button.is-link.is-inverted.is-outlined.is-focused { background-color: #fff; - color: #485fc7; + color: #3c57d3; } .button.is-link.is-inverted.is-outlined.is-loading:hover::after, .button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-link.is-inverted.is-outlined.is-loading:focus::after, .button.is-link.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #485fc7 #485fc7 !important; + border-color: transparent transparent #3c57d3 #3c57d3 !important; } .button.is-link.is-inverted.is-outlined[disabled], @@ -1294,31 +1294,14 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined { color: #fff; } -.button.is-link.is-light { - background-color: #eff1fa; - color: #3850b7; -} - -.button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { - background-color: #e6e9f7; - border-color: transparent; - color: #3850b7; -} - -.button.is-link.is-light:active, .button.is-link.is-light.is-active { - background-color: #dce0f4; - border-color: transparent; - color: #3850b7; -} - .button.is-info { - background-color: #3e8ed0; + background-color: #18b4f7; border-color: transparent; color: #fff; } .button.is-info:hover, .button.is-info.is-hovered { - background-color: #3488ce; + background-color: #0bb0f6; border-color: transparent; color: #fff; } @@ -1329,25 +1312,25 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined { } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { - box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(62, 142, 208, 0.25); + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(24, 180, 247, 0.25); } .button.is-info:active, .button.is-info.is-active { - background-color: #3082c5; + background-color: #09a8ec; border-color: transparent; color: #fff; } .button.is-info[disabled], fieldset[disabled] .button.is-info { - background-color: #3e8ed0; - border-color: #3e8ed0; + background-color: #18b4f7; + border-color: #18b4f7; box-shadow: none; } .button.is-info.is-inverted { background-color: #fff; - color: #3e8ed0; + color: #18b4f7; } .button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { @@ -1359,7 +1342,7 @@ fieldset[disabled] .button.is-info.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; - color: #3e8ed0; + color: #18b4f7; } .button.is-info.is-loading::after { @@ -1368,18 +1351,18 @@ fieldset[disabled] .button.is-info.is-inverted { .button.is-info.is-outlined { background-color: transparent; - border-color: #3e8ed0; - color: #3e8ed0; + border-color: #18b4f7; + color: #18b4f7; } .button.is-info.is-outlined:hover, .button.is-info.is-outlined.is-hovered, .button.is-info.is-outlined:focus, .button.is-info.is-outlined.is-focused { - background-color: #3e8ed0; - border-color: #3e8ed0; + background-color: #18b4f7; + border-color: #18b4f7; color: #fff; } .button.is-info.is-outlined.is-loading::after { - border-color: transparent transparent #3e8ed0 #3e8ed0 !important; + border-color: transparent transparent #18b4f7 #18b4f7 !important; } .button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { @@ -1389,9 +1372,9 @@ fieldset[disabled] .button.is-info.is-inverted { .button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { background-color: transparent; - border-color: #3e8ed0; + border-color: #18b4f7; box-shadow: none; - color: #3e8ed0; + color: #18b4f7; } .button.is-info.is-inverted.is-outlined { @@ -1402,11 +1385,11 @@ fieldset[disabled] .button.is-info.is-outlined { .button.is-info.is-inverted.is-outlined:hover, .button.is-info.is-inverted.is-outlined.is-hovered, .button.is-info.is-inverted.is-outlined:focus, .button.is-info.is-inverted.is-outlined.is-focused { background-color: #fff; - color: #3e8ed0; + color: #18b4f7; } .button.is-info.is-inverted.is-outlined.is-loading:hover::after, .button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-info.is-inverted.is-outlined.is-loading:focus::after, .button.is-info.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #3e8ed0 #3e8ed0 !important; + border-color: transparent transparent #18b4f7 #18b4f7 !important; } .button.is-info.is-inverted.is-outlined[disabled], @@ -1418,30 +1401,30 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined { } .button.is-info.is-light { - background-color: #eff5fb; - color: #296fa8; + background-color: #ebf9fe; + color: #0677a7; } .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { - background-color: #e4eff9; + background-color: #dff5fe; border-color: transparent; - color: #296fa8; + color: #0677a7; } .button.is-info.is-light:active, .button.is-info.is-light.is-active { - background-color: #dae9f6; + background-color: #d3f1fd; border-color: transparent; - color: #296fa8; + color: #0677a7; } .button.is-success { - background-color: #48c78e; + background-color: #3fcf82; border-color: transparent; color: #fff; } .button.is-success:hover, .button.is-success.is-hovered { - background-color: #3ec487; + background-color: #35cd7c; border-color: transparent; color: #fff; } @@ -1452,25 +1435,25 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined { } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { - box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(72, 199, 142, 0.25); + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(63, 207, 130, 0.25); } .button.is-success:active, .button.is-success.is-active { - background-color: #3abb81; + background-color: #31c476; border-color: transparent; color: #fff; } .button.is-success[disabled], fieldset[disabled] .button.is-success { - background-color: #48c78e; - border-color: #48c78e; + background-color: #3fcf82; + border-color: #3fcf82; box-shadow: none; } .button.is-success.is-inverted { background-color: #fff; - color: #48c78e; + color: #3fcf82; } .button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { @@ -1482,7 +1465,7 @@ fieldset[disabled] .button.is-success.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; - color: #48c78e; + color: #3fcf82; } .button.is-success.is-loading::after { @@ -1491,18 +1474,18 @@ fieldset[disabled] .button.is-success.is-inverted { .button.is-success.is-outlined { background-color: transparent; - border-color: #48c78e; - color: #48c78e; + border-color: #3fcf82; + color: #3fcf82; } .button.is-success.is-outlined:hover, .button.is-success.is-outlined.is-hovered, .button.is-success.is-outlined:focus, .button.is-success.is-outlined.is-focused { - background-color: #48c78e; - border-color: #48c78e; + background-color: #3fcf82; + border-color: #3fcf82; color: #fff; } .button.is-success.is-outlined.is-loading::after { - border-color: transparent transparent #48c78e #48c78e !important; + border-color: transparent transparent #3fcf82 #3fcf82 !important; } .button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { @@ -1512,9 +1495,9 @@ fieldset[disabled] .button.is-success.is-inverted { .button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { background-color: transparent; - border-color: #48c78e; + border-color: #3fcf82; box-shadow: none; - color: #48c78e; + color: #3fcf82; } .button.is-success.is-inverted.is-outlined { @@ -1525,11 +1508,11 @@ fieldset[disabled] .button.is-success.is-outlined { .button.is-success.is-inverted.is-outlined:hover, .button.is-success.is-inverted.is-outlined.is-hovered, .button.is-success.is-inverted.is-outlined:focus, .button.is-success.is-inverted.is-outlined.is-focused { background-color: #fff; - color: #48c78e; + color: #3fcf82; } .button.is-success.is-inverted.is-outlined.is-loading:hover::after, .button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-success.is-inverted.is-outlined.is-loading:focus::after, .button.is-success.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #48c78e #48c78e !important; + border-color: transparent transparent #3fcf82 #3fcf82 !important; } .button.is-success.is-inverted.is-outlined[disabled], @@ -1541,153 +1524,153 @@ fieldset[disabled] .button.is-success.is-inverted.is-outlined { } .button.is-success.is-light { - background-color: #effaf5; - color: #257953; + background-color: #effbf4; + color: #1e7647; } .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { - background-color: #e6f7ef; + background-color: #e4f8ee; border-color: transparent; - color: #257953; + color: #1e7647; } .button.is-success.is-light:active, .button.is-success.is-light.is-active { - background-color: #dcf4e9; + background-color: #daf6e7; border-color: transparent; - color: #257953; + color: #1e7647; } .button.is-warning { - background-color: #ffe08a; + background-color: #ffb60a; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .button.is-warning:hover, .button.is-warning.is-hovered { - background-color: #ffdc7d; + background-color: #fcb100; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .button.is-warning:focus, .button.is-warning.is-focused { border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { - box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 224, 138, 0.25); + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(255, 182, 10, 0.25); } .button.is-warning:active, .button.is-warning.is-active { - background-color: #ffd970; + background-color: #f0a800; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .button.is-warning[disabled], fieldset[disabled] .button.is-warning { - background-color: #ffe08a; - border-color: #ffe08a; + background-color: #ffb60a; + border-color: #ffb60a; box-shadow: none; } .button.is-warning.is-inverted { - background-color: rgba(0, 0, 0, 0.7); - color: #ffe08a; + background-color: var(--bulma-white); + color: #ffb60a; } .button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { - background-color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-white); } .button.is-warning.is-inverted[disabled], fieldset[disabled] .button.is-warning.is-inverted { - background-color: rgba(0, 0, 0, 0.7); + background-color: var(--bulma-white); border-color: transparent; box-shadow: none; - color: #ffe08a; + color: #ffb60a; } .button.is-warning.is-loading::after { - border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; + border-color: transparent transparent var(--bulma-white) var(--bulma-white) !important; } .button.is-warning.is-outlined { background-color: transparent; - border-color: #ffe08a; - color: #ffe08a; + border-color: #ffb60a; + color: #ffb60a; } .button.is-warning.is-outlined:hover, .button.is-warning.is-outlined.is-hovered, .button.is-warning.is-outlined:focus, .button.is-warning.is-outlined.is-focused { - background-color: #ffe08a; - border-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + border-color: #ffb60a; + color: var(--bulma-white); } .button.is-warning.is-outlined.is-loading::after { - border-color: transparent transparent #ffe08a #ffe08a !important; + border-color: transparent transparent #ffb60a #ffb60a !important; } .button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; + border-color: transparent transparent var(--bulma-white) var(--bulma-white) !important; } .button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { background-color: transparent; - border-color: #ffe08a; + border-color: #ffb60a; box-shadow: none; - color: #ffe08a; + color: #ffb60a; } .button.is-warning.is-inverted.is-outlined { background-color: transparent; - border-color: rgba(0, 0, 0, 0.7); - color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-white); + color: var(--bulma-white); } .button.is-warning.is-inverted.is-outlined:hover, .button.is-warning.is-inverted.is-outlined.is-hovered, .button.is-warning.is-inverted.is-outlined:focus, .button.is-warning.is-inverted.is-outlined.is-focused { - background-color: rgba(0, 0, 0, 0.7); - color: #ffe08a; + background-color: var(--bulma-white); + color: #ffb60a; } .button.is-warning.is-inverted.is-outlined.is-loading:hover::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-inverted.is-outlined.is-loading:focus::after, .button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #ffe08a #ffe08a !important; + border-color: transparent transparent #ffb60a #ffb60a !important; } .button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { background-color: transparent; - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-white); box-shadow: none; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .button.is-warning.is-light { - background-color: #fffaeb; - color: #946c00; + background-color: #fff9eb; + color: #946800; } .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { - background-color: #fff6de; + background-color: #fff5de; border-color: transparent; - color: #946c00; + color: #946800; } .button.is-warning.is-light:active, .button.is-warning.is-light.is-active { - background-color: #fff3d1; + background-color: #fff1d1; border-color: transparent; - color: #946c00; + color: #946800; } .button.is-danger { - background-color: #f14668; + background-color: #f15146; border-color: transparent; color: #fff; } .button.is-danger:hover, .button.is-danger.is-hovered { - background-color: #f03a5f; + background-color: #f0463a; border-color: transparent; color: #fff; } @@ -1698,25 +1681,25 @@ fieldset[disabled] .button.is-warning.is-inverted.is-outlined { } .button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active) { - box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(241, 70, 104, 0.25); + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(241, 81, 70, 0.25); } .button.is-danger:active, .button.is-danger.is-active { - background-color: #ef2e55; + background-color: #ef3b2e; border-color: transparent; color: #fff; } .button.is-danger[disabled], fieldset[disabled] .button.is-danger { - background-color: #f14668; - border-color: #f14668; + background-color: #f15146; + border-color: #f15146; box-shadow: none; } .button.is-danger.is-inverted { background-color: #fff; - color: #f14668; + color: #f15146; } .button.is-danger.is-inverted:hover, .button.is-danger.is-inverted.is-hovered { @@ -1728,7 +1711,7 @@ fieldset[disabled] .button.is-danger.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; - color: #f14668; + color: #f15146; } .button.is-danger.is-loading::after { @@ -1737,18 +1720,18 @@ fieldset[disabled] .button.is-danger.is-inverted { .button.is-danger.is-outlined { background-color: transparent; - border-color: #f14668; - color: #f14668; + border-color: #f15146; + color: #f15146; } .button.is-danger.is-outlined:hover, .button.is-danger.is-outlined.is-hovered, .button.is-danger.is-outlined:focus, .button.is-danger.is-outlined.is-focused { - background-color: #f14668; - border-color: #f14668; + background-color: #f15146; + border-color: #f15146; color: #fff; } .button.is-danger.is-outlined.is-loading::after { - border-color: transparent transparent #f14668 #f14668 !important; + border-color: transparent transparent #f15146 #f15146 !important; } .button.is-danger.is-outlined.is-loading:hover::after, .button.is-danger.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-outlined.is-loading:focus::after, .button.is-danger.is-outlined.is-loading.is-focused::after { @@ -1758,9 +1741,9 @@ fieldset[disabled] .button.is-danger.is-inverted { .button.is-danger.is-outlined[disabled], fieldset[disabled] .button.is-danger.is-outlined { background-color: transparent; - border-color: #f14668; + border-color: #f15146; box-shadow: none; - color: #f14668; + color: #f15146; } .button.is-danger.is-inverted.is-outlined { @@ -1771,11 +1754,11 @@ fieldset[disabled] .button.is-danger.is-outlined { .button.is-danger.is-inverted.is-outlined:hover, .button.is-danger.is-inverted.is-outlined.is-hovered, .button.is-danger.is-inverted.is-outlined:focus, .button.is-danger.is-inverted.is-outlined.is-focused { background-color: #fff; - color: #f14668; + color: #f15146; } .button.is-danger.is-inverted.is-outlined.is-loading:hover::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-danger.is-inverted.is-outlined.is-loading:focus::after, .button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #f14668 #f14668 !important; + border-color: transparent transparent #f15146 #f15146 !important; } .button.is-danger.is-inverted.is-outlined[disabled], @@ -1787,20 +1770,126 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined { } .button.is-danger.is-light { - background-color: #feecf0; - color: #cc0f35; + background-color: #feedec; + color: #c71b0f; } .button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered { - background-color: #fde0e6; + background-color: #fde2e0; border-color: transparent; - color: #cc0f35; + color: #c71b0f; } .button.is-danger.is-light:active, .button.is-danger.is-light.is-active { - background-color: #fcd4dc; + background-color: #fcd7d4; border-color: transparent; - color: #cc0f35; + color: #c71b0f; +} + +.button.is-text { + background-color: #404654; + border-color: transparent; + color: #fff; +} + +.button.is-text:hover, .button.is-text.is-hovered { + background-color: #3a404d; + border-color: transparent; + color: #fff; +} + +.button.is-text:focus, .button.is-text.is-focused { + border-color: transparent; + color: #fff; +} + +.button.is-text:focus:not(:active), .button.is-text.is-focused:not(:active) { + box-shadow: var(--bulma-button-focus-box-shadow-size) rgba(64, 70, 84, 0.25); +} + +.button.is-text:active, .button.is-text.is-active { + background-color: #353a46; + border-color: transparent; + color: #fff; +} + +.button.is-text[disabled], +fieldset[disabled] .button.is-text { + background-color: #404654; + border-color: #404654; + box-shadow: none; +} + +.button.is-text.is-inverted { + background-color: #fff; + color: #404654; +} + +.button.is-text.is-inverted:hover, .button.is-text.is-inverted.is-hovered { + background-color: #f2f2f2; +} + +.button.is-text.is-inverted[disabled], +fieldset[disabled] .button.is-text.is-inverted { + background-color: #fff; + border-color: transparent; + box-shadow: none; + color: #404654; +} + +.button.is-text.is-loading::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-text.is-outlined { + background-color: transparent; + border-color: #404654; + color: #404654; +} + +.button.is-text.is-outlined:hover, .button.is-text.is-outlined.is-hovered, .button.is-text.is-outlined:focus, .button.is-text.is-outlined.is-focused { + background-color: #404654; + border-color: #404654; + color: #fff; +} + +.button.is-text.is-outlined.is-loading::after { + border-color: transparent transparent #404654 #404654 !important; +} + +.button.is-text.is-outlined.is-loading:hover::after, .button.is-text.is-outlined.is-loading.is-hovered::after, .button.is-text.is-outlined.is-loading:focus::after, .button.is-text.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #fff #fff !important; +} + +.button.is-text.is-outlined[disabled], +fieldset[disabled] .button.is-text.is-outlined { + background-color: transparent; + border-color: #404654; + box-shadow: none; + color: #404654; +} + +.button.is-text.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + color: #fff; +} + +.button.is-text.is-inverted.is-outlined:hover, .button.is-text.is-inverted.is-outlined.is-hovered, .button.is-text.is-inverted.is-outlined:focus, .button.is-text.is-inverted.is-outlined.is-focused { + background-color: #fff; + color: #404654; +} + +.button.is-text.is-inverted.is-outlined.is-loading:hover::after, .button.is-text.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-text.is-inverted.is-outlined.is-loading:focus::after, .button.is-text.is-inverted.is-outlined.is-loading.is-focused::after { + border-color: transparent transparent #404654 #404654 !important; +} + +.button.is-text.is-inverted.is-outlined[disabled], +fieldset[disabled] .button.is-text.is-inverted.is-outlined { + background-color: transparent; + border-color: #fff; + box-shadow: none; + color: #fff; } .button.is-small { @@ -2530,53 +2619,53 @@ div.icon-text { } .notification.is-link { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } -.notification.is-link.is-light { - background-color: #eff1fa; - color: #3850b7; -} - .notification.is-info { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } .notification.is-info.is-light { - background-color: #eff5fb; - color: #296fa8; + background-color: #ebf9fe; + color: #0677a7; } .notification.is-success { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } .notification.is-success.is-light { - background-color: #effaf5; - color: #257953; + background-color: #effbf4; + color: #1e7647; } .notification.is-warning { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .notification.is-warning.is-light { - background-color: #fffaeb; - color: #946c00; + background-color: #fff9eb; + color: #946800; } .notification.is-danger { - background-color: #f14668; + background-color: #f15146; color: #fff; } .notification.is-danger.is-light { - background-color: #feecf0; - color: #cc0f35; + background-color: #feedec; + color: #c71b0f; +} + +.notification.is-text { + background-color: #404654; + color: #fff; } :root { @@ -2696,83 +2785,99 @@ div.icon-text { } .progress.is-link::-webkit-progress-value { - background-color: #485fc7; + background-color: #3c57d3; } .progress.is-link::-moz-progress-bar { - background-color: #485fc7; + background-color: #3c57d3; } .progress.is-link::-ms-fill { - background-color: #485fc7; + background-color: #3c57d3; } .progress.is-link:indeterminate { - background-image: linear-gradient(to right, #485fc7 30%, var(--bulma-progress-bar-background-color) 30%); + background-image: linear-gradient(to right, #3c57d3 30%, var(--bulma-progress-bar-background-color) 30%); } .progress.is-info::-webkit-progress-value { - background-color: #3e8ed0; + background-color: #18b4f7; } .progress.is-info::-moz-progress-bar { - background-color: #3e8ed0; + background-color: #18b4f7; } .progress.is-info::-ms-fill { - background-color: #3e8ed0; + background-color: #18b4f7; } .progress.is-info:indeterminate { - background-image: linear-gradient(to right, #3e8ed0 30%, var(--bulma-progress-bar-background-color) 30%); + background-image: linear-gradient(to right, #18b4f7 30%, var(--bulma-progress-bar-background-color) 30%); } .progress.is-success::-webkit-progress-value { - background-color: #48c78e; + background-color: #3fcf82; } .progress.is-success::-moz-progress-bar { - background-color: #48c78e; + background-color: #3fcf82; } .progress.is-success::-ms-fill { - background-color: #48c78e; + background-color: #3fcf82; } .progress.is-success:indeterminate { - background-image: linear-gradient(to right, #48c78e 30%, var(--bulma-progress-bar-background-color) 30%); + background-image: linear-gradient(to right, #3fcf82 30%, var(--bulma-progress-bar-background-color) 30%); } .progress.is-warning::-webkit-progress-value { - background-color: #ffe08a; + background-color: #ffb60a; } .progress.is-warning::-moz-progress-bar { - background-color: #ffe08a; + background-color: #ffb60a; } .progress.is-warning::-ms-fill { - background-color: #ffe08a; + background-color: #ffb60a; } .progress.is-warning:indeterminate { - background-image: linear-gradient(to right, #ffe08a 30%, var(--bulma-progress-bar-background-color) 30%); + background-image: linear-gradient(to right, #ffb60a 30%, var(--bulma-progress-bar-background-color) 30%); } .progress.is-danger::-webkit-progress-value { - background-color: #f14668; + background-color: #f15146; } .progress.is-danger::-moz-progress-bar { - background-color: #f14668; + background-color: #f15146; } .progress.is-danger::-ms-fill { - background-color: #f14668; + background-color: #f15146; } .progress.is-danger:indeterminate { - background-image: linear-gradient(to right, #f14668 30%, var(--bulma-progress-bar-background-color) 30%); + background-image: linear-gradient(to right, #f15146 30%, var(--bulma-progress-bar-background-color) 30%); +} + +.progress.is-text::-webkit-progress-value { + background-color: #404654; +} + +.progress.is-text::-moz-progress-bar { + background-color: #404654; +} + +.progress.is-text::-ms-fill { + background-color: #404654; +} + +.progress.is-text:indeterminate { + background-image: linear-gradient(to right, #404654 30%, var(--bulma-progress-bar-background-color) 30%); } .progress:indeterminate { @@ -2892,36 +2997,43 @@ div.icon-text { .table td.is-link, .table th.is-link { - background-color: #485fc7; - border-color: #485fc7; + background-color: #3c57d3; + border-color: #3c57d3; color: #fff; } .table td.is-info, .table th.is-info { - background-color: #3e8ed0; - border-color: #3e8ed0; + background-color: #18b4f7; + border-color: #18b4f7; color: #fff; } .table td.is-success, .table th.is-success { - background-color: #48c78e; - border-color: #48c78e; + background-color: #3fcf82; + border-color: #3fcf82; color: #fff; } .table td.is-warning, .table th.is-warning { - background-color: #ffe08a; - border-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + border-color: #ffb60a; + color: var(--bulma-white); } .table td.is-danger, .table th.is-danger { - background-color: #f14668; - border-color: #f14668; + background-color: #f15146; + border-color: #f15146; + color: #fff; +} + +.table td.is-text, +.table th.is-text { + background-color: #404654; + border-color: #404654; color: #fff; } @@ -3169,53 +3281,53 @@ div.icon-text { } .tag:not(body).is-link { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } -.tag:not(body).is-link.is-light { - background-color: #eff1fa; - color: #3850b7; -} - .tag:not(body).is-info { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } .tag:not(body).is-info.is-light { - background-color: #eff5fb; - color: #296fa8; + background-color: #ebf9fe; + color: #0677a7; } .tag:not(body).is-success { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } .tag:not(body).is-success.is-light { - background-color: #effaf5; - color: #257953; + background-color: #effbf4; + color: #1e7647; } .tag:not(body).is-warning { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .tag:not(body).is-warning.is-light { - background-color: #fffaeb; - color: #946c00; + background-color: #fff9eb; + color: #946800; } .tag:not(body).is-danger { - background-color: #f14668; + background-color: #f15146; color: #fff; } .tag:not(body).is-danger.is-light { - background-color: #feecf0; - color: #cc0f35; + background-color: #feedec; + color: #c71b0f; +} + +.tag:not(body).is-text { + background-color: #404654; + color: #fff; } .tag:not(body).is-normal { @@ -3441,35 +3553,35 @@ a.tag:hover { /* Bulma Form */ .input, .textarea, .select select { - background-color: white; - border-color: #dbdbdb; + background-color: var(--bulma-white); + border-color: var(--bulma-text-85); border-radius: 4px; - color: #363636; + color: var(--bulma-text-10); } .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { - color: rgba(54, 54, 54, 0.3); + color: var(--bulma-text-10); } .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { - color: rgba(54, 54, 54, 0.3); + color: var(--bulma-text-10); } .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { - color: rgba(54, 54, 54, 0.3); + color: var(--bulma-text-10); } .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { - color: rgba(54, 54, 54, 0.3); + color: var(--bulma-text-10); } .input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered { - border-color: #b5b5b5; + border-color: var(--bulma-text-80); } .input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active { - border-color: #485fc7; - box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); + border-color: #3c57d3; + box-shadow: 0 0 0 0.125em rgba(60, 87, 211, 0.25); } .input[disabled], .textarea[disabled], .select select[disabled], @@ -3477,10 +3589,10 @@ fieldset[disabled] .input, fieldset[disabled] .textarea, fieldset[disabled] .select select, .select fieldset[disabled] select { - background-color: whitesmoke; - border-color: whitesmoke; + background-color: var(--bulma-text-90); + border-color: var(--bulma-text-90); box-shadow: none; - color: #7a7a7a; + color: var(--bulma-text-55); } .input[disabled]::-moz-placeholder, .textarea[disabled]::-moz-placeholder, .select select[disabled]::-moz-placeholder, @@ -3488,7 +3600,7 @@ fieldset[disabled] .input::-moz-placeholder, fieldset[disabled] .textarea::-moz-placeholder, fieldset[disabled] .select select::-moz-placeholder, .select fieldset[disabled] select::-moz-placeholder { - color: rgba(122, 122, 122, 0.3); + color: var(--bulma-text-55); } .input[disabled]::-webkit-input-placeholder, .textarea[disabled]::-webkit-input-placeholder, .select select[disabled]::-webkit-input-placeholder, @@ -3496,7 +3608,7 @@ fieldset[disabled] .input::-webkit-input-placeholder, fieldset[disabled] .textarea::-webkit-input-placeholder, fieldset[disabled] .select select::-webkit-input-placeholder, .select fieldset[disabled] select::-webkit-input-placeholder { - color: rgba(122, 122, 122, 0.3); + color: var(--bulma-text-55); } .input[disabled]:-moz-placeholder, .textarea[disabled]:-moz-placeholder, .select select[disabled]:-moz-placeholder, @@ -3504,7 +3616,7 @@ fieldset[disabled] .input:-moz-placeholder, fieldset[disabled] .textarea:-moz-placeholder, fieldset[disabled] .select select:-moz-placeholder, .select fieldset[disabled] select:-moz-placeholder { - color: rgba(122, 122, 122, 0.3); + color: var(--bulma-text-55); } .input[disabled]:-ms-input-placeholder, .textarea[disabled]:-ms-input-placeholder, .select select[disabled]:-ms-input-placeholder, @@ -3512,11 +3624,11 @@ fieldset[disabled] .input:-ms-input-placeholder, fieldset[disabled] .textarea:-ms-input-placeholder, fieldset[disabled] .select select:-ms-input-placeholder, .select fieldset[disabled] select:-ms-input-placeholder { - color: rgba(122, 122, 122, 0.3); + color: var(--bulma-text-55); } .input, .textarea { - box-shadow: inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05); + box-shadow: inset 0 0.0625em 0.125em rgba(var(--bulma-shadow-color-rgb), 0.05); max-width: 100%; width: 100%; } @@ -3566,43 +3678,51 @@ fieldset[disabled] .select select:-ms-input-placeholder, } .is-link.input, .is-link.textarea { - border-color: #485fc7; + border-color: #3c57d3; } .is-link.input:focus, .is-link.textarea:focus, .is-link.is-focused.input, .is-link.is-focused.textarea, .is-link.input:active, .is-link.textarea:active, .is-link.is-active.input, .is-link.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); + box-shadow: 0 0 0 0.125em rgba(60, 87, 211, 0.25); } .is-info.input, .is-info.textarea { - border-color: #3e8ed0; + border-color: #18b4f7; } .is-info.input:focus, .is-info.textarea:focus, .is-info.is-focused.input, .is-info.is-focused.textarea, .is-info.input:active, .is-info.textarea:active, .is-info.is-active.input, .is-info.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); + box-shadow: 0 0 0 0.125em rgba(24, 180, 247, 0.25); } .is-success.input, .is-success.textarea { - border-color: #48c78e; + border-color: #3fcf82; } .is-success.input:focus, .is-success.textarea:focus, .is-success.is-focused.input, .is-success.is-focused.textarea, .is-success.input:active, .is-success.textarea:active, .is-success.is-active.input, .is-success.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); + box-shadow: 0 0 0 0.125em rgba(63, 207, 130, 0.25); } .is-warning.input, .is-warning.textarea { - border-color: #ffe08a; + border-color: #ffb60a; } .is-warning.input:focus, .is-warning.textarea:focus, .is-warning.is-focused.input, .is-warning.is-focused.textarea, .is-warning.input:active, .is-warning.textarea:active, .is-warning.is-active.input, .is-warning.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 182, 10, 0.25); } .is-danger.input, .is-danger.textarea { - border-color: #f14668; + border-color: #f15146; } .is-danger.input:focus, .is-danger.textarea:focus, .is-danger.is-focused.input, .is-danger.is-focused.textarea, .is-danger.input:active, .is-danger.textarea:active, .is-danger.is-active.input, .is-danger.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25); + box-shadow: 0 0 0 0.125em rgba(241, 81, 70, 0.25); +} + +.is-text.input, .is-text.textarea { + border-color: #404654; +} + +.is-text.input:focus, .is-text.textarea:focus, .is-text.is-focused.input, .is-text.is-focused.textarea, .is-text.input:active, .is-text.textarea:active, .is-text.is-active.input, .is-text.is-active.textarea { + box-shadow: 0 0 0 0.125em rgba(64, 70, 84, 0.25); } .is-small.input, .is-small.textarea { @@ -3675,7 +3795,7 @@ fieldset[disabled] .select select:-ms-input-placeholder, } .checkbox:hover, .radio:hover { - color: #363636; + color: var(--bulma-text-10); } .checkbox[disabled], .radio[disabled], @@ -3683,7 +3803,7 @@ fieldset[disabled] .checkbox, fieldset[disabled] .radio, .checkbox input[disabled], .radio input[disabled] { - color: #7a7a7a; + color: var(--bulma-text-55); cursor: not-allowed; } @@ -3703,7 +3823,7 @@ fieldset[disabled] .radio, } .select:not(.is-multiple):not(.is-loading)::after { - border-color: #485fc7; + border-color: #3c57d3; right: 1.125em; z-index: 4; } @@ -3727,7 +3847,7 @@ fieldset[disabled] .radio, .select select[disabled]:hover, fieldset[disabled] .select select:hover { - border-color: whitesmoke; + border-color: var(--bulma-text-90); } .select select:not([multiple]) { @@ -3744,7 +3864,7 @@ fieldset[disabled] .select select:hover { } .select:not(.is-multiple):not(.is-loading):hover::after { - border-color: #363636; + border-color: var(--bulma-text-10); } .select.is-white:not(:hover)::after { @@ -3828,83 +3948,99 @@ fieldset[disabled] .select select:hover { } .select.is-link:not(:hover)::after { - border-color: #485fc7; + border-color: #3c57d3; } .select.is-link select { - border-color: #485fc7; + border-color: #3c57d3; } .select.is-link select:hover, .select.is-link select.is-hovered { - border-color: #3a51bb; + border-color: #2d4ac8; } .select.is-link select:focus, .select.is-link select.is-focused, .select.is-link select:active, .select.is-link select.is-active { - box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); + box-shadow: 0 0 0 0.125em rgba(60, 87, 211, 0.25); } .select.is-info:not(:hover)::after { - border-color: #3e8ed0; + border-color: #18b4f7; } .select.is-info select { - border-color: #3e8ed0; + border-color: #18b4f7; } .select.is-info select:hover, .select.is-info select.is-hovered { - border-color: #3082c5; + border-color: #09a8ec; } .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active { - box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); + box-shadow: 0 0 0 0.125em rgba(24, 180, 247, 0.25); } .select.is-success:not(:hover)::after { - border-color: #48c78e; + border-color: #3fcf82; } .select.is-success select { - border-color: #48c78e; + border-color: #3fcf82; } .select.is-success select:hover, .select.is-success select.is-hovered { - border-color: #3abb81; + border-color: #31c476; } .select.is-success select:focus, .select.is-success select.is-focused, .select.is-success select:active, .select.is-success select.is-active { - box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); + box-shadow: 0 0 0 0.125em rgba(63, 207, 130, 0.25); } .select.is-warning:not(:hover)::after { - border-color: #ffe08a; + border-color: #ffb60a; } .select.is-warning select { - border-color: #ffe08a; + border-color: #ffb60a; } .select.is-warning select:hover, .select.is-warning select.is-hovered { - border-color: #ffd970; + border-color: #f0a800; } .select.is-warning select:focus, .select.is-warning select.is-focused, .select.is-warning select:active, .select.is-warning select.is-active { - box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 182, 10, 0.25); } .select.is-danger:not(:hover)::after { - border-color: #f14668; + border-color: #f15146; } .select.is-danger select { - border-color: #f14668; + border-color: #f15146; } .select.is-danger select:hover, .select.is-danger select.is-hovered { - border-color: #ef2e55; + border-color: #ef3b2e; } .select.is-danger select:focus, .select.is-danger select.is-focused, .select.is-danger select:active, .select.is-danger select.is-active { - box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25); + box-shadow: 0 0 0 0.125em rgba(241, 81, 70, 0.25); +} + +.select.is-text:not(:hover)::after { + border-color: #404654; +} + +.select.is-text select { + border-color: #404654; +} + +.select.is-text select:hover, .select.is-text select.is-hovered { + border-color: #353a46; +} + +.select.is-text select:focus, .select.is-text select.is-focused, .select.is-text select:active, .select.is-text select.is-active { + box-shadow: 0 0 0 0.125em rgba(64, 70, 84, 0.25); } .select.is-small { @@ -3921,7 +4057,7 @@ fieldset[disabled] .select select:hover { } .select.is-disabled::after { - border-color: #7a7a7a !important; + border-color: var(--bulma-text-55) !important; opacity: 0.5; } @@ -4081,121 +4217,145 @@ fieldset[disabled] .select select:hover { } .file.is-link .file-cta { - background-color: #485fc7; + background-color: #3c57d3; border-color: transparent; color: #fff; } .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { - background-color: #3e56c4; + background-color: #314ed0; border-color: transparent; color: #fff; } .file.is-link:focus .file-cta, .file.is-link.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25); + box-shadow: 0 0 0.5em rgba(60, 87, 211, 0.25); color: #fff; } .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { - background-color: #3a51bb; + background-color: #2d4ac8; border-color: transparent; color: #fff; } .file.is-info .file-cta { - background-color: #3e8ed0; + background-color: #18b4f7; border-color: transparent; color: #fff; } .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { - background-color: #3488ce; + background-color: #0bb0f6; border-color: transparent; color: #fff; } .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25); + box-shadow: 0 0 0.5em rgba(24, 180, 247, 0.25); color: #fff; } .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { - background-color: #3082c5; + background-color: #09a8ec; border-color: transparent; color: #fff; } .file.is-success .file-cta { - background-color: #48c78e; + background-color: #3fcf82; border-color: transparent; color: #fff; } .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { - background-color: #3ec487; + background-color: #35cd7c; border-color: transparent; color: #fff; } .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25); + box-shadow: 0 0 0.5em rgba(63, 207, 130, 0.25); color: #fff; } .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { - background-color: #3abb81; + background-color: #31c476; border-color: transparent; color: #fff; } .file.is-warning .file-cta { - background-color: #ffe08a; + background-color: #ffb60a; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { - background-color: #ffdc7d; + background-color: #fcb100; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25); - color: rgba(0, 0, 0, 0.7); + box-shadow: 0 0 0.5em rgba(255, 182, 10, 0.25); + color: var(--bulma-white); } .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { - background-color: #ffd970; + background-color: #f0a800; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .file.is-danger .file-cta { - background-color: #f14668; + background-color: #f15146; border-color: transparent; color: #fff; } .file.is-danger:hover .file-cta, .file.is-danger.is-hovered .file-cta { - background-color: #f03a5f; + background-color: #f0463a; border-color: transparent; color: #fff; } .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(241, 70, 104, 0.25); + box-shadow: 0 0 0.5em rgba(241, 81, 70, 0.25); color: #fff; } .file.is-danger:active .file-cta, .file.is-danger.is-active .file-cta { - background-color: #ef2e55; + background-color: #ef3b2e; + border-color: transparent; + color: #fff; +} + +.file.is-text .file-cta { + background-color: #404654; + border-color: transparent; + color: #fff; +} + +.file.is-text:hover .file-cta, .file.is-text.is-hovered .file-cta { + background-color: #3a404d; + border-color: transparent; + color: #fff; +} + +.file.is-text:focus .file-cta, .file.is-text.is-focused .file-cta { + border-color: transparent; + box-shadow: 0 0 0.5em rgba(64, 70, 84, 0.25); + color: #fff; +} + +.file.is-text:active .file-cta, .file.is-text.is-active .file-cta { + background-color: #353a46; border-color: transparent; color: #fff; } @@ -4323,21 +4483,21 @@ fieldset[disabled] .select select:hover { } .file-label:hover .file-cta { - background-color: #eeeeee; - color: #363636; + background-color: var(--bulma-white-ter); + color: var(--bulma-text-10); } .file-label:hover .file-name { - border-color: #d5d5d5; + border-color: var(--bulma-text-85); } .file-label:active .file-cta { - background-color: #e8e8e8; - color: #363636; + background-color: var(--bulma-white-ter); + color: var(--bulma-text-10); } .file-label:active .file-name { - border-color: #cfcfcf; + border-color: var(--bulma-text-85); } .file-input { @@ -4352,7 +4512,7 @@ fieldset[disabled] .select select:hover { .file-cta, .file-name { - border-color: #dbdbdb; + border-color: var(--bulma-text-85); border-radius: 4px; font-size: 1em; padding-left: 1em; @@ -4361,12 +4521,12 @@ fieldset[disabled] .select select:hover { } .file-cta { - background-color: whitesmoke; - color: #4a4a4a; + background-color: var(--bulma-white-ter); + color: var(--bulma-text-25); } .file-name { - border-color: #dbdbdb; + border-color: var(--bulma-text-85); border-style: solid; border-width: 1px 1px 1px 0; display: block; @@ -4390,7 +4550,7 @@ fieldset[disabled] .select select:hover { } .label { - color: #363636; + color: var(--bulma-text-10); display: block; font-size: 1rem; font-weight: 700; @@ -4439,23 +4599,27 @@ fieldset[disabled] .select select:hover { } .help.is-link { - color: #485fc7; + color: #3c57d3; } .help.is-info { - color: #3e8ed0; + color: #18b4f7; } .help.is-success { - color: #48c78e; + color: #3fcf82; } .help.is-warning { - color: #ffe08a; + color: #ffb60a; } .help.is-danger { - color: #f14668; + color: #f15146; +} + +.help.is-text { + color: #404654; } .field:not(:last-child) { @@ -4661,7 +4825,7 @@ fieldset[disabled] .select select:hover { .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: #4a4a4a; + color: var(--bulma-text-25); } .control.has-icons-left .input.is-small ~ .icon, @@ -4683,7 +4847,7 @@ fieldset[disabled] .select select:hover { } .control.has-icons-left .icon, .control.has-icons-right .icon { - color: #dbdbdb; + color: var(--bulma-text-85); height: 2.5em; pointer-events: none; position: absolute; @@ -4838,7 +5002,7 @@ fieldset[disabled] .select select:hover { --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 rgba(10, 10, 10, 0.1); + --bulma-card-header-shadow: 0 0.125em 0.25em rgba(var(--bulma-shadow-color-rgb), 0.1); --bulma-card-header-weight: var(--bulma-weight-bold); --bulma-card-content-background-color: transparent; --bulma-card-content-padding: 1.5rem; @@ -5158,7 +5322,7 @@ button.dropdown-item.is-active { } :root { - --bulma-media-border-color: rgba(219, 219, 219, 0.5); + --bulma-media-border-color: var(--bulma-text-85); --bulma-media-border-size: 1px; --bulma-media-spacing: 1rem; --bulma-media-spacing-large: 1.5rem; @@ -5428,73 +5592,85 @@ button.dropdown-item.is-active { } .message.is-link { - background-color: #eff1fa; + background-color: #f7f8fd; } .message.is-link .message-header { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } .message.is-link .message-body { - border-color: #485fc7; - color: #3850b7; + border-color: #3c57d3; } .message.is-info { - background-color: #eff5fb; + background-color: #ebf9fe; } .message.is-info .message-header { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } .message.is-info .message-body { - border-color: #3e8ed0; - color: #296fa8; + border-color: #18b4f7; + color: #0677a7; } .message.is-success { - background-color: #effaf5; + background-color: #effbf4; } .message.is-success .message-header { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } .message.is-success .message-body { - border-color: #48c78e; - color: #257953; + border-color: #3fcf82; + color: #1e7647; } .message.is-warning { - background-color: #fffaeb; + background-color: #fff9eb; } .message.is-warning .message-header { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .message.is-warning .message-body { - border-color: #ffe08a; - color: #946c00; + border-color: #ffb60a; + color: #946800; } .message.is-danger { - background-color: #feecf0; + background-color: #feedec; } .message.is-danger .message-header { - background-color: #f14668; + background-color: #f15146; color: #fff; } .message.is-danger .message-body { - border-color: #f14668; - color: #cc0f35; + border-color: #f15146; + color: #c71b0f; +} + +.message.is-text { + background-color: #f9fafb; +} + +.message.is-text .message-header { + background-color: #404654; + color: #fff; +} + +.message.is-text .message-body { + border-color: #404654; } .message-header { @@ -5542,7 +5718,7 @@ button.dropdown-item.is-active { :root { --bulma-modal-z: 40; - --bulma-modal-background-background-color: rgba(10, 10, 10, 0.86); + --bulma-modal-background-background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.86); --bulma-modal-content-width: 640px; --bulma-modal-content-margin-mobile: 20px; --bulma-modal-content-spacing-mobile: 160px; @@ -5691,7 +5867,7 @@ button.dropdown-item.is-active { --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 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + --bulma-navbar-dropdown-boxed-shadow: 0 8px 8px bulmargba(var(--bulma-shadow-color-rgb), 0.1), 0 0 0 1px bulmargba(var(--bulma-shadow-color-rgb), 0.1); --bulma-navbar-dropdown-item-hover-color: var(--bulma-scheme-invert); --bulma-navbar-dropdown-item-hover-background-color: var(--bulma-background); --bulma-navbar-dropdown-item-active-color: var(--bulma-link); @@ -6019,7 +6195,7 @@ button.dropdown-item.is-active { } .navbar.is-link { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } @@ -6032,7 +6208,7 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-brand .navbar-link:focus, .navbar.is-link .navbar-brand .navbar-link:hover, .navbar.is-link .navbar-brand .navbar-link.is-active { - background-color: #3a51bb; + background-color: #2d4ac8; color: #fff; } @@ -6061,7 +6237,7 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-end .navbar-link:focus, .navbar.is-link .navbar-end .navbar-link:hover, .navbar.is-link .navbar-end .navbar-link.is-active { - background-color: #3a51bb; + background-color: #2d4ac8; color: #fff; } .navbar.is-link .navbar-start .navbar-link::after, @@ -6071,17 +6247,17 @@ button.dropdown-item.is-active { .navbar.is-link .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-link .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-link .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #3a51bb; + background-color: #2d4ac8; color: #fff; } .navbar.is-link .navbar-dropdown a.navbar-item.is-active { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } } .navbar.is-info { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } @@ -6094,7 +6270,7 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-brand .navbar-link:focus, .navbar.is-info .navbar-brand .navbar-link:hover, .navbar.is-info .navbar-brand .navbar-link.is-active { - background-color: #3082c5; + background-color: #09a8ec; color: #fff; } @@ -6123,7 +6299,7 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-end .navbar-link:focus, .navbar.is-info .navbar-end .navbar-link:hover, .navbar.is-info .navbar-end .navbar-link.is-active { - background-color: #3082c5; + background-color: #09a8ec; color: #fff; } .navbar.is-info .navbar-start .navbar-link::after, @@ -6133,17 +6309,17 @@ button.dropdown-item.is-active { .navbar.is-info .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-info .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-info .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #3082c5; + background-color: #09a8ec; color: #fff; } .navbar.is-info .navbar-dropdown a.navbar-item.is-active { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } } .navbar.is-success { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } @@ -6156,7 +6332,7 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-brand .navbar-link:focus, .navbar.is-success .navbar-brand .navbar-link:hover, .navbar.is-success .navbar-brand .navbar-link.is-active { - background-color: #3abb81; + background-color: #31c476; color: #fff; } @@ -6185,7 +6361,7 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-end .navbar-link:focus, .navbar.is-success .navbar-end .navbar-link:hover, .navbar.is-success .navbar-end .navbar-link.is-active { - background-color: #3abb81; + background-color: #31c476; color: #fff; } .navbar.is-success .navbar-start .navbar-link::after, @@ -6195,39 +6371,39 @@ button.dropdown-item.is-active { .navbar.is-success .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-success .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-success .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #3abb81; + background-color: #31c476; color: #fff; } .navbar.is-success .navbar-dropdown a.navbar-item.is-active { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } } .navbar.is-warning { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .navbar.is-warning .navbar-brand > .navbar-item, .navbar.is-warning .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .navbar.is-warning .navbar-brand > a.navbar-item:focus, .navbar.is-warning .navbar-brand > a.navbar-item:hover, .navbar.is-warning .navbar-brand > a.navbar-item.is-active, .navbar.is-warning .navbar-brand .navbar-link:focus, .navbar.is-warning .navbar-brand .navbar-link:hover, .navbar.is-warning .navbar-brand .navbar-link.is-active { - background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + background-color: #f0a800; + color: var(--bulma-white); } .navbar.is-warning .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-white); } .navbar.is-warning .navbar-burger { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } @media screen and (min-width: 1024px) { @@ -6235,7 +6411,7 @@ button.dropdown-item.is-active { .navbar.is-warning .navbar-start .navbar-link, .navbar.is-warning .navbar-end > .navbar-item, .navbar.is-warning .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .navbar.is-warning .navbar-start > a.navbar-item:focus, .navbar.is-warning .navbar-start > a.navbar-item:hover, .navbar.is-warning .navbar-start > a.navbar-item.is-active, .navbar.is-warning .navbar-start .navbar-link:focus, @@ -6247,27 +6423,27 @@ button.dropdown-item.is-active { .navbar.is-warning .navbar-end .navbar-link:focus, .navbar.is-warning .navbar-end .navbar-link:hover, .navbar.is-warning .navbar-end .navbar-link.is-active { - background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + background-color: #f0a800; + color: var(--bulma-white); } .navbar.is-warning .navbar-start .navbar-link::after, .navbar.is-warning .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); + border-color: var(--bulma-white); } .navbar.is-warning .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-warning .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-warning .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + background-color: #f0a800; + color: var(--bulma-white); } .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } } .navbar.is-danger { - background-color: #f14668; + background-color: #f15146; color: #fff; } @@ -6280,7 +6456,7 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-brand .navbar-link:focus, .navbar.is-danger .navbar-brand .navbar-link:hover, .navbar.is-danger .navbar-brand .navbar-link.is-active { - background-color: #ef2e55; + background-color: #ef3b2e; color: #fff; } @@ -6309,7 +6485,7 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-end .navbar-link:focus, .navbar.is-danger .navbar-end .navbar-link:hover, .navbar.is-danger .navbar-end .navbar-link.is-active { - background-color: #ef2e55; + background-color: #ef3b2e; color: #fff; } .navbar.is-danger .navbar-start .navbar-link::after, @@ -6319,11 +6495,73 @@ button.dropdown-item.is-active { .navbar.is-danger .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-danger .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-danger .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #ef2e55; + background-color: #ef3b2e; color: #fff; } .navbar.is-danger .navbar-dropdown a.navbar-item.is-active { - background-color: #f14668; + background-color: #f15146; + color: #fff; + } +} + +.navbar.is-text { + background-color: #404654; + color: #fff; +} + +.navbar.is-text .navbar-brand > .navbar-item, +.navbar.is-text .navbar-brand .navbar-link { + color: #fff; +} + +.navbar.is-text .navbar-brand > a.navbar-item:focus, .navbar.is-text .navbar-brand > a.navbar-item:hover, .navbar.is-text .navbar-brand > a.navbar-item.is-active, +.navbar.is-text .navbar-brand .navbar-link:focus, +.navbar.is-text .navbar-brand .navbar-link:hover, +.navbar.is-text .navbar-brand .navbar-link.is-active { + background-color: #353a46; + color: #fff; +} + +.navbar.is-text .navbar-brand .navbar-link::after { + border-color: #fff; +} + +.navbar.is-text .navbar-burger { + color: #fff; +} + +@media screen and (min-width: 1024px) { + .navbar.is-text .navbar-start > .navbar-item, + .navbar.is-text .navbar-start .navbar-link, + .navbar.is-text .navbar-end > .navbar-item, + .navbar.is-text .navbar-end .navbar-link { + color: #fff; + } + .navbar.is-text .navbar-start > a.navbar-item:focus, .navbar.is-text .navbar-start > a.navbar-item:hover, .navbar.is-text .navbar-start > a.navbar-item.is-active, + .navbar.is-text .navbar-start .navbar-link:focus, + .navbar.is-text .navbar-start .navbar-link:hover, + .navbar.is-text .navbar-start .navbar-link.is-active, + .navbar.is-text .navbar-end > a.navbar-item:focus, + .navbar.is-text .navbar-end > a.navbar-item:hover, + .navbar.is-text .navbar-end > a.navbar-item.is-active, + .navbar.is-text .navbar-end .navbar-link:focus, + .navbar.is-text .navbar-end .navbar-link:hover, + .navbar.is-text .navbar-end .navbar-link.is-active { + background-color: #353a46; + color: #fff; + } + .navbar.is-text .navbar-start .navbar-link::after, + .navbar.is-text .navbar-end .navbar-link::after { + border-color: #fff; + } + .navbar.is-text .navbar-item.has-dropdown:focus .navbar-link, + .navbar.is-text .navbar-item.has-dropdown:hover .navbar-link, + .navbar.is-text .navbar-item.has-dropdown.is-active .navbar-link { + background-color: #353a46; + color: #fff; + } + .navbar.is-text .navbar-dropdown a.navbar-item.is-active { + background-color: #404654; color: #fff; } } @@ -6562,7 +6800,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-menu { background-color: var(--bulma-navbar-background-color); - box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + box-shadow: 0 8px 16px bulmargba(var(--bulma-shadow-color-rgb), 0.1); padding: 0.5rem 0; } .navbar-menu.is-active { @@ -6578,7 +6816,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i bottom: 0; } .navbar.is-fixed-bottom-touch.has-shadow { - box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 -2px 3px bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .navbar.is-fixed-top-touch { top: 0; @@ -6656,7 +6894,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i border-radius: var(--bulma-navbar-dropdown-radius) var(--bulma-navbar-dropdown-radius) 0 0; border-top: none; bottom: 100%; - box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1); + box-shadow: 0 -8px 8px bulmargba(var(--bulma-shadow-color-rgb), 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 { @@ -6684,7 +6922,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i border-bottom-left-radius: var(--bulma-navbar-dropdown-radius); border-bottom-right-radius: var(--bulma-navbar-dropdown-radius); border-top: var(--bulma-navbar-dropdown-border-top); - box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1); + box-shadow: 0 8px 8px bulmargba(var(--bulma-shadow-color-rgb), 0.1); display: none; font-size: 0.875rem; left: 0; @@ -6745,7 +6983,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i bottom: 0; } .navbar.is-fixed-bottom-desktop.has-shadow { - box-shadow: 0 -2px 3px rgba(10, 10, 10, 0.1); + box-shadow: 0 -2px 3px bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .navbar.is-fixed-top-desktop { top: 0; @@ -6807,7 +7045,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i --bulma-pagination-current-background-color: var(--bulma-link); --bulma-pagination-current-border-color: var(--bulma-link); --bulma-pagination-ellipsis-color: var(--bulma-grey-light); - --bulma-pagination-shadow-inset: inset 0 1px 2px rgba(10, 10, 10, 0.2); + --bulma-pagination-shadow-inset: inset 0 1px 2px rgba(var(--bulma-shadow-color-rgb), 0.2); } .pagination { @@ -7087,68 +7325,81 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .panel.is-link .panel-heading { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } .panel.is-link .panel-tabs a.is-active { - border-bottom-color: #485fc7; + border-bottom-color: #3c57d3; } .panel.is-link .panel-block.is-active .panel-icon { - color: #485fc7; + color: #3c57d3; } .panel.is-info .panel-heading { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } .panel.is-info .panel-tabs a.is-active { - border-bottom-color: #3e8ed0; + border-bottom-color: #18b4f7; } .panel.is-info .panel-block.is-active .panel-icon { - color: #3e8ed0; + color: #18b4f7; } .panel.is-success .panel-heading { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } .panel.is-success .panel-tabs a.is-active { - border-bottom-color: #48c78e; + border-bottom-color: #3fcf82; } .panel.is-success .panel-block.is-active .panel-icon { - color: #48c78e; + color: #3fcf82; } .panel.is-warning .panel-heading { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .panel.is-warning .panel-tabs a.is-active { - border-bottom-color: #ffe08a; + border-bottom-color: #ffb60a; } .panel.is-warning .panel-block.is-active .panel-icon { - color: #ffe08a; + color: #ffb60a; } .panel.is-danger .panel-heading { - background-color: #f14668; + background-color: #f15146; color: #fff; } .panel.is-danger .panel-tabs a.is-active { - border-bottom-color: #f14668; + border-bottom-color: #f15146; } .panel.is-danger .panel-block.is-active .panel-icon { - color: #f14668; + color: #f15146; +} + +.panel.is-text .panel-heading { + background-color: #404654; + color: #fff; +} + +.panel.is-text .panel-tabs a.is-active { + border-bottom-color: #404654; +} + +.panel.is-text .panel-block.is-active .panel-icon { + color: #404654; } .panel-tabs:not(:last-child), @@ -9427,183 +9678,171 @@ a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { } .has-text-link { - color: #485fc7 !important; + color: #3c57d3 !important; } a.has-text-link:hover, a.has-text-link:focus { - color: #3449a8 !important; + color: #2942b3 !important; } .has-background-link { - background-color: #485fc7 !important; -} - -.has-text-link-light { - color: #eff1fa !important; -} - -a.has-text-link-light:hover, a.has-text-link-light:focus { - color: #c8cfee !important; -} - -.has-background-link-light { - background-color: #eff1fa !important; -} - -.has-text-link-dark { - color: #3850b7 !important; -} - -a.has-text-link-dark:hover, a.has-text-link-dark:focus { - color: #576dcb !important; -} - -.has-background-link-dark { - background-color: #3850b7 !important; + background-color: #3c57d3 !important; } .has-text-info { - color: #3e8ed0 !important; + color: #18b4f7 !important; } a.has-text-info:hover, a.has-text-info:focus { - color: #2b74b1 !important; + color: #0896d4 !important; } .has-background-info { - background-color: #3e8ed0 !important; + background-color: #18b4f7 !important; } .has-text-info-light { - color: #eff5fb !important; + color: #ebf9fe !important; } a.has-text-info-light:hover, a.has-text-info-light:focus { - color: #c6ddf1 !important; + color: #bae9fd !important; } .has-background-info-light { - background-color: #eff5fb !important; + background-color: #ebf9fe !important; } .has-text-info-dark { - color: #296fa8 !important; + color: #0677a7 !important; } a.has-text-info-dark:hover, a.has-text-info-dark:focus { - color: #368ace !important; + color: #089ad9 !important; } .has-background-info-dark { - background-color: #296fa8 !important; + background-color: #0677a7 !important; } .has-text-success { - color: #48c78e !important; + color: #3fcf82 !important; } a.has-text-success:hover, a.has-text-success:focus { - color: #34a873 !important; + color: #2caf69 !important; } .has-background-success { - background-color: #48c78e !important; + background-color: #3fcf82 !important; } .has-text-success-light { - color: #effaf5 !important; + color: #effbf4 !important; } a.has-text-success-light:hover, a.has-text-success-light:focus { - color: #c8eedd !important; + color: #c6f1da !important; } .has-background-success-light { - background-color: #effaf5 !important; + background-color: #effbf4 !important; } .has-text-success-dark { - color: #257953 !important; + color: #1e7647 !important; } a.has-text-success-dark:hover, a.has-text-success-dark:focus { - color: #31a06e !important; + color: #289f5f !important; } .has-background-success-dark { - background-color: #257953 !important; + background-color: #1e7647 !important; } .has-text-warning { - color: #ffe08a !important; + color: #ffb60a !important; } a.has-text-warning:hover, a.has-text-warning:focus { - color: #ffd257 !important; + color: #d69600 !important; } .has-background-warning { - background-color: #ffe08a !important; + background-color: #ffb60a !important; } .has-text-warning-light { - color: #fffaeb !important; + color: #fff9eb !important; } a.has-text-warning-light:hover, a.has-text-warning-light:focus { - color: #ffecb8 !important; + color: #ffeab8 !important; } .has-background-warning-light { - background-color: #fffaeb !important; + background-color: #fff9eb !important; } .has-text-warning-dark { - color: #946c00 !important; + color: #946800 !important; } a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { - color: #c79200 !important; + color: #c78b00 !important; } .has-background-warning-dark { - background-color: #946c00 !important; + background-color: #946800 !important; } .has-text-danger { - color: #f14668 !important; + color: #f15146 !important; } a.has-text-danger:hover, a.has-text-danger:focus { - color: #ee1742 !important; + color: #ee2517 !important; } .has-background-danger { - background-color: #f14668 !important; + background-color: #f15146 !important; } .has-text-danger-light { - color: #feecf0 !important; + color: #feedec !important; } a.has-text-danger-light:hover, a.has-text-danger-light:focus { - color: #fabdc9 !important; + color: #fac1bd !important; } .has-background-danger-light { - background-color: #feecf0 !important; + background-color: #feedec !important; } .has-text-danger-dark { - color: #cc0f35 !important; + color: #c71b0f !important; } a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { - color: #ee2049 !important; + color: #ee291b !important; } .has-background-danger-dark { - background-color: #cc0f35 !important; + background-color: #c71b0f !important; +} + +.has-text-text { + color: #404654 !important; +} + +a.has-text-text:hover, a.has-text-text:focus { + color: #2a2e37 !important; +} + +.has-background-text { + background-color: #404654 !important; } .has-text-black-bis { @@ -11374,7 +11613,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-white .tabs.is-boxed a:hover, .hero.is-white .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-white .tabs.is-boxed li.is-active a, .hero.is-white .tabs.is-boxed li.is-active a:hover, .hero.is-white .tabs.is-toggle li.is-active a, .hero.is-white .tabs.is-toggle li.is-active a:hover { @@ -11453,7 +11692,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-black .tabs.is-boxed a:hover, .hero.is-black .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-black .tabs.is-boxed li.is-active a, .hero.is-black .tabs.is-boxed li.is-active a:hover, .hero.is-black .tabs.is-toggle li.is-active a, .hero.is-black .tabs.is-toggle li.is-active a:hover { @@ -11532,7 +11771,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-light .tabs.is-boxed a:hover, .hero.is-light .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-light .tabs.is-boxed li.is-active a, .hero.is-light .tabs.is-boxed li.is-active a:hover, .hero.is-light .tabs.is-toggle li.is-active a, .hero.is-light .tabs.is-toggle li.is-active a:hover { @@ -11611,7 +11850,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-dark .tabs.is-boxed a:hover, .hero.is-dark .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-dark .tabs.is-boxed li.is-active a, .hero.is-dark .tabs.is-boxed li.is-active a:hover, .hero.is-dark .tabs.is-toggle li.is-active a, .hero.is-dark .tabs.is-toggle li.is-active a:hover { @@ -11690,7 +11929,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { @@ -11710,7 +11949,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-link { - background-color: #485fc7; + background-color: #3c57d3; color: #fff; } @@ -11734,7 +11973,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { @media screen and (max-width: 1023px) { .hero.is-link .navbar-menu { - background-color: #485fc7; + background-color: #3c57d3; } } @@ -11746,7 +11985,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active, .hero.is-link .navbar-link:hover, .hero.is-link .navbar-link.is-active { - background-color: #3a51bb; + background-color: #2d4ac8; color: #fff; } @@ -11760,7 +11999,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-link .tabs li.is-active a { - color: #485fc7 !important; + color: #3c57d3 !important; opacity: 1; } @@ -11769,27 +12008,27 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-link .tabs.is-boxed a:hover, .hero.is-link .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-link .tabs.is-boxed li.is-active a, .hero.is-link .tabs.is-boxed li.is-active a:hover, .hero.is-link .tabs.is-toggle li.is-active a, .hero.is-link .tabs.is-toggle li.is-active a:hover { background-color: #fff; border-color: #fff; - color: #485fc7; + color: #3c57d3; } .hero.is-link.is-bold { - background-image: linear-gradient(141deg, #2959b3 0%, #485fc7 71%, #5658d2 100%); + background-image: linear-gradient(141deg, #1e56be 0%, #3c57d3 71%, #4b4ddd 100%); } @media screen and (max-width: 768px) { .hero.is-link.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #2959b3 0%, #485fc7 71%, #5658d2 100%); + background-image: linear-gradient(141deg, #1e56be 0%, #3c57d3 71%, #4b4ddd 100%); } } .hero.is-info { - background-color: #3e8ed0; + background-color: #18b4f7; color: #fff; } @@ -11813,7 +12052,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { @media screen and (max-width: 1023px) { .hero.is-info .navbar-menu { - background-color: #3e8ed0; + background-color: #18b4f7; } } @@ -11825,7 +12064,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active, .hero.is-info .navbar-link:hover, .hero.is-info .navbar-link.is-active { - background-color: #3082c5; + background-color: #09a8ec; color: #fff; } @@ -11839,7 +12078,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-info .tabs li.is-active a { - color: #3e8ed0 !important; + color: #18b4f7 !important; opacity: 1; } @@ -11848,27 +12087,27 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-info .tabs.is-boxed a:hover, .hero.is-info .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-info .tabs.is-boxed li.is-active a, .hero.is-info .tabs.is-boxed li.is-active a:hover, .hero.is-info .tabs.is-toggle li.is-active a, .hero.is-info .tabs.is-toggle li.is-active a:hover { background-color: #fff; border-color: #fff; - color: #3e8ed0; + color: #18b4f7; } .hero.is-info.is-bold { - background-image: linear-gradient(141deg, #208fbc 0%, #3e8ed0 71%, #4d83db 100%); + background-image: linear-gradient(141deg, #00bedb 0%, #18b4f7 71%, #2b9bfd 100%); } @media screen and (max-width: 768px) { .hero.is-info.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #208fbc 0%, #3e8ed0 71%, #4d83db 100%); + background-image: linear-gradient(141deg, #00bedb 0%, #18b4f7 71%, #2b9bfd 100%); } } .hero.is-success { - background-color: #48c78e; + background-color: #3fcf82; color: #fff; } @@ -11892,7 +12131,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { @media screen and (max-width: 1023px) { .hero.is-success .navbar-menu { - background-color: #48c78e; + background-color: #3fcf82; } } @@ -11904,7 +12143,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .hero.is-success a.navbar-item:hover, .hero.is-success a.navbar-item.is-active, .hero.is-success .navbar-link:hover, .hero.is-success .navbar-link.is-active { - background-color: #3abb81; + background-color: #31c476; color: #fff; } @@ -11918,7 +12157,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-success .tabs li.is-active a { - color: #48c78e !important; + color: #3fcf82 !important; opacity: 1; } @@ -11927,28 +12166,28 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-success .tabs.is-boxed a:hover, .hero.is-success .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-success .tabs.is-boxed li.is-active a, .hero.is-success .tabs.is-boxed li.is-active a:hover, .hero.is-success .tabs.is-toggle li.is-active a, .hero.is-success .tabs.is-toggle li.is-active a:hover { background-color: #fff; border-color: #fff; - color: #48c78e; + color: #3fcf82; } .hero.is-success.is-bold { - background-image: linear-gradient(141deg, #29b35e 0%, #48c78e 71%, #56d2af 100%); + background-image: linear-gradient(141deg, #21ba4f 0%, #3fcf82 71%, #4edaa6 100%); } @media screen and (max-width: 768px) { .hero.is-success.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #29b35e 0%, #48c78e 71%, #56d2af 100%); + background-image: linear-gradient(141deg, #21ba4f 0%, #3fcf82 71%, #4edaa6 100%); } } .hero.is-warning { - background-color: #ffe08a; - color: rgba(0, 0, 0, 0.7); + background-color: #ffb60a; + color: var(--bulma-white); } .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), @@ -11957,38 +12196,38 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-warning .title { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .hero.is-warning .subtitle { - color: rgba(0, 0, 0, 0.9); + color: var(--bulma-white); } .hero.is-warning .subtitle a:not(.button), .hero.is-warning .subtitle strong { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } @media screen and (max-width: 1023px) { .hero.is-warning .navbar-menu { - background-color: #ffe08a; + background-color: #ffb60a; } } .hero.is-warning .navbar-item, .hero.is-warning .navbar-link { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .hero.is-warning a.navbar-item:hover, .hero.is-warning a.navbar-item.is-active, .hero.is-warning .navbar-link:hover, .hero.is-warning .navbar-link.is-active { - background-color: #ffd970; - color: rgba(0, 0, 0, 0.7); + background-color: #f0a800; + color: var(--bulma-white); } .hero.is-warning .tabs a { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); opacity: 0.9; } @@ -11997,36 +12236,36 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-warning .tabs li.is-active a { - color: #ffe08a !important; + color: #ffb60a !important; opacity: 1; } .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { - color: rgba(0, 0, 0, 0.7); + color: var(--bulma-white); } .hero.is-warning .tabs.is-boxed a:hover, .hero.is-warning .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-warning .tabs.is-boxed li.is-active a, .hero.is-warning .tabs.is-boxed li.is-active a:hover, .hero.is-warning .tabs.is-toggle li.is-active a, .hero.is-warning .tabs.is-toggle li.is-active a:hover { - background-color: rgba(0, 0, 0, 0.7); - border-color: rgba(0, 0, 0, 0.7); - color: #ffe08a; + background-color: var(--bulma-white); + border-color: var(--bulma-white); + color: #ffb60a; } .hero.is-warning.is-bold { - background-image: linear-gradient(141deg, #ffb657 0%, #ffe08a 71%, #fff6a3 100%); + background-image: linear-gradient(141deg, #d67200 0%, #ffb60a 71%, #ffe224 100%); } @media screen and (max-width: 768px) { .hero.is-warning.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #ffb657 0%, #ffe08a 71%, #fff6a3 100%); + background-image: linear-gradient(141deg, #d67200 0%, #ffb60a 71%, #ffe224 100%); } } .hero.is-danger { - background-color: #f14668; + background-color: #f15146; color: #fff; } @@ -12050,7 +12289,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { @media screen and (max-width: 1023px) { .hero.is-danger .navbar-menu { - background-color: #f14668; + background-color: #f15146; } } @@ -12062,7 +12301,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .hero.is-danger a.navbar-item:hover, .hero.is-danger a.navbar-item.is-active, .hero.is-danger .navbar-link:hover, .hero.is-danger .navbar-link.is-active { - background-color: #ef2e55; + background-color: #ef3b2e; color: #fff; } @@ -12076,7 +12315,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-danger .tabs li.is-active a { - color: #f14668 !important; + color: #f15146 !important; opacity: 1; } @@ -12085,22 +12324,101 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .hero.is-danger .tabs.is-boxed a:hover, .hero.is-danger .tabs.is-toggle a:hover { - background-color: rgba(10, 10, 10, 0.1); + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); } .hero.is-danger .tabs.is-boxed li.is-active a, .hero.is-danger .tabs.is-boxed li.is-active a:hover, .hero.is-danger .tabs.is-toggle li.is-active a, .hero.is-danger .tabs.is-toggle li.is-active a:hover { background-color: #fff; border-color: #fff; - color: #f14668; + color: #f15146; } .hero.is-danger.is-bold { - background-image: linear-gradient(141deg, #fa0a62 0%, #f14668 71%, #f7595f 100%); + background-image: linear-gradient(141deg, #fa0a22 0%, #f15146 71%, #f77e59 100%); } @media screen and (max-width: 768px) { .hero.is-danger.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #fa0a62 0%, #f14668 71%, #f7595f 100%); + background-image: linear-gradient(141deg, #fa0a22 0%, #f15146 71%, #f77e59 100%); + } +} + +.hero.is-text { + background-color: #404654; + color: #fff; +} + +.hero.is-text a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), +.hero.is-text strong { + color: inherit; +} + +.hero.is-text .title { + color: #fff; +} + +.hero.is-text .subtitle { + color: rgba(255, 255, 255, 0.9); +} + +.hero.is-text .subtitle a:not(.button), +.hero.is-text .subtitle strong { + color: #fff; +} + +@media screen and (max-width: 1023px) { + .hero.is-text .navbar-menu { + background-color: #404654; + } +} + +.hero.is-text .navbar-item, +.hero.is-text .navbar-link { + color: rgba(255, 255, 255, 0.7); +} + +.hero.is-text a.navbar-item:hover, .hero.is-text a.navbar-item.is-active, +.hero.is-text .navbar-link:hover, +.hero.is-text .navbar-link.is-active { + background-color: #353a46; + color: #fff; +} + +.hero.is-text .tabs a { + color: #fff; + opacity: 0.9; +} + +.hero.is-text .tabs a:hover { + opacity: 1; +} + +.hero.is-text .tabs li.is-active a { + color: #404654 !important; + opacity: 1; +} + +.hero.is-text .tabs.is-boxed a, .hero.is-text .tabs.is-toggle a { + color: #fff; +} + +.hero.is-text .tabs.is-boxed a:hover, .hero.is-text .tabs.is-toggle a:hover { + background-color: bulmargba(var(--bulma-shadow-color-rgb), 0.1); +} + +.hero.is-text .tabs.is-boxed li.is-active a, .hero.is-text .tabs.is-boxed li.is-active a:hover, .hero.is-text .tabs.is-toggle li.is-active a, .hero.is-text .tabs.is-toggle li.is-active a:hover { + background-color: #fff; + border-color: #fff; + color: #404654; +} + +.hero.is-text.is-bold { + background-image: linear-gradient(141deg, #25303c 0%, #404654 71%, #464b67 100%); +} + +@media screen and (max-width: 768px) { + .hero.is-text.is-bold .navbar-menu { + background-image: linear-gradient(141deg, #25303c 0%, #404654 71%, #464b67 100%); } } @@ -12219,11 +12537,36 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } .footer { - background-color: #fafafa; + background-color: var(--bulma-white-bis); padding: 3rem 1.5rem 6rem; } :root { + --bulma-scheme-main: var(--bulma-white); + --bulma-scheme-main-bis: var(--bulma-white-bis); + --bulma-scheme-main-ter: var(--bulma-white-ter); + --bulma-scheme-invert: var(--bulma-text-00); + --bulma-scheme-invert-bis: var(--bulma-text-05); + --bulma-scheme-invert-ter: var(--bulma-text-10); + --bulma-text: var(--bulma-text-25); + --bulma-text-invert: var(--bulma-white); + --bulma-text-light: var(--bulma-text-55); + --bulma-text-strong: var(--bulma-text-10); + --bulma-background: var(--bulma-text-90); + --bulma-border: var(--bulma-text-85); + --bulma-border-hover: var(--bulma-text-80); + --bulma-border-light: var(--bulma-text-90); + --bulma-border-light-hover: var(--bulma-text-85); + --bulma-code: var(--bulma-danger-60); + --bulma-code-background: var(--bulma-text-90); + --bulma-pre: var(--bulma-text-40); + --bulma-pre-background: var(--bulma-text-90); + --bulma-link-hover: var(--bulma-text-20); + --bulma-link-hover-border: var(--bulma-text-70); + --bulma-link-focus: var(--bulma-text-20); + --bulma-link-focus-border: var(--bulma-link); + --bulma-link-active: var(--bulma-text-20); + --bulma-link-active-border: var(--bulma-text-30); --bulma-family-sans-serif: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; --bulma-family-monospace: monospace; --bulma-size-1: 3rem; @@ -12246,34 +12589,6 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-radius-large: 6px; --bulma-radius-rounded: 9999px; --bulma-speed: 86ms; - --bulma-scheme-main: white; - --bulma-scheme-main-bis: #fafafa; - --bulma-scheme-main-ter: whitesmoke; - --bulma-scheme-invert: #0a0a0a; - --bulma-scheme-invert-bis: #121212; - --bulma-scheme-invert-ter: #242424; - --bulma-background: whitesmoke; - --bulma-border: #dbdbdb; - --bulma-border-hover: #b5b5b5; - --bulma-border-light: #ededed; - --bulma-border-light-hover: #b5b5b5; - --bulma-text: #4a4a4a; - --bulma-text-invert: #fff; - --bulma-text-light: #7a7a7a; - --bulma-text-strong: #363636; - --bulma-code: #da1039; - --bulma-code-background: whitesmoke; - --bulma-pre: #4a4a4a; - --bulma-pre-background: whitesmoke; - --bulma-link-light: #eff1fa; - --bulma-link-dark: #3850b7; - --bulma-link-visited: #b86bff; - --bulma-link-hover: #363636; - --bulma-link-hover-border: #b5b5b5; - --bulma-link-focus: #363636; - --bulma-link-focus-border: #485fc7; - --bulma-link-active: #363636; - --bulma-link-active-border: #4a4a4a; --bulma-family-primary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; --bulma-family-secondary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif; --bulma-family-code: monospace; @@ -12281,7 +12596,8 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-size-normal: 1rem; --bulma-size-medium: 1.25rem; --bulma-size-large: 1.5rem; - --bulma-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); + --bulma-shadow: 0 0.5em 1em -0.125em rgba(var(--bulma-shadow-color-rgb), 0.1), 0 0px 0 1px rgba(var(--bulma-shadow-color-rgb), 0.02); + --bulma-shadow-color-rgb: 10.2, 10.2, 10.2; --bulma-white-rgb: 255, 255, 255; --bulma-white-h: 0deg; --bulma-white-s: 0%; @@ -12421,12 +12737,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%); --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%); --bulma-primary-invert: #fff; - --bulma-link-rgb: 71.6295, 94.92035, 198.6705; + --bulma-link-rgb: 59.6445, 87.32985, 210.6555; --bulma-link-h: 229deg; - --bulma-link-s: 53%; + --bulma-link-s: 63%; --bulma-link-l: 53%; - --bulma-link: #485fc7; - --bulma-link-base: #485fc7; + --bulma-link: #3c57d3; + --bulma-link-base: #3c57d3; --bulma-link-00: hsl(var(--bulma-link-h), var(--bulma-link-s), 3%); --bulma-link-05: hsl(var(--bulma-link-h), var(--bulma-link-s), 8%); --bulma-link-10: hsl(var(--bulma-link-h), var(--bulma-link-s), 13%); @@ -12449,12 +12765,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%); --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%); --bulma-link-invert: #fff; - --bulma-info-rgb: 62.0415, 142.46085, 208.2585; - --bulma-info-h: 207deg; - --bulma-info-s: 61%; + --bulma-info-rgb: 23.6895, 179.7342, 246.6105; + --bulma-info-h: 198deg; + --bulma-info-s: 93%; --bulma-info-l: 53%; - --bulma-info: #3e8ed0; - --bulma-info-base: #3e8ed0; + --bulma-info: #18b4f7; + --bulma-info-base: #18b4f7; --bulma-info-00: hsl(var(--bulma-info-h), var(--bulma-info-s), 3%); --bulma-info-05: hsl(var(--bulma-info-h), var(--bulma-info-s), 8%); --bulma-info-10: hsl(var(--bulma-info-h), var(--bulma-info-s), 13%); @@ -12477,12 +12793,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%); --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%); --bulma-info-invert: #fff; - --bulma-success-rgb: 71.6295, 198.6705, 141.50205; - --bulma-success-h: 153deg; - --bulma-success-s: 53%; + --bulma-success-rgb: 63.24, 207.06, 130.356; + --bulma-success-h: 148deg; + --bulma-success-s: 60%; --bulma-success-l: 53%; - --bulma-success: #48c78e; - --bulma-success-base: #48c78e; + --bulma-success: #3fcf82; + --bulma-success-base: #3fcf82; --bulma-success-00: hsl(var(--bulma-success-h), var(--bulma-success-s), 3%); --bulma-success-05: hsl(var(--bulma-success-h), var(--bulma-success-s), 8%); --bulma-success-10: hsl(var(--bulma-success-h), var(--bulma-success-s), 13%); @@ -12505,12 +12821,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%); --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%); --bulma-success-invert: #fff; - --bulma-warning-rgb: 255, 223.72, 137.7; - --bulma-warning-h: 44deg; + --bulma-warning-rgb: 255, 181.56, 10.2; + --bulma-warning-h: 42deg; --bulma-warning-s: 100%; - --bulma-warning-l: 77%; - --bulma-warning: #ffe08a; - --bulma-warning-base: #ffe08a; + --bulma-warning-l: 52%; + --bulma-warning: #ffb60a; + --bulma-warning-base: #ffb60a; --bulma-warning-00: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 2%); --bulma-warning-05: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 7%); --bulma-warning-10: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 12%); @@ -12531,13 +12847,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-warning-85: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 87%); --bulma-warning-90: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 92%); --bulma-warning-95: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 97%); - --bulma-warning-invert: rgba(0, 0, 0, 0.7); - --bulma-danger-rgb: 241.077, 70.023, 104.2338; - --bulma-danger-h: 348deg; + --bulma-warning-95: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 97%); + --bulma-warning-invert: var(--bulma-white); + --bulma-danger-rgb: 241.077, 81.4266, 70.023; + --bulma-danger-h: 4deg; --bulma-danger-s: 86%; --bulma-danger-l: 61%; - --bulma-danger: #f14668; - --bulma-danger-base: #f14668; + --bulma-danger: #f15146; + --bulma-danger-base: #f15146; --bulma-danger-00: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 1%); --bulma-danger-05: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 6%); --bulma-danger-10: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 11%); @@ -12560,6 +12877,33 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%); --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%); --bulma-danger-invert: #fff; + --bulma-text-rgb: 63.597, 70.1539, 84.303; + --bulma-text-h: 221deg; + --bulma-text-s: 14%; + --bulma-text-l: 29%; + --bulma-text: #404654; + --bulma-text-base: #404654; + --bulma-text-00: hsl(var(--bulma-text-h), var(--bulma-text-s), 4%); + --bulma-text-05: hsl(var(--bulma-text-h), var(--bulma-text-s), 9%); + --bulma-text-10: hsl(var(--bulma-text-h), var(--bulma-text-s), 14%); + --bulma-text-15: hsl(var(--bulma-text-h), var(--bulma-text-s), 19%); + --bulma-text-20: hsl(var(--bulma-text-h), var(--bulma-text-s), 24%); + --bulma-text-25: hsl(var(--bulma-text-h), var(--bulma-text-s), 29%); + --bulma-text-30: hsl(var(--bulma-text-h), var(--bulma-text-s), 34%); + --bulma-text-35: hsl(var(--bulma-text-h), var(--bulma-text-s), 39%); + --bulma-text-40: hsl(var(--bulma-text-h), var(--bulma-text-s), 44%); + --bulma-text-45: hsl(var(--bulma-text-h), var(--bulma-text-s), 49%); + --bulma-text-50: hsl(var(--bulma-text-h), var(--bulma-text-s), 54%); + --bulma-text-55: hsl(var(--bulma-text-h), var(--bulma-text-s), 59%); + --bulma-text-60: hsl(var(--bulma-text-h), var(--bulma-text-s), 64%); + --bulma-text-65: hsl(var(--bulma-text-h), var(--bulma-text-s), 69%); + --bulma-text-70: hsl(var(--bulma-text-h), var(--bulma-text-s), 74%); + --bulma-text-75: hsl(var(--bulma-text-h), var(--bulma-text-s), 79%); + --bulma-text-80: hsl(var(--bulma-text-h), var(--bulma-text-s), 84%); + --bulma-text-85: hsl(var(--bulma-text-h), var(--bulma-text-s), 89%); + --bulma-text-90: hsl(var(--bulma-text-h), var(--bulma-text-s), 94%); + --bulma-text-95: hsl(var(--bulma-text-h), var(--bulma-text-s), 99%); + --bulma-text-invert: #fff; --bulma-black-bis: #121212; --bulma-black-ter: #242424; --bulma-grey-darker: #363636; @@ -12569,4 +12913,38 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { --bulma-grey-lighter: #dbdbdb; --bulma-white-ter: whitesmoke; --bulma-white-bis: #fafafa; + /*@include register-vars( + ( + scheme-main: var(--bulma-white), + scheme-main-bis: var(--bulma-white-bis), + scheme-main-ter: var(--bulma-white-ter), + scheme-invert: var(--bulma-text-00), + scheme-invert-bis: var(--bulma-text-05), + scheme-invert-ter: var(--bulma-text-10), + + text: var(--bulma-text-25), + text-invert: var(--bulma-white), + text-light: var(--bulma-text-55), + text-strong: var(--bulma-text-10), + + background: var(--bulma-text-90), + border: var(--bulma-text-85), + border-hover: var(--bulma-text-80), + border-light: var(--bulma-text-90), + border-light-hover: var(--bulma-text-85), + + code: var(--bulma-danger-60), + code-background: var(--bulma-text-90), + pre: var(--bulma-text-40), + pre-background: var(--bulma-text-90), + + link-visited: #b86bff, + link-hover: var(--bulma-text-20), + link-hover-border: var(--bulma-text-70), + link-focus: var(--bulma-text-20), + link-focus-border: var(--bulma-link), + link-active: var(--bulma-text-20), + link-active-border: var(--bulma-text-30), + ) + );*/ } diff --git a/docs/cyp/base/generic.html b/docs/cyp/base/generic.html index 69994c28..f548a54a 100644 --- a/docs/cyp/base/generic.html +++ b/docs/cyp/base/generic.html @@ -10,24 +10,38 @@ title: Base/Generic
header
hgroup
section
-body + + body + -input + optgroup - + code 
precode
-Bulma: a modern CSS framework based on Flexbox +Bulma: a modern CSS framework based on Flexbox Link strong -
hr -img +
+ small span strong
fieldset
-
thtd
+ + + + + +
thtd
- - + +
diff --git a/sass/components/card.scss b/sass/components/card.scss index 85788fee..f20a4f33 100644 --- a/sass/components/card.scss +++ b/sass/components/card.scss @@ -8,7 +8,7 @@ $card-radius: 0.25rem !default; $card-header-background-color: transparent !default; $card-header-color: getVar("text-strong") !default; $card-header-padding: 0.75rem 1rem !default; -$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default; // TODO +$card-header-shadow: 0 0.125em 0.25em rgba(getVar("shadow-color-rgb"), 0.1) !default; // TODO $card-header-weight: getVar("weight-bold") !default; $card-content-background-color: transparent !default; diff --git a/sass/components/modal.scss b/sass/components/modal.scss index 5a976411..82dd6a11 100644 --- a/sass/components/modal.scss +++ b/sass/components/modal.scss @@ -2,7 +2,7 @@ $modal-z: 40 !default; -$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default; +$modal-background-background-color: bulmargba(getVar("shadow-color-rgb"), 0.86) !default; $modal-content-width: 640px !default; $modal-content-margin-mobile: 20px !default; diff --git a/sass/components/navbar.scss b/sass/components/navbar.scss index 0c68624f..b7ab606a 100644 --- a/sass/components/navbar.scss +++ b/sass/components/navbar.scss @@ -34,8 +34,8 @@ $navbar-dropdown-radius: getVar("radius-large") !default; $navbar-dropdown-z: 20 !default; $navbar-dropdown-boxed-radius: getVar("radius-large") !default; -$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), - 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default; +$navbar-dropdown-boxed-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1), + 0 0 0 1px bulmargba(getVar("shadow-color-rgb"), 0.1) !default; $navbar-dropdown-item-hover-color: getVar("scheme-invert") !default; $navbar-dropdown-item-hover-background-color: getVar("background") !default; @@ -396,7 +396,7 @@ a.#{$class-prefix}navbar-item, .#{$class-prefix}navbar-menu { background-color: getVar("navbar-background-color"); - box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1); + box-shadow: 0 8px 16px bulmargba(getVar("shadow-color-rgb"), 0.1); padding: 0.5rem 0; &.is-active { @@ -415,7 +415,7 @@ a.#{$class-prefix}navbar-item, bottom: 0; &.has-shadow { - box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1); } } @@ -541,7 +541,7 @@ a.#{$class-prefix}navbar-item, getVar("navbar-dropdown-radius") 0 0; border-top: none; bottom: 100%; - box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1); + box-shadow: 0 -8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1); top: auto; } } @@ -585,7 +585,7 @@ a.#{$class-prefix}navbar-item, border-bottom-left-radius: getVar("navbar-dropdown-radius"); border-bottom-right-radius: getVar("navbar-dropdown-radius"); border-top: getVar("navbar-dropdown-border-top"); - box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1); + box-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1); display: none; font-size: 0.875rem; @include ltr-position(0, false); @@ -662,7 +662,7 @@ a.#{$class-prefix}navbar-item, bottom: 0; &.has-shadow { - box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1); + box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1); } } diff --git a/sass/components/pagination.scss b/sass/components/pagination.scss index 543183c3..8be40e92 100644 --- a/sass/components/pagination.scss +++ b/sass/components/pagination.scss @@ -33,7 +33,7 @@ $pagination-current-border-color: getVar("link") !default; $pagination-ellipsis-color: getVar("grey-light") !default; -$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default; +$pagination-shadow-inset: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2) !default; :root { @include register-vars( diff --git a/sass/elements/box.scss b/sass/elements/box.scss index 8b922295..6c234b06 100644 --- a/sass/elements/box.scss +++ b/sass/elements/box.scss @@ -6,9 +6,9 @@ $box-radius: getVar("radius-large") !default; $box-shadow: getVar("shadow") !default; $box-padding: 1.25rem !default; -$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), +$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba(getVar("shadow-color-rgb"), 0.1), 0 0 0 1px getVar("link") !default; -$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), +$box-link-active-shadow: inset 0 1px 2px rgba(getVar("shadow-color-rgb"), 0.2), 0 0 0 1px getVar("link") !default; :root { diff --git a/sass/form/shared.scss b/sass/form/shared.scss index 4f224acb..8baa5ba8 100644 --- a/sass/form/shared.scss +++ b/sass/form/shared.scss @@ -7,7 +7,7 @@ $input-color: $text-strong !default; $input-background-color: $scheme-main !default; $input-border-color: $border !default; $input-height: $control-height !default; -$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default; +$input-shadow: inset 0 0.0625em 0.125em rgba(getVar("shadow-color-rgb"), 0.05) !default; $input-placeholder-color: bulmaRgba($input-color, 0.3) !default; $input-hover-color: $text-strong !default; diff --git a/sass/layout/hero.scss b/sass/layout/hero.scss index 76c8934e..21f646f0 100644 --- a/sass/layout/hero.scss +++ b/sass/layout/hero.scss @@ -95,7 +95,7 @@ $hero-colors: $colors !default; color: $color-invert; &:hover { - background-color: bulmaRgba($scheme-invert, 0.1); + background-color: bulmargba(getVar("shadow-color-rgb"), 0.1); } } diff --git a/sass/themes/dark.scss b/sass/themes/dark.scss new file mode 100644 index 00000000..e21a0be4 --- /dev/null +++ b/sass/themes/dark.scss @@ -0,0 +1,64 @@ +// $scheme-main: $black; +// $scheme-main-bis: $black-bis; +// $scheme-main-ter: $black-ter; +// $scheme-invert: $white; +// $scheme-invert-bis: $white-bis; +// $scheme-invert-ter: $white-ter; + +// $background: $black-ter; + +// $border: $grey-darker; +// $border-hover: $grey-dark; +// $border-light: $grey-darker; +// $border-light-hover: $grey-dark; + +// $text: $grey-light; +// $text-invert: $grey-darker; +// $text-light: $grey; +// $text-strong: $white; + +// $link-hover: $white; +// $link-hover-border: $grey-dark; + +// $link-focus: $white; +// $link-focus-border: $blue; + +// $link-active: $white; +// $link-active-border: $grey-light; + +@include bulma-theme($name: "dark") { + @include register-vars( + ( + scheme-main: #{$black-bis}, + scheme-main-bis: #{$black-ter}, + scheme-main-ter: #{$grey-darker}, + scheme-invert: #{$white}, + scheme-invert-bis: #{$white-bis}, + scheme-invert-ter: #{$white-ter}, + + background: #{$black-ter}, + + border: #{$grey-darker}, + border-hover: #{$grey-dark}, + border-light: #{$grey-darker}, + border-light-hover: #{$grey-dark}, + + text: #{$grey-light}, + text-invert: #{$grey-darker}, + text-light: #{$grey}, + text-strong: #{$white}, + + link-hover: #{$white}, + link-hover-border: #{$grey-dark}, + + link-focus: #{$white}, + link-focus-border: #{$blue}, + + link-active: #{$white}, + link-active-border: #{$grey-light}, + + shadow: #{0 0.5em 1em -0.125em rgba($white, 0.2), + 0 0px 0 1px rgba($white, 0.04)}, + ) + ); +} diff --git a/sass/themes/default.scss b/sass/themes/default.scss index 225afc4b..e7bdc491 100644 --- a/sass/themes/default.scss +++ b/sass/themes/default.scss @@ -1,6 +1,31 @@ :root { @include register-vars( ( + scheme-main: #{$scheme-main}, + scheme-main-bis: #{$scheme-main-bis}, + scheme-main-ter: #{$scheme-main-ter}, + scheme-invert: #{$scheme-invert}, + scheme-invert-bis: #{$scheme-invert-bis}, + scheme-invert-ter: #{$scheme-invert-ter}, + text: #{$text}, + text-invert: #{$text-invert}, + text-light: #{$text-light}, + text-strong: #{$text-strong}, + background: #{$background}, + border: #{$border}, + border-hover: #{$border-hover}, + border-light: #{$border-light}, + border-light-hover: #{$border-light-hover}, + code: #{$code}, + code-background: #{$code-background}, + pre: #{$pre}, + pre-background: #{$pre-background}, + link-hover: #{$link-hover}, + link-hover-border: #{$link-hover-border}, + link-focus: #{$link-focus}, + link-focus-border: #{$link-focus-border}, + link-active: #{$link-active}, + link-active-border: #{$link-active-border}, family-sans-serif: #{$family-sans-serif}, family-monospace: #{$family-monospace}, size-1: #{$size-1}, @@ -23,35 +48,6 @@ radius-large: #{$radius-large}, radius-rounded: #{$radius-rounded}, speed: #{$speed}, - - scheme-main: #{$white}, - scheme-main-bis: #{$white-bis}, - scheme-main-ter: #{$white-ter}, - scheme-invert: #{$black}, - scheme-invert-bis: #{$black-bis}, - scheme-invert-ter: #{$black-ter}, - background: #{$background}, - border: #{$border}, - border-hover: #{$border-hover}, - border-light: #{$border-light}, - border-light-hover: #{$border-light-hover}, - text: #{$text}, - text-invert: #{$text-invert}, - text-light: #{$text-light}, - text-strong: #{$text-strong}, - code: #{$code}, - code-background: #{$code-background}, - pre: #{$pre}, - pre-background: #{$pre-background}, - link-light: #{$link-light}, - link-dark: #{$link-dark}, - link-visited: #{$link-visited}, - link-hover: #{$link-hover}, - link-hover-border: #{$link-hover-border}, - link-focus: #{$link-focus}, - link-focus-border: #{$link-focus-border}, - link-active: #{$link-active}, - link-active-border: #{$link-active-border}, family-primary: #{$family-primary}, family-secondary: #{$family-secondary}, family-code: #{$family-code}, @@ -63,6 +59,8 @@ ) ); + @include register-rgb("shadow-color", $shadow-color); + @each $name, $pair in $colors { $base: nth($pair, 1); $invert: nth($pair, 2); @@ -75,4 +73,39 @@ @each $name, $shade in $shades { @include register-var($name, $shade); } + + /*@include register-vars( + ( + scheme-main: #{getVar("white")}, + scheme-main-bis: #{getVar("white-bis")}, + scheme-main-ter: #{getVar("white-ter")}, + scheme-invert: #{getVar("text-00")}, + scheme-invert-bis: #{getVar("text-05")}, + scheme-invert-ter: #{getVar("text-10")}, + + text: #{getVar("text-25")}, + text-invert: #{getVar("white")}, + text-light: #{getVar("text-55")}, + text-strong: #{getVar("text-10")}, + + background: #{getVar("text-90")}, + border: #{getVar("text-85")}, + border-hover: #{getVar("text-80")}, + border-light: #{getVar("text-90")}, + border-light-hover: #{getVar("text-85")}, + + code: #{getVar("danger-60")}, + code-background: #{getVar("text-90")}, + pre: #{getVar("text-40")}, + pre-background: #{getVar("text-90")}, + + link-visited: #{$link-visited}, + link-hover: #{$link-hover}, + link-hover-border: #{$link-hover-border}, + link-focus: #{$link-focus}, + link-focus-border: #{$link-focus-border}, + link-active: #{$link-active}, + link-active-border: #{$link-active-border}, + ) + );*/ } diff --git a/sass/utilities/css-variables.scss b/sass/utilities/css-variables.scss index a9be8140..c34598cd 100644 --- a/sass/utilities/css-variables.scss +++ b/sass/utilities/css-variables.scss @@ -1,5 +1,4 @@ @function buildVarName($name, $prefix: "", $suffix: "") { - @debug $cssvars-prefix; @return "--#{$cssvars-prefix}#{$prefix}#{$name}#{$suffix}"; } @@ -8,6 +7,11 @@ @return var(#{$varName}); } +@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}; @@ -75,3 +79,22 @@ @include register-var($name, $invert, "", "-invert"); } + +@mixin bulma-theme($name, $scope: "") { + @if ($scope == "parent") { + [data-#{$class-prefix}theme="#{$name}"] &, + .#{$class-prefix}theme-#{$name} & { + @content; + } + } @else if ($scope == "self") { + &[data-#{$class-prefix}theme="#{$name}"], + &.#{$class-prefix}theme-#{$name} { + @content; + } + } @else { + [data-#{$class-prefix}theme="#{$name}"], + .#{$class-prefix}theme-#{$name} { + @content; + } + } +} diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss index 10189788..3b66f686 100644 --- a/sass/utilities/derived-variables.scss +++ b/sass/utilities/derived-variables.scss @@ -1,5 +1,6 @@ @import "initial-variables"; @import "functions"; +@import "css-variables"; $primary: $turquoise !default; @@ -31,7 +32,7 @@ $info-dark: findDarkColor($info) !default; $success-invert: findColorInvert($success) !default; $success-light: findLightColor($success) !default; $success-dark: findDarkColor($success) !default; -$warning-invert: findColorInvert($warning) !default; +$warning-invert: #{getVar("white")} !default; $warning-light: findLightColor($warning) !default; $warning-dark: findDarkColor($warning) !default; $danger-invert: findColorInvert($danger) !default; @@ -42,51 +43,49 @@ $dark-invert: findColorInvert($dark) !default; // General colors -$scheme-main: $white !default; -$scheme-main-bis: $white-bis !default; -$scheme-main-ter: $white-ter !default; -$scheme-invert: $black !default; -$scheme-invert-bis: $black-bis !default; -$scheme-invert-ter: $black-ter !default; +$scheme-main: #{getVar("white")} !default; +$scheme-main-bis: #{getVar("white-bis")} !default; +$scheme-main-ter: #{getVar("white-ter")} !default; +$scheme-invert: #{getVar("text-00")} !default; +$scheme-invert-bis: #{getVar("text-05")} !default; +$scheme-invert-ter: #{getVar("text-10")} !default; -$background: $white-ter !default; +$background: #{getVar("text-90")} !default; -$border: $grey-lighter !default; -$border-hover: $grey-light !default; -$border-light: $grey-lightest !default; -$border-light-hover: $grey-light !default; +$border: #{getVar("text-85")} !default; +$border-hover: #{getVar("text-80")} !default; +$border-light: #{getVar("text-90")} !default; +$border-light-hover: #{getVar("text-85")} !default; // Text colors -$text: $grey-dark !default; -$text-invert: findColorInvert($text) !default; -$text-light: $grey !default; -$text-strong: $grey-darker !default; +$text: #{getVar("text-25")} !default; +$text-invert: #{getVar("white")} !default; +$text-light: #{getVar("text-55")} !default; +$text-strong: #{getVar("text-10")} !default; // Code colors -$code: darken($red, 15%) !default; -$code-background: $background !default; +$code: #{getVar("danger-60")} !default; +$code-background: #{getVar("text-90")} !default; -$pre: $text !default; -$pre-background: $background !default; +$pre: #{getVar("text-40")} !default; +$pre-background: #{getVar("text-90")} !default; // Link colors $link: $blue !default; $link-invert: findColorInvert($link) !default; -$link-light: findLightColor($link) !default; -$link-dark: findDarkColor($link) !default; $link-visited: $purple !default; -$link-hover: $grey-darker !default; -$link-hover-border: $grey-light !default; +$link-hover: #{getVar("text-20")} !default; +$link-hover-border: #{getVar("text-70")} !default; -$link-focus: $grey-darker !default; -$link-focus-border: $blue !default; +$link-focus: #{getVar("text-20")} !default; +$link-focus-border: #{getVar("link")} !default; -$link-active: $grey-darker !default; -$link-active-border: $grey-dark !default; +$link-active: #{getVar("text-20")} !default; +$link-active-border: #{getVar("text-30")} !default; // Typography @@ -101,8 +100,9 @@ $size-large: $size-4 !default; // Effects -$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), - 0 0px 0 1px rgba($scheme-invert, 0.02) !default; +$shadow-color: $black !default; +$shadow: 0 0.5em 1em -0.125em rgba(var(--bulma-shadow-color-rgb), 0.1), + 0 0px 0 1px rgba(var(--bulma-shadow-color-rgb), 0.02) !default; // Lists and maps $custom-colors: null !default; @@ -135,8 +135,6 @@ $colors: mergeColorMaps( "link": ( $link, $link-invert, - $link-light, - $link-dark ), "info": ( $info, @@ -161,6 +159,10 @@ $colors: mergeColorMaps( $danger-invert, $danger-light, $danger-dark + ), + "text": ( + hsl(221, 14%, 29%), + #fff ) ), $custom-colors diff --git a/sass/utilities/initial-variables.scss b/sass/utilities/initial-variables.scss index ce797306..1a5e0389 100644 --- a/sass/utilities/initial-variables.scss +++ b/sass/utilities/initial-variables.scss @@ -16,13 +16,13 @@ $white-bis: hsl(0, 0%, 98%) !default; $white: hsl(0, 0%, 100%) !default; $orange: hsl(14, 100%, 53%) !default; -$yellow: hsl(44, 100%, 77%) !default; -$green: hsl(153, 53%, 53%) !default; +$yellow: hsl(42, 100%, 52%) !default; +$green: hsl(148, 60%, 53%) !default; $turquoise: hsl(171, 100%, 41%) !default; -$cyan: hsl(207, 61%, 53%) !default; -$blue: hsl(229, 53%, 53%) !default; +$cyan: hsl(198, 93%, 53%) !default; +$blue: hsl(229, 63%, 53%) !default; $purple: hsl(271, 100%, 71%) !default; -$red: hsl(348, 86%, 61%) !default; +$red: hsl(4, 86%, 61%) !default; // Typography diff --git a/sass/utilities/mixins.scss b/sass/utilities/mixins.scss index 4aab21d7..c131281a 100644 --- a/sass/utilities/mixins.scss +++ b/sass/utilities/mixins.scss @@ -314,7 +314,7 @@ -moz-appearance: none; -webkit-appearance: none; - background-color: bulmaRgba($scheme-invert, 0.2); + background-color: bulmargba(getVar("shadow-color-rgb"), 0.2); border: none; border-radius: $radius-rounded; cursor: pointer; @@ -357,11 +357,11 @@ &:hover, &:focus { - background-color: bulmaRgba($scheme-invert, 0.3); + background-color: bulmargba(getVar("shadow-color-rgb"), 0.3); } &:active { - background-color: bulmaRgba($scheme-invert, 0.4); + background-color: bulmargba(getVar("shadow-color-rgb"), 0.4); } // Sizes