From cb013f85d50af26396d8f0f2970fde9bc6cf22c6 Mon Sep 17 00:00:00 2001 From: Rishi Ghan Date: Tue, 29 Jun 2021 11:56:29 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20CV=20Match=20drawer=20beautifica?= =?UTF-8?q?tion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/client/actions/fileops.actions.tsx | 4 + src/client/assets/scss/App.css | 1080 ++++++++++++---------- src/client/assets/scss/App.scss | 26 +- src/client/components/Card.tsx | 2 +- src/client/components/ComicDetail.tsx | 44 +- src/client/components/MatchResult.tsx | 25 +- src/client/reducers/comicinfo.reducer.js | 3 + yarn.lock | 8 +- 9 files changed, 695 insertions(+), 499 deletions(-) diff --git a/package.json b/package.json index 8af4e7a..53a25ce 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ "babel-plugin-transform-class-properties": "^6.24.1", "body-parser": "^1.19.0", "buffer": "^6.0.3", - "bulma": "^0.9.2", + "bulma": "^0.9.3", "clean-webpack-plugin": "^1.0.0", "comlink": "^4.3.0", "compromise": "^13.10.5", diff --git a/src/client/actions/fileops.actions.tsx b/src/client/actions/fileops.actions.tsx index 572ded8..2b15088 100644 --- a/src/client/actions/fileops.actions.tsx +++ b/src/client/actions/fileops.actions.tsx @@ -132,6 +132,10 @@ export const fetchComicVineMatches = (searchPayload) => (dispatch) => { dispatch({ type: CV_SEARCH_SUCCESS, searchResults: response.data, + searchQueryObject: { + issue: issueSearchQuery, + series: seriesSearchQuery, + }, }); }); { diff --git a/src/client/assets/scss/App.css b/src/client/assets/scss/App.css index 405caa3..5179284 100644 --- a/src/client/assets/scss/App.css +++ b/src/client/assets/scss/App.css @@ -1,5 +1,5 @@ @charset "UTF-8"; -/*! bulma.io v0.9.2 | MIT License | github.com/jgthms/bulma */ +/*! bulma.io v0.9.3 | MIT License | github.com/jgthms/bulma */ /* Bulma Utilities */ .pagination-previous, .pagination-next, @@ -83,7 +83,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields width: 0.625em; } -.tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .level:not(:last-child), .breadcrumb:not(:last-child), .highlight:not(:last-child), .block:not(:last-child), .title:not(:last-child), +.tabs:not(:last-child), .pagination:not(:last-child), .message:not(:last-child), .level:not(:last-child), .breadcrumb:not(:last-child), .block:not(:last-child), .title:not(:last-child), .subtitle:not(:last-child), .table-container:not(:last-child), .table:not(:last-child), .progress:not(:last-child), .notification:not(:last-child), .content:not(:last-child), .box:not(:last-child) { margin-bottom: 1.5rem; } @@ -98,7 +98,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields -webkit-appearance: none; background-color: rgba(10, 10, 10, 0.2); border: none; - border-radius: 290486px; + border-radius: 9999px; cursor: pointer; pointer-events: auto; display: inline-block; @@ -167,7 +167,7 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields .control.is-loading::after, .select.is-loading::after, .loader, .button.is-loading::after { animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; - border-radius: 290486px; + border-radius: 9999px; border-right-color: transparent; border-top-color: transparent; content: ""; @@ -201,6 +201,19 @@ fieldset[disabled] .file-name, fieldset[disabled] .select select, .select fields top: 0; } +.navbar-burger { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + /* Bulma Base */ /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ html, @@ -329,7 +342,7 @@ body { } a { - color: #3273dc; + color: #485fc7; cursor: pointer; text-decoration: none; } @@ -432,10 +445,10 @@ table th { } a.box:hover, a.box:focus { - box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc; + box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px #485fc7; } a.box:active { - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #485fc7; } .button { @@ -476,11 +489,11 @@ a.box:active { color: #363636; } .button:focus, .button.is-focused { - border-color: #3273dc; + border-color: #485fc7; color: #363636; } .button:focus:not(:active), .button.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .button:active, .button.is-active { border-color: #4a4a4a; @@ -508,11 +521,11 @@ a.box:active { .button.is-ghost { background: none; border-color: transparent; - color: #3273dc; + color: #485fc7; text-decoration: none; } .button.is-ghost:hover, .button.is-ghost.is-hovered { - color: #3273dc; + color: #485fc7; text-decoration: underline; } .button.is-white { @@ -945,12 +958,12 @@ a.box:active { color: #00947e; } .button.is-link { - background-color: #3273dc; + background-color: #485fc7; border-color: transparent; color: #fff; } .button.is-link:hover, .button.is-link.is-hovered { - background-color: #276cda; + background-color: #3e56c4; border-color: transparent; color: #fff; } @@ -959,21 +972,21 @@ a.box:active { color: #fff; } .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .button.is-link:active, .button.is-link.is-active { - background-color: #2366d1; + background-color: #3a51bb; border-color: transparent; color: #fff; } .button.is-link[disabled], fieldset[disabled] .button.is-link { - background-color: #3273dc; + background-color: #485fc7; border-color: transparent; box-shadow: none; } .button.is-link.is-inverted { background-color: #fff; - color: #3273dc; + color: #485fc7; } .button.is-link.is-inverted:hover, .button.is-link.is-inverted.is-hovered { background-color: #f2f2f2; @@ -982,32 +995,32 @@ a.box:active { background-color: #fff; border-color: transparent; box-shadow: none; - color: #3273dc; + color: #485fc7; } .button.is-link.is-loading::after { border-color: transparent transparent #fff #fff !important; } .button.is-link.is-outlined { background-color: transparent; - border-color: #3273dc; - color: #3273dc; + border-color: #485fc7; + color: #485fc7; } .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: #3273dc; - border-color: #3273dc; + background-color: #485fc7; + border-color: #485fc7; color: #fff; } .button.is-link.is-outlined.is-loading::after { - border-color: transparent transparent #3273dc #3273dc !important; + border-color: transparent transparent #485fc7 #485fc7 !important; } .button.is-link.is-outlined.is-loading:hover::after, .button.is-link.is-outlined.is-loading.is-hovered::after, .button.is-link.is-outlined.is-loading:focus::after, .button.is-link.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } .button.is-link.is-outlined[disabled], fieldset[disabled] .button.is-link.is-outlined { background-color: transparent; - border-color: #3273dc; + border-color: #485fc7; box-shadow: none; - color: #3273dc; + color: #485fc7; } .button.is-link.is-inverted.is-outlined { background-color: transparent; @@ -1016,10 +1029,10 @@ a.box:active { } .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: #3273dc; + color: #485fc7; } .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 #3273dc #3273dc !important; + border-color: transparent transparent #485fc7 #485fc7 !important; } .button.is-link.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-link.is-inverted.is-outlined { background-color: transparent; @@ -1028,26 +1041,26 @@ a.box:active { color: #fff; } .button.is-link.is-light { - background-color: #eef3fc; - color: #2160c4; + background-color: #eff1fa; + color: #3850b7; } .button.is-link.is-light:hover, .button.is-link.is-light.is-hovered { - background-color: #e3ecfa; + background-color: #e6e9f7; border-color: transparent; - color: #2160c4; + color: #3850b7; } .button.is-link.is-light:active, .button.is-link.is-light.is-active { - background-color: #d8e4f8; + background-color: #dce0f4; border-color: transparent; - color: #2160c4; + color: #3850b7; } .button.is-info { - background-color: #3298dc; + background-color: #3e8ed0; border-color: transparent; color: #fff; } .button.is-info:hover, .button.is-info.is-hovered { - background-color: #2793da; + background-color: #3488ce; border-color: transparent; color: #fff; } @@ -1056,21 +1069,21 @@ a.box:active { color: #fff; } .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(50, 152, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } .button.is-info:active, .button.is-info.is-active { - background-color: #238cd1; + background-color: #3082c5; border-color: transparent; color: #fff; } .button.is-info[disabled], fieldset[disabled] .button.is-info { - background-color: #3298dc; + background-color: #3e8ed0; border-color: transparent; box-shadow: none; } .button.is-info.is-inverted { background-color: #fff; - color: #3298dc; + color: #3e8ed0; } .button.is-info.is-inverted:hover, .button.is-info.is-inverted.is-hovered { background-color: #f2f2f2; @@ -1079,32 +1092,32 @@ a.box:active { background-color: #fff; border-color: transparent; box-shadow: none; - color: #3298dc; + color: #3e8ed0; } .button.is-info.is-loading::after { border-color: transparent transparent #fff #fff !important; } .button.is-info.is-outlined { background-color: transparent; - border-color: #3298dc; - color: #3298dc; + border-color: #3e8ed0; + color: #3e8ed0; } .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: #3298dc; - border-color: #3298dc; + background-color: #3e8ed0; + border-color: #3e8ed0; color: #fff; } .button.is-info.is-outlined.is-loading::after { - border-color: transparent transparent #3298dc #3298dc !important; + border-color: transparent transparent #3e8ed0 #3e8ed0 !important; } .button.is-info.is-outlined.is-loading:hover::after, .button.is-info.is-outlined.is-loading.is-hovered::after, .button.is-info.is-outlined.is-loading:focus::after, .button.is-info.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } .button.is-info.is-outlined[disabled], fieldset[disabled] .button.is-info.is-outlined { background-color: transparent; - border-color: #3298dc; + border-color: #3e8ed0; box-shadow: none; - color: #3298dc; + color: #3e8ed0; } .button.is-info.is-inverted.is-outlined { background-color: transparent; @@ -1113,10 +1126,10 @@ a.box:active { } .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: #3298dc; + color: #3e8ed0; } .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 #3298dc #3298dc !important; + border-color: transparent transparent #3e8ed0 #3e8ed0 !important; } .button.is-info.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-info.is-inverted.is-outlined { background-color: transparent; @@ -1125,26 +1138,26 @@ a.box:active { color: #fff; } .button.is-info.is-light { - background-color: #eef6fc; - color: #1d72aa; + background-color: #eff5fb; + color: #296fa8; } .button.is-info.is-light:hover, .button.is-info.is-light.is-hovered { - background-color: #e3f1fa; + background-color: #e4eff9; border-color: transparent; - color: #1d72aa; + color: #296fa8; } .button.is-info.is-light:active, .button.is-info.is-light.is-active { - background-color: #d8ebf8; + background-color: #dae9f6; border-color: transparent; - color: #1d72aa; + color: #296fa8; } .button.is-success { - background-color: #48c774; + background-color: #48c78e; border-color: transparent; color: #fff; } .button.is-success:hover, .button.is-success.is-hovered { - background-color: #3ec46d; + background-color: #3ec487; border-color: transparent; color: #fff; } @@ -1153,21 +1166,21 @@ a.box:active { color: #fff; } .button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(72, 199, 116, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } .button.is-success:active, .button.is-success.is-active { - background-color: #3abb67; + background-color: #3abb81; border-color: transparent; color: #fff; } .button.is-success[disabled], fieldset[disabled] .button.is-success { - background-color: #48c774; + background-color: #48c78e; border-color: transparent; box-shadow: none; } .button.is-success.is-inverted { background-color: #fff; - color: #48c774; + color: #48c78e; } .button.is-success.is-inverted:hover, .button.is-success.is-inverted.is-hovered { background-color: #f2f2f2; @@ -1176,32 +1189,32 @@ a.box:active { background-color: #fff; border-color: transparent; box-shadow: none; - color: #48c774; + color: #48c78e; } .button.is-success.is-loading::after { border-color: transparent transparent #fff #fff !important; } .button.is-success.is-outlined { background-color: transparent; - border-color: #48c774; - color: #48c774; + border-color: #48c78e; + color: #48c78e; } .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: #48c774; - border-color: #48c774; + background-color: #48c78e; + border-color: #48c78e; color: #fff; } .button.is-success.is-outlined.is-loading::after { - border-color: transparent transparent #48c774 #48c774 !important; + border-color: transparent transparent #48c78e #48c78e !important; } .button.is-success.is-outlined.is-loading:hover::after, .button.is-success.is-outlined.is-loading.is-hovered::after, .button.is-success.is-outlined.is-loading:focus::after, .button.is-success.is-outlined.is-loading.is-focused::after { border-color: transparent transparent #fff #fff !important; } .button.is-success.is-outlined[disabled], fieldset[disabled] .button.is-success.is-outlined { background-color: transparent; - border-color: #48c774; + border-color: #48c78e; box-shadow: none; - color: #48c774; + color: #48c78e; } .button.is-success.is-inverted.is-outlined { background-color: transparent; @@ -1210,10 +1223,10 @@ a.box:active { } .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: #48c774; + color: #48c78e; } .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 #48c774 #48c774 !important; + border-color: transparent transparent #48c78e #48c78e !important; } .button.is-success.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-success.is-inverted.is-outlined { background-color: transparent; @@ -1222,26 +1235,26 @@ a.box:active { color: #fff; } .button.is-success.is-light { - background-color: #effaf3; - color: #257942; + background-color: #effaf5; + color: #257953; } .button.is-success.is-light:hover, .button.is-success.is-light.is-hovered { - background-color: #e6f7ec; + background-color: #e6f7ef; border-color: transparent; - color: #257942; + color: #257953; } .button.is-success.is-light:active, .button.is-success.is-light.is-active { - background-color: #dcf4e4; + background-color: #dcf4e9; border-color: transparent; - color: #257942; + color: #257953; } .button.is-warning { - background-color: #ffdd57; + background-color: #ffe08a; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-warning:hover, .button.is-warning.is-hovered { - background-color: #ffdb4a; + background-color: #ffdc7d; border-color: transparent; color: rgba(0, 0, 0, 0.7); } @@ -1250,21 +1263,21 @@ a.box:active { color: rgba(0, 0, 0, 0.7); } .button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } .button.is-warning:active, .button.is-warning.is-active { - background-color: #ffd83d; + background-color: #ffd970; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .button.is-warning[disabled], fieldset[disabled] .button.is-warning { - background-color: #ffdd57; + background-color: #ffe08a; border-color: transparent; box-shadow: none; } .button.is-warning.is-inverted { background-color: rgba(0, 0, 0, 0.7); - color: #ffdd57; + color: #ffe08a; } .button.is-warning.is-inverted:hover, .button.is-warning.is-inverted.is-hovered { background-color: rgba(0, 0, 0, 0.7); @@ -1273,32 +1286,32 @@ a.box:active { background-color: rgba(0, 0, 0, 0.7); border-color: transparent; box-shadow: none; - color: #ffdd57; + color: #ffe08a; } .button.is-warning.is-loading::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-warning.is-outlined { background-color: transparent; - border-color: #ffdd57; - color: #ffdd57; + border-color: #ffe08a; + color: #ffe08a; } .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: #ffdd57; - border-color: #ffdd57; + background-color: #ffe08a; + border-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .button.is-warning.is-outlined.is-loading::after { - border-color: transparent transparent #ffdd57 #ffdd57 !important; + border-color: transparent transparent #ffe08a #ffe08a !important; } .button.is-warning.is-outlined.is-loading:hover::after, .button.is-warning.is-outlined.is-loading.is-hovered::after, .button.is-warning.is-outlined.is-loading:focus::after, .button.is-warning.is-outlined.is-loading.is-focused::after { border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } .button.is-warning.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-outlined { background-color: transparent; - border-color: #ffdd57; + border-color: #ffe08a; box-shadow: none; - color: #ffdd57; + color: #ffe08a; } .button.is-warning.is-inverted.is-outlined { background-color: transparent; @@ -1307,10 +1320,10 @@ a.box:active { } .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: #ffdd57; + color: #ffe08a; } .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 #ffdd57 #ffdd57 !important; + border-color: transparent transparent #ffe08a #ffe08a !important; } .button.is-warning.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-warning.is-inverted.is-outlined { background-color: transparent; @@ -1319,18 +1332,18 @@ a.box:active { color: rgba(0, 0, 0, 0.7); } .button.is-warning.is-light { - background-color: #fffbeb; - color: #947600; + background-color: #fffaeb; + color: #946c00; } .button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered { - background-color: #fff8de; + background-color: #fff6de; border-color: transparent; - color: #947600; + color: #946c00; } .button.is-warning.is-light:active, .button.is-warning.is-light.is-active { - background-color: #fff6d1; + background-color: #fff3d1; border-color: transparent; - color: #947600; + color: #946c00; } .button.is-danger { background-color: #f14668; @@ -1460,8 +1473,8 @@ a.box:active { } .button.is-loading::after { position: absolute; - left: calc(50% - (1em / 2)); - top: calc(50% - (1em / 2)); + left: calc(50% - (1em * 0.5)); + top: calc(50% - (1em * 0.5)); position: absolute !important; } .button.is-static { @@ -1472,7 +1485,7 @@ a.box:active { pointer-events: none; } .button.is-rounded { - border-radius: 290486px; + border-radius: 9999px; padding-left: calc(1em + 0.25em); padding-right: calc(1em + 0.25em); } @@ -1744,6 +1757,9 @@ a.box:active { .content.is-small { font-size: 0.75rem; } +.content.is-normal { + font-size: 1rem; +} .content.is-medium { font-size: 1.25rem; } @@ -1804,7 +1820,7 @@ div.icon-text { width: 100%; } .image img.is-rounded { - border-radius: 290486px; + border-radius: 9999px; } .image.is-fullwidth { width: 100%; @@ -1958,36 +1974,36 @@ div.icon-text { color: #00947e; } .notification.is-link { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .notification.is-link.is-light { - background-color: #eef3fc; - color: #2160c4; + background-color: #eff1fa; + color: #3850b7; } .notification.is-info { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .notification.is-info.is-light { - background-color: #eef6fc; - color: #1d72aa; + background-color: #eff5fb; + color: #296fa8; } .notification.is-success { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .notification.is-success.is-light { - background-color: #effaf3; - color: #257942; + background-color: #effaf5; + color: #257953; } .notification.is-warning { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .notification.is-warning.is-light { - background-color: #fffbeb; - color: #947600; + background-color: #fffaeb; + color: #946c00; } .notification.is-danger { background-color: #f14668; @@ -2002,7 +2018,7 @@ div.icon-text { -moz-appearance: none; -webkit-appearance: none; border: none; - border-radius: 290486px; + border-radius: 9999px; display: block; height: 1rem; overflow: hidden; @@ -2083,52 +2099,52 @@ div.icon-text { background-image: linear-gradient(to right, #00d1b2 30%, #ededed 30%); } .progress.is-link::-webkit-progress-value { - background-color: #3273dc; + background-color: #485fc7; } .progress.is-link::-moz-progress-bar { - background-color: #3273dc; + background-color: #485fc7; } .progress.is-link::-ms-fill { - background-color: #3273dc; + background-color: #485fc7; } .progress.is-link:indeterminate { - background-image: linear-gradient(to right, #3273dc 30%, #ededed 30%); + background-image: linear-gradient(to right, #485fc7 30%, #ededed 30%); } .progress.is-info::-webkit-progress-value { - background-color: #3298dc; + background-color: #3e8ed0; } .progress.is-info::-moz-progress-bar { - background-color: #3298dc; + background-color: #3e8ed0; } .progress.is-info::-ms-fill { - background-color: #3298dc; + background-color: #3e8ed0; } .progress.is-info:indeterminate { - background-image: linear-gradient(to right, #3298dc 30%, #ededed 30%); + background-image: linear-gradient(to right, #3e8ed0 30%, #ededed 30%); } .progress.is-success::-webkit-progress-value { - background-color: #48c774; + background-color: #48c78e; } .progress.is-success::-moz-progress-bar { - background-color: #48c774; + background-color: #48c78e; } .progress.is-success::-ms-fill { - background-color: #48c774; + background-color: #48c78e; } .progress.is-success:indeterminate { - background-image: linear-gradient(to right, #48c774 30%, #ededed 30%); + background-image: linear-gradient(to right, #48c78e 30%, #ededed 30%); } .progress.is-warning::-webkit-progress-value { - background-color: #ffdd57; + background-color: #ffe08a; } .progress.is-warning::-moz-progress-bar { - background-color: #ffdd57; + background-color: #ffe08a; } .progress.is-warning::-ms-fill { - background-color: #ffdd57; + background-color: #ffe08a; } .progress.is-warning:indeterminate { - background-image: linear-gradient(to right, #ffdd57 30%, #ededed 30%); + background-image: linear-gradient(to right, #ffe08a 30%, #ededed 30%); } .progress.is-danger::-webkit-progress-value { background-color: #f14668; @@ -2223,26 +2239,26 @@ div.icon-text { } .table td.is-link, .table th.is-link { - background-color: #3273dc; - border-color: #3273dc; + background-color: #485fc7; + border-color: #485fc7; color: #fff; } .table td.is-info, .table th.is-info { - background-color: #3298dc; - border-color: #3298dc; + background-color: #3e8ed0; + border-color: #3e8ed0; color: #fff; } .table td.is-success, .table th.is-success { - background-color: #48c774; - border-color: #48c774; + background-color: #48c78e; + border-color: #48c78e; color: #fff; } .table td.is-warning, .table th.is-warning { - background-color: #ffdd57; - border-color: #ffdd57; + background-color: #ffe08a; + border-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .table td.is-danger, @@ -2444,36 +2460,36 @@ div.icon-text { color: #00947e; } .tag:not(body).is-link { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .tag:not(body).is-link.is-light { - background-color: #eef3fc; - color: #2160c4; + background-color: #eff1fa; + color: #3850b7; } .tag:not(body).is-info { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .tag:not(body).is-info.is-light { - background-color: #eef6fc; - color: #1d72aa; + background-color: #eff5fb; + color: #296fa8; } .tag:not(body).is-success { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .tag:not(body).is-success.is-light { - background-color: #effaf3; - color: #257942; + background-color: #effaf5; + color: #257953; } .tag:not(body).is-warning { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .tag:not(body).is-warning.is-light { - background-color: #fffbeb; - color: #947600; + background-color: #fffaeb; + color: #946c00; } .tag:not(body).is-danger { background-color: #f14668; @@ -2535,7 +2551,7 @@ div.icon-text { background-color: #dbdbdb; } .tag:not(body).is-rounded { - border-radius: 290486px; + border-radius: 9999px; } a.tag:hover { @@ -2575,9 +2591,6 @@ a.tag:hover { color: inherit; font-weight: inherit; } -.title + .highlight { - margin-top: -0.75rem; -} .title:not(.is-spaced) + .subtitle { margin-top: -1.25rem; } @@ -2646,21 +2659,10 @@ a.tag:hover { text-transform: uppercase; } -.highlight { - font-weight: 400; - max-width: 100%; - overflow: hidden; - padding: 0; -} -.highlight pre { - overflow: auto; - max-width: 100%; -} - .number { align-items: center; background-color: whitesmoke; - border-radius: 290486px; + border-radius: 9999px; display: inline-flex; font-size: 1.25rem; height: 2em; @@ -2695,8 +2697,8 @@ a.tag:hover { border-color: #b5b5b5; } .select select:focus, .textarea:focus, .input:focus, .select select.is-focused, .is-focused.textarea, .is-focused.input, .select select:active, .textarea:active, .input:active, .select select.is-active, .is-active.textarea, .is-active.input { - border-color: #3273dc; - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + border-color: #485fc7; + box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .select select[disabled], [disabled].textarea, [disabled].input, fieldset[disabled] .select select, .select fieldset[disabled] select, fieldset[disabled] .textarea, fieldset[disabled] .input { background-color: whitesmoke; @@ -2756,28 +2758,28 @@ a.tag:hover { box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } .is-link.textarea, .is-link.input { - border-color: #3273dc; + border-color: #485fc7; } .is-link.textarea:focus, .is-link.input:focus, .is-link.is-focused.textarea, .is-link.is-focused.input, .is-link.textarea:active, .is-link.input:active, .is-link.is-active.textarea, .is-link.is-active.input { - box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .is-info.textarea, .is-info.input { - border-color: #3298dc; + border-color: #3e8ed0; } .is-info.textarea:focus, .is-info.input:focus, .is-info.is-focused.textarea, .is-info.is-focused.input, .is-info.textarea:active, .is-info.input:active, .is-info.is-active.textarea, .is-info.is-active.input { - box-shadow: 0 0 0 0.125em rgba(50, 152, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } .is-success.textarea, .is-success.input { - border-color: #48c774; + border-color: #48c78e; } .is-success.textarea:focus, .is-success.input:focus, .is-success.is-focused.textarea, .is-success.is-focused.input, .is-success.textarea:active, .is-success.input:active, .is-success.is-active.textarea, .is-success.is-active.input { - box-shadow: 0 0 0 0.125em rgba(72, 199, 116, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } .is-warning.textarea, .is-warning.input { - border-color: #ffdd57; + border-color: #ffe08a; } .is-warning.textarea:focus, .is-warning.input:focus, .is-warning.is-focused.textarea, .is-warning.is-focused.input, .is-warning.textarea:active, .is-warning.input:active, .is-warning.is-active.textarea, .is-warning.is-active.input { - box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } .is-danger.textarea, .is-danger.input { border-color: #f14668; @@ -2805,7 +2807,7 @@ a.tag:hover { } .input.is-rounded { - border-radius: 290486px; + border-radius: 9999px; padding-left: calc(calc(0.75em - 1px) + 0.375em); padding-right: calc(calc(0.75em - 1px) + 0.375em); } @@ -2868,12 +2870,12 @@ a.tag:hover { height: 2.5em; } .select:not(.is-multiple):not(.is-loading)::after { - border-color: #3273dc; + border-color: #485fc7; right: 1.125em; z-index: 4; } .select.is-rounded select { - border-radius: 290486px; + border-radius: 9999px; padding-left: 1em; } .select select { @@ -2963,52 +2965,52 @@ a.tag:hover { box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25); } .select.is-link:not(:hover)::after { - border-color: #3273dc; + border-color: #485fc7; } .select.is-link select { - border-color: #3273dc; + border-color: #485fc7; } .select.is-link select:hover, .select.is-link select.is-hovered { - border-color: #2366d1; + border-color: #3a51bb; } .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(50, 115, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25); } .select.is-info:not(:hover)::after { - border-color: #3298dc; + border-color: #3e8ed0; } .select.is-info select { - border-color: #3298dc; + border-color: #3e8ed0; } .select.is-info select:hover, .select.is-info select.is-hovered { - border-color: #238cd1; + border-color: #3082c5; } .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(50, 152, 220, 0.25); + box-shadow: 0 0 0 0.125em rgba(62, 142, 208, 0.25); } .select.is-success:not(:hover)::after { - border-color: #48c774; + border-color: #48c78e; } .select.is-success select { - border-color: #48c774; + border-color: #48c78e; } .select.is-success select:hover, .select.is-success select.is-hovered { - border-color: #3abb67; + border-color: #3abb81; } .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, 116, 0.25); + box-shadow: 0 0 0 0.125em rgba(72, 199, 142, 0.25); } .select.is-warning:not(:hover)::after { - border-color: #ffdd57; + border-color: #ffe08a; } .select.is-warning select { - border-color: #ffdd57; + border-color: #ffe08a; } .select.is-warning select:hover, .select.is-warning select.is-hovered { - border-color: #ffd83d; + border-color: #ffd970; } .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, 221, 87, 0.25); + box-shadow: 0 0 0 0.125em rgba(255, 224, 138, 0.25); } .select.is-danger:not(:hover)::after { border-color: #f14668; @@ -3165,82 +3167,82 @@ a.tag:hover { color: #fff; } .file.is-link .file-cta { - background-color: #3273dc; + background-color: #485fc7; border-color: transparent; color: #fff; } .file.is-link:hover .file-cta, .file.is-link.is-hovered .file-cta { - background-color: #276cda; + background-color: #3e56c4; 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(50, 115, 220, 0.25); + box-shadow: 0 0 0.5em rgba(72, 95, 199, 0.25); color: #fff; } .file.is-link:active .file-cta, .file.is-link.is-active .file-cta { - background-color: #2366d1; + background-color: #3a51bb; border-color: transparent; color: #fff; } .file.is-info .file-cta { - background-color: #3298dc; + background-color: #3e8ed0; border-color: transparent; color: #fff; } .file.is-info:hover .file-cta, .file.is-info.is-hovered .file-cta { - background-color: #2793da; + background-color: #3488ce; 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(50, 152, 220, 0.25); + box-shadow: 0 0 0.5em rgba(62, 142, 208, 0.25); color: #fff; } .file.is-info:active .file-cta, .file.is-info.is-active .file-cta { - background-color: #238cd1; + background-color: #3082c5; border-color: transparent; color: #fff; } .file.is-success .file-cta { - background-color: #48c774; + background-color: #48c78e; border-color: transparent; color: #fff; } .file.is-success:hover .file-cta, .file.is-success.is-hovered .file-cta { - background-color: #3ec46d; + background-color: #3ec487; 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, 116, 0.25); + box-shadow: 0 0 0.5em rgba(72, 199, 142, 0.25); color: #fff; } .file.is-success:active .file-cta, .file.is-success.is-active .file-cta { - background-color: #3abb67; + background-color: #3abb81; border-color: transparent; color: #fff; } .file.is-warning .file-cta { - background-color: #ffdd57; + background-color: #ffe08a; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-warning:hover .file-cta, .file.is-warning.is-hovered .file-cta { - background-color: #ffdb4a; + background-color: #ffdc7d; border-color: transparent; color: rgba(0, 0, 0, 0.7); } .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25); + box-shadow: 0 0 0.5em rgba(255, 224, 138, 0.25); color: rgba(0, 0, 0, 0.7); } .file.is-warning:active .file-cta, .file.is-warning.is-active .file-cta { - background-color: #ffd83d; + background-color: #ffd970; border-color: transparent; color: rgba(0, 0, 0, 0.7); } @@ -3267,6 +3269,9 @@ a.tag:hover { .file.is-small { font-size: 0.75rem; } +.file.is-normal { + font-size: 1rem; +} .file.is-medium { font-size: 1.25rem; } @@ -3460,16 +3465,16 @@ a.tag:hover { color: #00d1b2; } .help.is-link { - color: #3273dc; + color: #485fc7; } .help.is-info { - color: #3298dc; + color: #3e8ed0; } .help.is-success { - color: #48c774; + color: #48c78e; } .help.is-warning { - color: #ffdd57; + color: #ffe08a; } .help.is-danger { color: #f14668; @@ -3714,7 +3719,7 @@ a.tag:hover { } .breadcrumb a { align-items: center; - color: #3273dc; + color: #485fc7; display: flex; justify-content: center; padding: 0 0.75em; @@ -3819,6 +3824,16 @@ a.tag:hover { } .card-header-icon { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; align-items: center; cursor: pointer; display: flex; @@ -3928,7 +3943,7 @@ button.dropdown-item:hover { } a.dropdown-item.is-active, button.dropdown-item.is-active { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } @@ -4124,7 +4139,7 @@ button.dropdown-item.is-active { color: #363636; } .menu-list a.is-active { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .menu-list li ul { @@ -4219,48 +4234,48 @@ button.dropdown-item.is-active { color: #00947e; } .message.is-link { - background-color: #eef3fc; + background-color: #eff1fa; } .message.is-link .message-header { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .message.is-link .message-body { - border-color: #3273dc; - color: #2160c4; + border-color: #485fc7; + color: #3850b7; } .message.is-info { - background-color: #eef6fc; + background-color: #eff5fb; } .message.is-info .message-header { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .message.is-info .message-body { - border-color: #3298dc; - color: #1d72aa; + border-color: #3e8ed0; + color: #296fa8; } .message.is-success { - background-color: #effaf3; + background-color: #effaf5; } .message.is-success .message-header { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .message.is-success .message-body { - border-color: #48c774; - color: #257942; + border-color: #48c78e; + color: #257953; } .message.is-warning { - background-color: #fffbeb; + background-color: #fffaeb; } .message.is-warning .message-header { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .message.is-warning .message-body { - border-color: #ffdd57; - color: #947600; + border-color: #ffe08a; + color: #946c00; } .message.is-danger { background-color: #feecf0; @@ -4694,7 +4709,7 @@ button.dropdown-item.is-active { } } .navbar.is-link { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .navbar.is-link .navbar-brand > .navbar-item, @@ -4705,7 +4720,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: #2366d1; + background-color: #3a51bb; color: #fff; } .navbar.is-link .navbar-brand .navbar-link::after { @@ -4731,7 +4746,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: #2366d1; + background-color: #3a51bb; color: #fff; } .navbar.is-link .navbar-start .navbar-link::after, @@ -4741,16 +4756,16 @@ 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: #2366d1; + background-color: #3a51bb; color: #fff; } .navbar.is-link .navbar-dropdown a.navbar-item.is-active { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } } .navbar.is-info { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .navbar.is-info .navbar-brand > .navbar-item, @@ -4761,7 +4776,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: #238cd1; + background-color: #3082c5; color: #fff; } .navbar.is-info .navbar-brand .navbar-link::after { @@ -4787,7 +4802,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: #238cd1; + background-color: #3082c5; color: #fff; } .navbar.is-info .navbar-start .navbar-link::after, @@ -4797,16 +4812,16 @@ 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: #238cd1; + background-color: #3082c5; color: #fff; } .navbar.is-info .navbar-dropdown a.navbar-item.is-active { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } } .navbar.is-success { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .navbar.is-success .navbar-brand > .navbar-item, @@ -4817,7 +4832,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: #3abb67; + background-color: #3abb81; color: #fff; } .navbar.is-success .navbar-brand .navbar-link::after { @@ -4843,7 +4858,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: #3abb67; + background-color: #3abb81; color: #fff; } .navbar.is-success .navbar-start .navbar-link::after, @@ -4853,16 +4868,16 @@ 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: #3abb67; + background-color: #3abb81; color: #fff; } .navbar.is-success .navbar-dropdown a.navbar-item.is-active { - background-color: #48c774; + background-color: #48c78e; color: #fff; } } .navbar.is-warning { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .navbar.is-warning .navbar-brand > .navbar-item, @@ -4873,7 +4888,7 @@ button.dropdown-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: #ffd83d; + background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } .navbar.is-warning .navbar-brand .navbar-link::after { @@ -4899,7 +4914,7 @@ 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: #ffd83d; + background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } .navbar.is-warning .navbar-start .navbar-link::after, @@ -4909,11 +4924,11 @@ button.dropdown-item.is-active { .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: #ffd83d; + background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } .navbar.is-warning .navbar-dropdown a.navbar-item.is-active { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } } @@ -5097,7 +5112,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i .navbar-link:hover, .navbar-link.is-active { background-color: #fafafa; - color: #3273dc; + color: #485fc7; } .navbar-item { @@ -5121,14 +5136,14 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i } .navbar-item.is-tab:focus, .navbar-item.is-tab:hover { background-color: transparent; - border-bottom-color: #3273dc; + border-bottom-color: #485fc7; } .navbar-item.is-tab.is-active { background-color: transparent; - border-bottom-color: #3273dc; + border-bottom-color: #485fc7; border-bottom-style: solid; border-bottom-width: 3px; - color: #3273dc; + color: #485fc7; padding-bottom: calc(0.5rem - 3px); } @@ -5141,7 +5156,7 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i padding-right: 2.5em; } .navbar-link:not(.is-arrowless)::after { - border-color: #3273dc; + border-color: #485fc7; margin-top: -0.375em; right: 1.125em; } @@ -5256,7 +5271,7 @@ body.has-navbar-fixed-bottom-touch { } .navbar.is-transparent .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; - color: #3273dc; + color: #485fc7; } .navbar-burger { @@ -5334,7 +5349,7 @@ body.has-navbar-fixed-bottom-touch { } .navbar-dropdown a.navbar-item.is-active { background-color: whitesmoke; - color: #3273dc; + color: #485fc7; } .navbar.is-spaced .navbar-dropdown, .navbar-dropdown.is-boxed { border-radius: 6px; @@ -5433,10 +5448,10 @@ body.has-spaced-navbar-fixed-bottom { .pagination.is-rounded .pagination-next { padding-left: 1em; padding-right: 1em; - border-radius: 290486px; + border-radius: 9999px; } .pagination.is-rounded .pagination-link { - border-radius: 290486px; + border-radius: 9999px; } .pagination, @@ -5475,7 +5490,7 @@ body.has-spaced-navbar-fixed-bottom { .pagination-previous:focus, .pagination-next:focus, .pagination-link:focus { - border-color: #3273dc; + border-color: #485fc7; } .pagination-previous:active, .pagination-next:active, @@ -5500,8 +5515,8 @@ body.has-spaced-navbar-fixed-bottom { } .pagination-link.is-current { - background-color: #3273dc; - border-color: #3273dc; + background-color: #485fc7; + border-color: #485fc7; color: #fff; } @@ -5541,6 +5556,14 @@ body.has-spaced-navbar-fixed-bottom { order: 1; } + .pagination-previous, +.pagination-next, +.pagination-link, +.pagination-ellipsis { + margin-bottom: 0; + margin-top: 0; + } + .pagination-previous { order: 2; } @@ -5551,6 +5574,8 @@ body.has-spaced-navbar-fixed-bottom { .pagination { justify-content: space-between; + margin-bottom: 0; + margin-top: 0; } .pagination.is-centered .pagination-previous { order: 1; @@ -5632,44 +5657,44 @@ body.has-spaced-navbar-fixed-bottom { color: #00d1b2; } .panel.is-link .panel-heading { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .panel.is-link .panel-tabs a.is-active { - border-bottom-color: #3273dc; + border-bottom-color: #485fc7; } .panel.is-link .panel-block.is-active .panel-icon { - color: #3273dc; + color: #485fc7; } .panel.is-info .panel-heading { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .panel.is-info .panel-tabs a.is-active { - border-bottom-color: #3298dc; + border-bottom-color: #3e8ed0; } .panel.is-info .panel-block.is-active .panel-icon { - color: #3298dc; + color: #3e8ed0; } .panel.is-success .panel-heading { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .panel.is-success .panel-tabs a.is-active { - border-bottom-color: #48c774; + border-bottom-color: #48c78e; } .panel.is-success .panel-block.is-active .panel-icon { - color: #48c774; + color: #48c78e; } .panel.is-warning .panel-heading { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .panel.is-warning .panel-tabs a.is-active { - border-bottom-color: #ffdd57; + border-bottom-color: #ffe08a; } .panel.is-warning .panel-block.is-active .panel-icon { - color: #ffdd57; + color: #ffe08a; } .panel.is-danger .panel-heading { background-color: #f14668; @@ -5717,7 +5742,7 @@ body.has-spaced-navbar-fixed-bottom { color: #4a4a4a; } .panel-list a:hover { - color: #3273dc; + color: #485fc7; } .panel-block { @@ -5739,11 +5764,11 @@ body.has-spaced-navbar-fixed-bottom { flex-wrap: wrap; } .panel-block.is-active { - border-left-color: #3273dc; + border-left-color: #485fc7; color: #363636; } .panel-block.is-active .panel-icon { - color: #3273dc; + color: #485fc7; } .panel-block:last-child { border-bottom-left-radius: 6px; @@ -5805,8 +5830,8 @@ label.panel-block:hover { display: block; } .tabs li.is-active a { - border-bottom-color: #3273dc; - color: #3273dc; + border-bottom-color: #485fc7; + color: #485fc7; } .tabs ul { align-items: center; @@ -5884,8 +5909,8 @@ label.panel-block:hover { border-bottom-right-radius: 4px; } .tabs.is-toggle li.is-active a { - background-color: #3273dc; - border-color: #3273dc; + background-color: #485fc7; + border-color: #485fc7; color: #fff; z-index: 1; } @@ -5893,13 +5918,13 @@ label.panel-block:hover { border-bottom: none; } .tabs.is-toggle.is-toggle-rounded li:first-child a { - border-bottom-left-radius: 290486px; - border-top-left-radius: 290486px; + border-bottom-left-radius: 9999px; + border-top-left-radius: 9999px; padding-left: 1.25em; } .tabs.is-toggle.is-toggle-rounded li:last-child a { - border-bottom-right-radius: 290486px; - border-top-right-radius: 290486px; + border-bottom-right-radius: 9999px; + border-top-right-radius: 9999px; padding-right: 1.25em; } .tabs.is-small { @@ -6000,17 +6025,17 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-1 { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .columns.is-mobile > .column.is-offset-1 { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .columns.is-mobile > .column.is-2 { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .columns.is-mobile > .column.is-offset-2 { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .columns.is-mobile > .column.is-3 { flex: none; @@ -6021,17 +6046,17 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-4 { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .columns.is-mobile > .column.is-offset-4 { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .columns.is-mobile > .column.is-5 { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .columns.is-mobile > .column.is-offset-5 { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .columns.is-mobile > .column.is-6 { flex: none; @@ -6042,17 +6067,17 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-7 { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .columns.is-mobile > .column.is-offset-7 { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .columns.is-mobile > .column.is-8 { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .columns.is-mobile > .column.is-offset-8 { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .columns.is-mobile > .column.is-9 { flex: none; @@ -6063,17 +6088,17 @@ label.panel-block:hover { } .columns.is-mobile > .column.is-10 { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .columns.is-mobile > .column.is-offset-10 { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .columns.is-mobile > .column.is-11 { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .columns.is-mobile > .column.is-offset-11 { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .columns.is-mobile > .column.is-12 { flex: none; @@ -6163,17 +6188,17 @@ label.panel-block:hover { } .column.is-1-mobile { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1-mobile { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2-mobile { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2-mobile { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3-mobile { flex: none; @@ -6184,17 +6209,17 @@ label.panel-block:hover { } .column.is-4-mobile { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4-mobile { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5-mobile { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5-mobile { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6-mobile { flex: none; @@ -6205,17 +6230,17 @@ label.panel-block:hover { } .column.is-7-mobile { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7-mobile { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8-mobile { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8-mobile { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9-mobile { flex: none; @@ -6226,17 +6251,17 @@ label.panel-block:hover { } .column.is-10-mobile { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10-mobile { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11-mobile { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11-mobile { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12-mobile { flex: none; @@ -6327,17 +6352,17 @@ label.panel-block:hover { } .column.is-1, .column.is-1-tablet { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1, .column.is-offset-1-tablet { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2, .column.is-2-tablet { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2, .column.is-offset-2-tablet { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3, .column.is-3-tablet { flex: none; @@ -6348,17 +6373,17 @@ label.panel-block:hover { } .column.is-4, .column.is-4-tablet { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4, .column.is-offset-4-tablet { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5, .column.is-5-tablet { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5, .column.is-offset-5-tablet { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6, .column.is-6-tablet { flex: none; @@ -6369,17 +6394,17 @@ label.panel-block:hover { } .column.is-7, .column.is-7-tablet { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7, .column.is-offset-7-tablet { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8, .column.is-8-tablet { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8, .column.is-offset-8-tablet { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9, .column.is-9-tablet { flex: none; @@ -6390,17 +6415,17 @@ label.panel-block:hover { } .column.is-10, .column.is-10-tablet { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10, .column.is-offset-10-tablet { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11, .column.is-11-tablet { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11, .column.is-offset-11-tablet { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12, .column.is-12-tablet { flex: none; @@ -6491,17 +6516,17 @@ label.panel-block:hover { } .column.is-1-touch { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1-touch { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2-touch { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2-touch { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3-touch { flex: none; @@ -6512,17 +6537,17 @@ label.panel-block:hover { } .column.is-4-touch { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4-touch { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5-touch { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5-touch { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6-touch { flex: none; @@ -6533,17 +6558,17 @@ label.panel-block:hover { } .column.is-7-touch { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7-touch { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8-touch { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8-touch { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9-touch { flex: none; @@ -6554,17 +6579,17 @@ label.panel-block:hover { } .column.is-10-touch { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10-touch { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11-touch { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11-touch { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12-touch { flex: none; @@ -6655,17 +6680,17 @@ label.panel-block:hover { } .column.is-1-desktop { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1-desktop { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2-desktop { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2-desktop { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3-desktop { flex: none; @@ -6676,17 +6701,17 @@ label.panel-block:hover { } .column.is-4-desktop { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4-desktop { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5-desktop { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5-desktop { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6-desktop { flex: none; @@ -6697,17 +6722,17 @@ label.panel-block:hover { } .column.is-7-desktop { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7-desktop { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8-desktop { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8-desktop { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9-desktop { flex: none; @@ -6718,17 +6743,17 @@ label.panel-block:hover { } .column.is-10-desktop { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10-desktop { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11-desktop { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11-desktop { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12-desktop { flex: none; @@ -6819,17 +6844,17 @@ label.panel-block:hover { } .column.is-1-widescreen { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1-widescreen { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2-widescreen { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2-widescreen { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3-widescreen { flex: none; @@ -6840,17 +6865,17 @@ label.panel-block:hover { } .column.is-4-widescreen { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4-widescreen { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5-widescreen { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5-widescreen { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6-widescreen { flex: none; @@ -6861,17 +6886,17 @@ label.panel-block:hover { } .column.is-7-widescreen { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7-widescreen { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8-widescreen { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8-widescreen { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9-widescreen { flex: none; @@ -6882,17 +6907,17 @@ label.panel-block:hover { } .column.is-10-widescreen { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10-widescreen { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11-widescreen { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11-widescreen { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12-widescreen { flex: none; @@ -6983,17 +7008,17 @@ label.panel-block:hover { } .column.is-1-fullhd { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .column.is-offset-1-fullhd { - margin-left: 8.3333333333%; + margin-left: 8.33333337%; } .column.is-2-fullhd { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .column.is-offset-2-fullhd { - margin-left: 16.6666666667%; + margin-left: 16.66666674%; } .column.is-3-fullhd { flex: none; @@ -7004,17 +7029,17 @@ label.panel-block:hover { } .column.is-4-fullhd { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .column.is-offset-4-fullhd { - margin-left: 33.3333333333%; + margin-left: 33.33333337%; } .column.is-5-fullhd { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .column.is-offset-5-fullhd { - margin-left: 41.6666666667%; + margin-left: 41.66666674%; } .column.is-6-fullhd { flex: none; @@ -7025,17 +7050,17 @@ label.panel-block:hover { } .column.is-7-fullhd { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .column.is-offset-7-fullhd { - margin-left: 58.3333333333%; + margin-left: 58.33333337%; } .column.is-8-fullhd { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .column.is-offset-8-fullhd { - margin-left: 66.6666666667%; + margin-left: 66.66666674%; } .column.is-9-fullhd { flex: none; @@ -7046,17 +7071,17 @@ label.panel-block:hover { } .column.is-10-fullhd { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .column.is-offset-10-fullhd { - margin-left: 83.3333333333%; + margin-left: 83.33333337%; } .column.is-11-fullhd { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .column.is-offset-11-fullhd { - margin-left: 91.6666666667%; + margin-left: 91.66666674%; } .column.is-12-fullhd { flex: none; @@ -7595,11 +7620,11 @@ label.panel-block:hover { } .tile.is-1 { flex: none; - width: 8.3333333333%; + width: 8.33333337%; } .tile.is-2 { flex: none; - width: 16.6666666667%; + width: 16.66666674%; } .tile.is-3 { flex: none; @@ -7607,11 +7632,11 @@ label.panel-block:hover { } .tile.is-4 { flex: none; - width: 33.3333333333%; + width: 33.33333337%; } .tile.is-5 { flex: none; - width: 41.6666666667%; + width: 41.66666674%; } .tile.is-6 { flex: none; @@ -7619,11 +7644,11 @@ label.panel-block:hover { } .tile.is-7 { flex: none; - width: 58.3333333333%; + width: 58.33333337%; } .tile.is-8 { flex: none; - width: 66.6666666667%; + width: 66.66666674%; } .tile.is-9 { flex: none; @@ -7631,11 +7656,11 @@ label.panel-block:hover { } .tile.is-10 { flex: none; - width: 83.3333333333%; + width: 83.33333337%; } .tile.is-11 { flex: none; - width: 91.6666666667%; + width: 91.66666674%; } .tile.is-12 { flex: none; @@ -7729,147 +7754,147 @@ a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { } .has-text-link { - color: #3273dc !important; + color: #485fc7 !important; } a.has-text-link:hover, a.has-text-link:focus { - color: #205bbc !important; + color: #3449a8 !important; } .has-background-link { - background-color: #3273dc !important; + background-color: #485fc7 !important; } .has-text-link-light { - color: #eef3fc !important; + color: #eff1fa !important; } a.has-text-link-light:hover, a.has-text-link-light:focus { - color: #c2d5f5 !important; + color: #c8cfee !important; } .has-background-link-light { - background-color: #eef3fc !important; + background-color: #eff1fa !important; } .has-text-link-dark { - color: #2160c4 !important; + color: #3850b7 !important; } a.has-text-link-dark:hover, a.has-text-link-dark:focus { - color: #3b79de !important; + color: #576dcb !important; } .has-background-link-dark { - background-color: #2160c4 !important; + background-color: #3850b7 !important; } .has-text-info { - color: #3298dc !important; + color: #3e8ed0 !important; } a.has-text-info:hover, a.has-text-info:focus { - color: #207dbc !important; + color: #2b74b1 !important; } .has-background-info { - background-color: #3298dc !important; + background-color: #3e8ed0 !important; } .has-text-info-light { - color: #eef6fc !important; + color: #eff5fb !important; } a.has-text-info-light:hover, a.has-text-info-light:focus { - color: #c2e0f5 !important; + color: #c6ddf1 !important; } .has-background-info-light { - background-color: #eef6fc !important; + background-color: #eff5fb !important; } .has-text-info-dark { - color: #1d72aa !important; + color: #296fa8 !important; } a.has-text-info-dark:hover, a.has-text-info-dark:focus { - color: #248fd6 !important; + color: #368ace !important; } .has-background-info-dark { - background-color: #1d72aa !important; + background-color: #296fa8 !important; } .has-text-success { - color: #48c774 !important; + color: #48c78e !important; } a.has-text-success:hover, a.has-text-success:focus { - color: #34a85c !important; + color: #34a873 !important; } .has-background-success { - background-color: #48c774 !important; + background-color: #48c78e !important; } .has-text-success-light { - color: #effaf3 !important; + color: #effaf5 !important; } a.has-text-success-light:hover, a.has-text-success-light:focus { - color: #c8eed6 !important; + color: #c8eedd !important; } .has-background-success-light { - background-color: #effaf3 !important; + background-color: #effaf5 !important; } .has-text-success-dark { - color: #257942 !important; + color: #257953 !important; } a.has-text-success-dark:hover, a.has-text-success-dark:focus { - color: #31a058 !important; + color: #31a06e !important; } .has-background-success-dark { - background-color: #257942 !important; + background-color: #257953 !important; } .has-text-warning { - color: #ffdd57 !important; + color: #ffe08a !important; } a.has-text-warning:hover, a.has-text-warning:focus { - color: #ffd324 !important; + color: #ffd257 !important; } .has-background-warning { - background-color: #ffdd57 !important; + background-color: #ffe08a !important; } .has-text-warning-light { - color: #fffbeb !important; + color: #fffaeb !important; } a.has-text-warning-light:hover, a.has-text-warning-light:focus { - color: #fff1b8 !important; + color: #ffecb8 !important; } .has-background-warning-light { - background-color: #fffbeb !important; + background-color: #fffaeb !important; } .has-text-warning-dark { - color: #947600 !important; + color: #946c00 !important; } a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { - color: #c79f00 !important; + color: #c79200 !important; } .has-background-warning-dark { - background-color: #947600 !important; + background-color: #946c00 !important; } .has-text-danger { @@ -8449,6 +8474,36 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 3rem !important; } +.m-auto { + margin: auto !important; +} + +.mt-auto { + margin-top: auto !important; +} + +.mr-auto { + margin-right: auto !important; +} + +.mb-auto { + margin-bottom: auto !important; +} + +.ml-auto { + margin-left: auto !important; +} + +.mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.my-auto { + margin-top: auto !important; + margin-bottom: auto !important; +} + .p-0 { padding: 0 !important; } @@ -8659,6 +8714,36 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 3rem !important; } +.p-auto { + padding: auto !important; +} + +.pt-auto { + padding-top: auto !important; +} + +.pr-auto { + padding-right: auto !important; +} + +.pb-auto { + padding-bottom: auto !important; +} + +.pl-auto { + padding-left: auto !important; +} + +.px-auto { + padding-left: auto !important; + padding-right: auto !important; +} + +.py-auto { + padding-top: auto !important; + padding-bottom: auto !important; +} + .is-size-1 { font-size: 3rem !important; } @@ -9073,6 +9158,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { font-style: italic !important; } +.is-underlined { + text-decoration: underline !important; +} + .has-text-weight-light { font-weight: 300 !important; } @@ -9521,6 +9610,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-white .tabs li.is-active a { + color: white !important; opacity: 1; } .hero.is-white .tabs.is-boxed a, .hero.is-white .tabs.is-toggle a { @@ -9583,6 +9673,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-black .tabs li.is-active a { + color: #0a0a0a !important; opacity: 1; } .hero.is-black .tabs.is-boxed a, .hero.is-black .tabs.is-toggle a { @@ -9645,6 +9736,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-light .tabs li.is-active a { + color: whitesmoke !important; opacity: 1; } .hero.is-light .tabs.is-boxed a, .hero.is-light .tabs.is-toggle a { @@ -9707,6 +9799,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-dark .tabs li.is-active a { + color: #363636 !important; opacity: 1; } .hero.is-dark .tabs.is-boxed a, .hero.is-dark .tabs.is-toggle a { @@ -9769,6 +9862,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-primary .tabs li.is-active a { + color: #00d1b2 !important; opacity: 1; } .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { @@ -9791,7 +9885,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } } .hero.is-link { - background-color: #3273dc; + background-color: #485fc7; color: #fff; } .hero.is-link a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), @@ -9810,7 +9904,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: #3273dc; + background-color: #485fc7; } } .hero.is-link .navbar-item, @@ -9820,7 +9914,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: #2366d1; + background-color: #3a51bb; color: #fff; } .hero.is-link .tabs a { @@ -9831,6 +9925,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-link .tabs li.is-active a { + color: #485fc7 !important; opacity: 1; } .hero.is-link .tabs.is-boxed a, .hero.is-link .tabs.is-toggle a { @@ -9842,18 +9937,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .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: #3273dc; + color: #485fc7; } .hero.is-link.is-bold { - background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); + background-image: linear-gradient(141deg, #2959b3 0%, #485fc7 71%, #5658d2 100%); } @media screen and (max-width: 768px) { .hero.is-link.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%); + background-image: linear-gradient(141deg, #2959b3 0%, #485fc7 71%, #5658d2 100%); } } .hero.is-info { - background-color: #3298dc; + background-color: #3e8ed0; color: #fff; } .hero.is-info a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), @@ -9872,7 +9967,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: #3298dc; + background-color: #3e8ed0; } } .hero.is-info .navbar-item, @@ -9882,7 +9977,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: #238cd1; + background-color: #3082c5; color: #fff; } .hero.is-info .tabs a { @@ -9893,6 +9988,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-info .tabs li.is-active a { + color: #3e8ed0 !important; opacity: 1; } .hero.is-info .tabs.is-boxed a, .hero.is-info .tabs.is-toggle a { @@ -9904,18 +10000,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .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: #3298dc; + color: #3e8ed0; } .hero.is-info.is-bold { - background-image: linear-gradient(141deg, #159dc6 0%, #3298dc 71%, #4389e5 100%); + background-image: linear-gradient(141deg, #208fbc 0%, #3e8ed0 71%, #4d83db 100%); } @media screen and (max-width: 768px) { .hero.is-info.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #159dc6 0%, #3298dc 71%, #4389e5 100%); + background-image: linear-gradient(141deg, #208fbc 0%, #3e8ed0 71%, #4d83db 100%); } } .hero.is-success { - background-color: #48c774; + background-color: #48c78e; color: #fff; } .hero.is-success a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), @@ -9934,7 +10030,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: #48c774; + background-color: #48c78e; } } .hero.is-success .navbar-item, @@ -9944,7 +10040,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: #3abb67; + background-color: #3abb81; color: #fff; } .hero.is-success .tabs a { @@ -9955,6 +10051,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-success .tabs li.is-active a { + color: #48c78e !important; opacity: 1; } .hero.is-success .tabs.is-boxed a, .hero.is-success .tabs.is-toggle a { @@ -9966,18 +10063,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .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: #48c774; + color: #48c78e; } .hero.is-success.is-bold { - background-image: linear-gradient(141deg, #29b342 0%, #48c774 71%, #56d296 100%); + background-image: linear-gradient(141deg, #29b35e 0%, #48c78e 71%, #56d2af 100%); } @media screen and (max-width: 768px) { .hero.is-success.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #29b342 0%, #48c774 71%, #56d296 100%); + background-image: linear-gradient(141deg, #29b35e 0%, #48c78e 71%, #56d2af 100%); } } .hero.is-warning { - background-color: #ffdd57; + background-color: #ffe08a; color: rgba(0, 0, 0, 0.7); } .hero.is-warning a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), @@ -9996,7 +10093,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } @media screen and (max-width: 1023px) { .hero.is-warning .navbar-menu { - background-color: #ffdd57; + background-color: #ffe08a; } } .hero.is-warning .navbar-item, @@ -10006,7 +10103,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .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: #ffd83d; + background-color: #ffd970; color: rgba(0, 0, 0, 0.7); } .hero.is-warning .tabs a { @@ -10017,6 +10114,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-warning .tabs li.is-active a { + color: #ffe08a !important; opacity: 1; } .hero.is-warning .tabs.is-boxed a, .hero.is-warning .tabs.is-toggle a { @@ -10028,14 +10126,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { .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: #ffdd57; + color: #ffe08a; } .hero.is-warning.is-bold { - background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); + background-image: linear-gradient(141deg, #ffb657 0%, #ffe08a 71%, #fff6a3 100%); } @media screen and (max-width: 768px) { .hero.is-warning.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #ffaf24 0%, #ffdd57 71%, #fffa70 100%); + background-image: linear-gradient(141deg, #ffb657 0%, #ffe08a 71%, #fff6a3 100%); } } .hero.is-danger { @@ -10079,6 +10177,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { opacity: 1; } .hero.is-danger .tabs li.is-active a { + color: #f14668 !important; opacity: 1; } .hero.is-danger .tabs.is-boxed a, .hero.is-danger .tabs.is-toggle a { @@ -10105,12 +10204,12 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { } @media screen and (min-width: 769px), print { .hero.is-medium .hero-body { - padding: 9rem 1.5rem; + padding: 9rem 4.5rem; } } @media screen and (min-width: 769px), print { .hero.is-large .hero-body { - padding: 18rem 1.5rem; + padding: 18rem 6rem; } } .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body { @@ -10180,16 +10279,24 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { flex-shrink: 0; padding: 3rem 1.5rem; } +@media screen and (min-width: 769px), print { + .hero-body { + padding: 3rem 3rem; + } +} .section { padding: 3rem 1.5rem; } @media screen and (min-width: 1024px) { + .section { + padding: 3rem 3rem; + } .section.is-medium { - padding: 9rem 1.5rem; + padding: 9rem 4.5rem; } .section.is-large { - padding: 18rem 1.5rem; + padding: 18rem 6rem; } } @@ -16316,16 +16423,16 @@ readers do not read off random characters that represent icons */ white-space: pre-wrap; } -.card { +.generic-card { max-width: 200px; } -.card .truncate { +.generic-card .truncate { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.card img { +.generic-card img { max-width: 200px; } @@ -16381,6 +16488,16 @@ readers do not read off random characters that represent icons */ margin-bottom: 1rem; } +.comic-vine-match-drawer .search-criteria-card { + width: 100%; +} +.comic-vine-match-drawer .search-criteria-card .card-content { + padding: 10px; +} +.comic-vine-match-drawer .field { + margin: 10px 0 0 0; +} + .search-results-container { margin: 15px 0 0 0; overflow: hidden; @@ -16388,17 +16505,18 @@ readers do not read off random characters that represent icons */ .search-results-container table { width: 100%; } -.search-results-container > :nth-of-type(odd) { - background-color: #fafafa; +.search-results-container table tbody tr:nth-child(odd) { + background: #eee; + border-radius: 5px; } .search-results-container .search-result { display: flex; flex-direction: row; padding: 10px; + margin: 0 0 10px 0; } .search-results-container .search-result .cover-image { border-radius: 5px; - margin: 0 0 10px 0; } .search-results-container .search-result .search-result-details { margin-left: 10px; diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 71da7e5..f2e6bb6 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -40,7 +40,7 @@ $border-color: red; } } -.card { +.generic-card { max-width: 200px; .truncate { @@ -111,6 +111,20 @@ $border-color: red; } } +.comic-vine-match-drawer { + // comic detail drawer + .search-criteria-card { + width: 100%; + .card-content { + padding: 10px; + } + } + + .field { + margin: 10px 0 0 0; + } +} + // comicvine search results .search-results-container { margin: 15px 0 0 0; @@ -118,18 +132,20 @@ $border-color: red; table { width: 100%; - } - > :nth-of-type(odd) { - background-color: hsl(0, 0%, 98%); + tbody tr:nth-child(odd) { + background: #eee; + border-radius: 5px; + } } .search-result { display: flex; flex-direction: row; padding: 10px; + margin: 0 0 10px 0; + .cover-image { border-radius: 5px; - margin: 0 0 10px 0; } .search-result-details { margin-left: 10px; diff --git a/src/client/components/Card.tsx b/src/client/components/Card.tsx index 72b94cd..5f693ac 100644 --- a/src/client/components/Card.tsx +++ b/src/client/components/Card.tsx @@ -21,7 +21,7 @@ class Card extends React.Component { ): JSX.Element => { return (
-
+
diff --git a/src/client/components/ComicDetail.tsx b/src/client/components/ComicDetail.tsx index 76c276f..c0330fc 100644 --- a/src/client/components/ComicDetail.tsx +++ b/src/client/components/ComicDetail.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useEffect, useCallback, ReactElement } from "react"; import { useParams } from "react-router-dom"; import axios from "axios"; import Card from "./Card"; @@ -13,15 +13,19 @@ import { useDispatch, useSelector } from "react-redux"; type ComicDetailProps = {}; -export const ComicDetail = ({}: ComicDetailProps) => { +export const ComicDetail = ({}: ComicDetailProps): ReactElement => { const [page, setPage] = useState(1); const [visible, setVisible] = useState(false); const [comicDetail, setComicDetail] = useState<{ rawFileDetails: IExtractedComicBookCoverFile; }>(); + const comicVineSearchResults = useSelector( (state: RootState) => state.comicInfo.searchResults, ); + const comicVineSearchQueryObject = useSelector( + (state: RootState) => state.comicInfo.searchQuery, + ); const { comicObjectId } = useParams<{ comicObjectId: string }>(); useEffect(() => { @@ -45,7 +49,7 @@ export const ComicDetail = ({}: ComicDetailProps) => { const openDrawerWithCVMatches = useCallback(() => { setVisible(true); dispatch(fetchComicVineMatches(comicDetail)); - }, [dispatch, comicDetail, comicVineSearchResults]); + }, [dispatch, comicDetail]); const onClose = () => { setVisible(false); @@ -77,7 +81,41 @@ export const ComicDetail = ({}: ComicDetailProps) => { closable={false} onClose={onClose} visible={visible} + className="comic-vine-match-drawer" > + {!isEmpty(comicVineSearchQueryObject) && + !isUndefined(comicVineSearchQueryObject) ? ( +
+
+

Searching against:

+
+
+
+ Title + + { + comicVineSearchQueryObject.issue.searchParams + .searchTerms.name + } + +
+
+
+
+ Number + + { + comicVineSearchQueryObject.issue.searchParams + .searchTerms.number + } + +
+
+
+
+
+ ) : null} +
{!isEmpty(comicVineSearchResults) && ( diff --git a/src/client/components/MatchResult.tsx b/src/client/components/MatchResult.tsx index c992467..bea3c0b 100644 --- a/src/client/components/MatchResult.tsx +++ b/src/client/components/MatchResult.tsx @@ -1,5 +1,4 @@ -import React, { useState, useEffect, useCallback } from "react"; -import { IComicVineSearchMatch, IFolderData } from "threetwo-ui-typings"; +import React, { useEffect } from "react"; import { map } from "lodash"; interface MatchResultProps { @@ -27,8 +26,26 @@ export const MatchResult = (props: MatchResultProps) => { -

{match.name}

-
{match.volume.name}
+
{match.name}
+
{match.volume.name}
+
+
+
+ Number + + {match.issue_number} + +
+
+
+
+ Type + + {match.resource_type} + +
+
+
); diff --git a/src/client/reducers/comicinfo.reducer.js b/src/client/reducers/comicinfo.reducer.js index 918c89c..ffda81b 100644 --- a/src/client/reducers/comicinfo.reducer.js +++ b/src/client/reducers/comicinfo.reducer.js @@ -4,6 +4,7 @@ import { } from "../constants/action-types"; const initialState = { searchResults: [], + searchQuery: {}, }; function comicinfoReducer(state = initialState, action) { @@ -14,9 +15,11 @@ function comicinfoReducer(state = initialState, action) { result: {}, }; case CV_SEARCH_SUCCESS: + console.log(action); return { ...state, searchResults: action.searchResults.results, + searchQuery: action.searchQueryObject, }; default: return state; diff --git a/yarn.lock b/yarn.lock index 3782417..40aa4c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3357,10 +3357,10 @@ builtins@^1.0.3: resolved "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz" integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og= -bulma@^0.9.2: - version "0.9.2" - resolved "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz" - integrity sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A== +bulma@^0.9.3: + version "0.9.3" + resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243" + integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g== byte-size@^7.0.1: version "7.0.1"