From 784872e998c83b66a2774b5c19f79b81b956c6ca Mon Sep 17 00:00:00 2001 From: Benjamyn Love Date: Tue, 14 Mar 2023 16:28:09 +1100 Subject: [PATCH] Updated branding --- priceybot2/sass/branding.scss | 10 +- priceybot2/static/css/main.css | 266 +++++++++++++++---------------- priceybot2/templates/quotes.html | 31 ++++ 3 files changed, 173 insertions(+), 134 deletions(-) create mode 100644 priceybot2/templates/quotes.html diff --git a/priceybot2/sass/branding.scss b/priceybot2/sass/branding.scss index 40ee7dd..9632179 100644 --- a/priceybot2/sass/branding.scss +++ b/priceybot2/sass/branding.scss @@ -47,7 +47,7 @@ $purple: $nexi-purple; $red: $nexi-red; // https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass -$primary: $nexi-white; +$primary: $nexi-black; //$info: $cyan; //$success: $green; @@ -68,3 +68,11 @@ $link-focus-border: $nexi-darker-red; //$link-active: $grey-darker !default //$link-active-border: $grey-dark !default +$box-background-color: $nexi-grey; + +$input-background-color: $nexi-darker-grey; +$input-color: $nexi-black; + +$table-background-color: $nexi-black; +$table-striped-row-even-background-color: $nexi-lighter-black; +$table-color: $nexi-white; \ No newline at end of file diff --git a/priceybot2/static/css/main.css b/priceybot2/static/css/main.css index f18fe4f..c6f33a0 100644 --- a/priceybot2/static/css/main.css +++ b/priceybot2/static/css/main.css @@ -391,7 +391,7 @@ table th { /* Bulma Elements */ .box { - background-color: white; + background-color: #E4E4E4; border-radius: 6px; box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02); color: #181818; @@ -739,84 +739,84 @@ a.box:active { box-shadow: none; color: #fff; } .button.is-primary { - background-color: #f8fafb; + background-color: #181818; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .button.is-primary:hover, .button.is-primary.is-hovered { - background-color: #f0f4f6; + background-color: #121212; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .button.is-primary:focus, .button.is-primary.is-focused { border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active) { - box-shadow: 0 0 0 0.125em rgba(248, 250, 251, 0.25); } + box-shadow: 0 0 0 0.125em rgba(24, 24, 24, 0.25); } .button.is-primary:active, .button.is-primary.is-active { - background-color: #e8eef2; + background-color: #0b0b0b; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .button.is-primary[disabled], fieldset[disabled] .button.is-primary { - background-color: #f8fafb; - border-color: #f8fafb; + background-color: #181818; + border-color: #181818; box-shadow: none; } .button.is-primary.is-inverted { - background-color: rgba(0, 0, 0, 0.7); - color: #f8fafb; } + background-color: #fff; + color: #181818; } .button.is-primary.is-inverted:hover, .button.is-primary.is-inverted.is-hovered { - background-color: rgba(0, 0, 0, 0.7); } + background-color: #f2f2f2; } .button.is-primary.is-inverted[disabled], fieldset[disabled] .button.is-primary.is-inverted { - background-color: rgba(0, 0, 0, 0.7); + background-color: #fff; border-color: transparent; box-shadow: none; - color: #f8fafb; } + color: #181818; } .button.is-primary.is-loading::after { - border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + border-color: transparent transparent #fff #fff !important; } .button.is-primary.is-outlined { background-color: transparent; - border-color: #f8fafb; - color: #f8fafb; } + border-color: #181818; + color: #181818; } .button.is-primary.is-outlined:hover, .button.is-primary.is-outlined.is-hovered, .button.is-primary.is-outlined:focus, .button.is-primary.is-outlined.is-focused { - background-color: #f8fafb; - border-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + border-color: #181818; + color: #fff; } .button.is-primary.is-outlined.is-loading::after { - border-color: transparent transparent #f8fafb #f8fafb !important; } + border-color: transparent transparent #181818 #181818 !important; } .button.is-primary.is-outlined.is-loading:hover::after, .button.is-primary.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-outlined.is-loading:focus::after, .button.is-primary.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent rgba(0, 0, 0, 0.7) rgba(0, 0, 0, 0.7) !important; } + border-color: transparent transparent #fff #fff !important; } .button.is-primary.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-outlined { background-color: transparent; - border-color: #f8fafb; + border-color: #181818; box-shadow: none; - color: #f8fafb; } + color: #181818; } .button.is-primary.is-inverted.is-outlined { background-color: transparent; - border-color: rgba(0, 0, 0, 0.7); - color: rgba(0, 0, 0, 0.7); } + border-color: #fff; + color: #fff; } .button.is-primary.is-inverted.is-outlined:hover, .button.is-primary.is-inverted.is-outlined.is-hovered, .button.is-primary.is-inverted.is-outlined:focus, .button.is-primary.is-inverted.is-outlined.is-focused { - background-color: rgba(0, 0, 0, 0.7); - color: #f8fafb; } + background-color: #fff; + color: #181818; } .button.is-primary.is-inverted.is-outlined.is-loading:hover::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-hovered::after, .button.is-primary.is-inverted.is-outlined.is-loading:focus::after, .button.is-primary.is-inverted.is-outlined.is-loading.is-focused::after { - border-color: transparent transparent #f8fafb #f8fafb !important; } + border-color: transparent transparent #181818 #181818 !important; } .button.is-primary.is-inverted.is-outlined[disabled], fieldset[disabled] .button.is-primary.is-inverted.is-outlined { background-color: transparent; - border-color: rgba(0, 0, 0, 0.7); + border-color: #fff; box-shadow: none; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .button.is-primary.is-light { - background-color: #f8fafb; - color: #36515e; } + background-color: whitesmoke; + color: #8f8f8f; } .button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered { - background-color: #f0f4f6; + background-color: #eeeeee; border-color: transparent; - color: #36515e; } + color: #8f8f8f; } .button.is-primary.is-light:active, .button.is-primary.is-light.is-active { - background-color: #e8eef2; + background-color: #e8e8e8; border-color: transparent; - color: #36515e; } + color: #8f8f8f; } .button.is-link { background-color: #EB312E; border-color: transparent; @@ -2754,11 +2754,11 @@ div.icon-text { background-color: #363636; color: #fff; } .notification.is-primary { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .notification.is-primary.is-light { - background-color: #f8fafb; - color: #36515e; } + background-color: whitesmoke; + color: #8f8f8f; } .notification.is-link { background-color: #EB312E; color: #fff; } @@ -2926,13 +2926,13 @@ div.icon-text { .progress.is-dark:indeterminate { background-image: linear-gradient(to right, #363636 30%, #9d7c7b 30%); } .progress.is-primary::-webkit-progress-value { - background-color: #f8fafb; } + background-color: #181818; } .progress.is-primary::-moz-progress-bar { - background-color: #f8fafb; } + background-color: #181818; } .progress.is-primary::-ms-fill { - background-color: #f8fafb; } + background-color: #181818; } .progress.is-primary:indeterminate { - background-image: linear-gradient(to right, #f8fafb 30%, #9d7c7b 30%); } + background-image: linear-gradient(to right, #181818 30%, #9d7c7b 30%); } .progress.is-link::-webkit-progress-value { background-color: #EB312E; } .progress.is-link::-moz-progress-bar { @@ -3115,8 +3115,8 @@ div.icon-text { background-position: -200% 0; } } .table { - background-color: white; - color: #363636; } + background-color: #181818; + color: #f8fafb; } .table td, .table th { border: 1px solid #D2D2D2; @@ -3145,9 +3145,9 @@ div.icon-text { color: #fff; } .table td.is-primary, .table th.is-primary { - background-color: #f8fafb; - border-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + border-color: #181818; + color: #fff; } .table td.is-link, .table th.is-link { background-color: #EB312E; @@ -3249,8 +3249,8 @@ div.icon-text { width: 1%; } .table td.is-selected, .table th.is-selected { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .table td.is-selected a, .table td.is-selected strong, .table th.is-selected a, @@ -3264,14 +3264,14 @@ div.icon-text { .table th:not([align]) { text-align: left; } .table tr.is-selected { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .table tr.is-selected a, .table tr.is-selected strong { color: currentColor; } .table tr.is-selected td, .table tr.is-selected th { - border-color: rgba(0, 0, 0, 0.7); + border-color: #fff; color: currentColor; } .table thead { background-color: transparent; } @@ -3308,7 +3308,7 @@ div.icon-text { .table.is-narrow th { padding: 0.25em 0.5em; } .table.is-striped tbody tr:not(.is-selected):nth-child(even) { - background-color: #fafafa; } + background-color: #353535; } .table-container { -webkit-overflow-scrolling: touch; @@ -3383,11 +3383,11 @@ div.icon-text { background-color: #363636; color: #fff; } .tag:not(body).is-primary { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .tag:not(body).is-primary.is-light { - background-color: #f8fafb; - color: #36515e; } + background-color: whitesmoke; + color: #8f8f8f; } .tag:not(body).is-link { background-color: #EB312E; color: #fff; } @@ -3638,18 +3638,18 @@ a.tag:hover { /* Bulma Form */ .input, .textarea, .select select { - background-color: white; + background-color: #D2D2D2; border-color: #D2D2D2; border-radius: 4px; - color: #363636; } + color: #181818; } .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { - color: rgba(54, 54, 54, 0.3); } + color: rgba(24, 24, 24, 0.3); } .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { - color: rgba(54, 54, 54, 0.3); } + color: rgba(24, 24, 24, 0.3); } .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { - color: rgba(54, 54, 54, 0.3); } + color: rgba(24, 24, 24, 0.3); } .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { - color: rgba(54, 54, 54, 0.3); } + color: rgba(24, 24, 24, 0.3); } .input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered { border-color: #EB302D; } .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 { @@ -3712,9 +3712,9 @@ a.tag:hover { .is-dark.input:focus, .is-dark.textarea:focus, .is-dark.is-focused.input, .is-dark.is-focused.textarea, .is-dark.input:active, .is-dark.textarea:active, .is-dark.is-active.input, .is-dark.is-active.textarea { box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } .is-primary.input, .is-primary.textarea { - border-color: #f8fafb; } + border-color: #181818; } .is-primary.input:focus, .is-primary.textarea:focus, .is-primary.is-focused.input, .is-primary.is-focused.textarea, .is-primary.input:active, .is-primary.textarea:active, .is-primary.is-active.input, .is-primary.is-active.textarea { - box-shadow: 0 0 0 0.125em rgba(248, 250, 251, 0.25); } + box-shadow: 0 0 0 0.125em rgba(24, 24, 24, 0.25); } .is-link.input, .is-link.textarea { border-color: #EB312E; } .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 { @@ -3918,13 +3918,13 @@ a.tag:hover { .select.is-dark select:focus, .select.is-dark select.is-focused, .select.is-dark select:active, .select.is-dark select.is-active { box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25); } .select.is-primary:not(:hover)::after { - border-color: #f8fafb; } + border-color: #181818; } .select.is-primary select { - border-color: #f8fafb; } + border-color: #181818; } .select.is-primary select:hover, .select.is-primary select.is-hovered { - border-color: #e8eef2; } + border-color: #0b0b0b; } .select.is-primary select:focus, .select.is-primary select.is-focused, .select.is-primary select:active, .select.is-primary select.is-active { - box-shadow: 0 0 0 0.125em rgba(248, 250, 251, 0.25); } + box-shadow: 0 0 0 0.125em rgba(24, 24, 24, 0.25); } .select.is-link:not(:hover)::after { border-color: #EB312E; } .select.is-link select { @@ -4174,21 +4174,21 @@ a.tag:hover { border-color: transparent; color: #fff; } .file.is-primary .file-cta { - background-color: #f8fafb; + background-color: #181818; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .file.is-primary:hover .file-cta, .file.is-primary.is-hovered .file-cta { - background-color: #f0f4f6; + background-color: #121212; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta { border-color: transparent; - box-shadow: 0 0 0.5em rgba(248, 250, 251, 0.25); - color: rgba(0, 0, 0, 0.7); } + box-shadow: 0 0 0.5em rgba(24, 24, 24, 0.25); + color: #fff; } .file.is-primary:active .file-cta, .file.is-primary.is-active .file-cta { - background-color: #e8eef2; + background-color: #0b0b0b; border-color: transparent; - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .file.is-link .file-cta { background-color: #EB312E; border-color: transparent; @@ -4642,7 +4642,7 @@ a.tag:hover { .help.is-dark { color: #363636; } .help.is-primary { - color: #f8fafb; } + color: #181818; } .help.is-link { color: #EB312E; } .help.is-info { @@ -5262,13 +5262,13 @@ button.dropdown-item { .message.is-dark .message-body { border-color: #363636; } .message.is-primary { - background-color: #f8fafb; } + background-color: whitesmoke; } .message.is-primary .message-header { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .message.is-primary .message-body { - border-color: #f8fafb; - color: #36515e; } + border-color: #181818; + color: #8f8f8f; } .message.is-link { background-color: #fdedec; } .message.is-link .message-header { @@ -5721,27 +5721,27 @@ button.dropdown-item { background-color: #363636; color: #fff; } } .navbar.is-primary { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .navbar.is-primary .navbar-brand > .navbar-item, .navbar.is-primary .navbar-brand .navbar-link { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .navbar.is-primary .navbar-brand > a.navbar-item:focus, .navbar.is-primary .navbar-brand > a.navbar-item:hover, .navbar.is-primary .navbar-brand > a.navbar-item.is-active, .navbar.is-primary .navbar-brand .navbar-link:focus, .navbar.is-primary .navbar-brand .navbar-link:hover, .navbar.is-primary .navbar-brand .navbar-link.is-active { - background-color: #e8eef2; - color: rgba(0, 0, 0, 0.7); } + background-color: #0b0b0b; + color: #fff; } .navbar.is-primary .navbar-brand .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); } + border-color: #fff; } .navbar.is-primary .navbar-burger { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } @media screen and (min-width: 1024px) { .navbar.is-primary .navbar-start > .navbar-item, .navbar.is-primary .navbar-start .navbar-link, .navbar.is-primary .navbar-end > .navbar-item, .navbar.is-primary .navbar-end .navbar-link { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .navbar.is-primary .navbar-start > a.navbar-item:focus, .navbar.is-primary .navbar-start > a.navbar-item:hover, .navbar.is-primary .navbar-start > a.navbar-item.is-active, .navbar.is-primary .navbar-start .navbar-link:focus, .navbar.is-primary .navbar-start .navbar-link:hover, @@ -5752,19 +5752,19 @@ button.dropdown-item { .navbar.is-primary .navbar-end .navbar-link:focus, .navbar.is-primary .navbar-end .navbar-link:hover, .navbar.is-primary .navbar-end .navbar-link.is-active { - background-color: #e8eef2; - color: rgba(0, 0, 0, 0.7); } + background-color: #0b0b0b; + color: #fff; } .navbar.is-primary .navbar-start .navbar-link::after, .navbar.is-primary .navbar-end .navbar-link::after { - border-color: rgba(0, 0, 0, 0.7); } + border-color: #fff; } .navbar.is-primary .navbar-item.has-dropdown:focus .navbar-link, .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link, .navbar.is-primary .navbar-item.has-dropdown.is-active .navbar-link { - background-color: #e8eef2; - color: rgba(0, 0, 0, 0.7); } + background-color: #0b0b0b; + color: #fff; } .navbar.is-primary .navbar-dropdown a.navbar-item.is-active { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } } + background-color: #181818; + color: #fff; } } .navbar.is-link { background-color: #EB312E; color: #fff; } @@ -7125,12 +7125,12 @@ a.navbar-item, .panel.is-dark .panel-block.is-active .panel-icon { color: #363636; } .panel.is-primary .panel-heading { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .panel.is-primary .panel-tabs a.is-active { - border-bottom-color: #f8fafb; } + border-bottom-color: #181818; } .panel.is-primary .panel-block.is-active .panel-icon { - color: #f8fafb; } + color: #181818; } .panel.is-link .panel-heading { background-color: #EB312E; color: #fff; } @@ -8678,31 +8678,31 @@ a.has-text-dark:hover, a.has-text-dark:focus { background-color: #363636 !important; } .has-text-primary { - color: #f8fafb !important; } + color: #181818 !important; } a.has-text-primary:hover, a.has-text-primary:focus { - color: #d8e3e8 !important; } + color: black !important; } .has-background-primary { - background-color: #f8fafb !important; } + background-color: #181818 !important; } .has-text-primary-light { - color: #f8fafb !important; } + color: whitesmoke !important; } a.has-text-primary-light:hover, a.has-text-primary-light:focus { - color: #d8e3e8 !important; } + color: #dbdbdb !important; } .has-background-primary-light { - background-color: #f8fafb !important; } + background-color: whitesmoke !important; } .has-text-primary-dark { - color: #36515e !important; } + color: #8f8f8f !important; } a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { - color: #486c7f !important; } + color: #a8a8a8 !important; } .has-background-primary-dark { - background-color: #36515e !important; } + background-color: #8f8f8f !important; } .has-text-link { color: #EB312E !important; } @@ -10626,50 +10626,50 @@ a.has-text-nexi-yellow-dark:hover, a.has-text-nexi-yellow-dark:focus { .hero.is-dark.is-bold .navbar-menu { background-image: linear-gradient(141deg, #1f191a 0%, #363636 71%, #46403f 100%); } } .hero.is-primary { - background-color: #f8fafb; - color: rgba(0, 0, 0, 0.7); } + background-color: #181818; + color: #fff; } .hero.is-primary a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .hero.is-primary strong { color: inherit; } .hero.is-primary .title { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .hero.is-primary .subtitle { - color: rgba(0, 0, 0, 0.9); } + color: rgba(255, 255, 255, 0.9); } .hero.is-primary .subtitle a:not(.button), .hero.is-primary .subtitle strong { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } @media screen and (max-width: 1023px) { .hero.is-primary .navbar-menu { - background-color: #f8fafb; } } + background-color: #181818; } } .hero.is-primary .navbar-item, .hero.is-primary .navbar-link { - color: rgba(0, 0, 0, 0.7); } + color: rgba(255, 255, 255, 0.7); } .hero.is-primary a.navbar-item:hover, .hero.is-primary a.navbar-item.is-active, .hero.is-primary .navbar-link:hover, .hero.is-primary .navbar-link.is-active { - background-color: #e8eef2; - color: rgba(0, 0, 0, 0.7); } + background-color: #0b0b0b; + color: #fff; } .hero.is-primary .tabs a { - color: rgba(0, 0, 0, 0.7); + color: #fff; opacity: 0.9; } .hero.is-primary .tabs a:hover { opacity: 1; } .hero.is-primary .tabs li.is-active a { - color: #f8fafb !important; + color: #181818 !important; opacity: 1; } .hero.is-primary .tabs.is-boxed a, .hero.is-primary .tabs.is-toggle a { - color: rgba(0, 0, 0, 0.7); } + color: #fff; } .hero.is-primary .tabs.is-boxed a:hover, .hero.is-primary .tabs.is-toggle a:hover { background-color: rgba(10, 10, 10, 0.1); } .hero.is-primary .tabs.is-boxed li.is-active a, .hero.is-primary .tabs.is-boxed li.is-active a:hover, .hero.is-primary .tabs.is-toggle li.is-active a, .hero.is-primary .tabs.is-toggle li.is-active a:hover { - background-color: rgba(0, 0, 0, 0.7); - border-color: rgba(0, 0, 0, 0.7); - color: #f8fafb; } + background-color: #fff; + border-color: #fff; + color: #181818; } .hero.is-primary.is-bold { - background-image: linear-gradient(141deg, #d4e8ec 0%, #f8fafb 71%, white 100%); } + background-image: linear-gradient(141deg, black 0%, #181818 71%, #272423 100%); } @media screen and (max-width: 768px) { .hero.is-primary.is-bold .navbar-menu { - background-image: linear-gradient(141deg, #d4e8ec 0%, #f8fafb 71%, white 100%); } } + background-image: linear-gradient(141deg, black 0%, #181818 71%, #272423 100%); } } .hero.is-link { background-color: #EB312E; color: #fff; } diff --git a/priceybot2/templates/quotes.html b/priceybot2/templates/quotes.html new file mode 100644 index 0000000..1739e02 --- /dev/null +++ b/priceybot2/templates/quotes.html @@ -0,0 +1,31 @@ +{% extends "base.html" %} + +{% block content %} +
+

Quotes

+
+ {% with messages = get_flashed_messages() %} + {% if messages %} +
+ {{ messages[0] }} +
+ {% endif %} + {% endwith %} + + {% for quote in quotes %} + + + + {% endfor %} + +
+ {{ quote }} +
+ +
+
+{% endblock %}