diff --git a/assets/dark.scss b/assets/dark.scss
index 1cbf34af4..5b7f36876 100644
--- a/assets/dark.scss
+++ b/assets/dark.scss
@@ -3,333 +3,339 @@
@import "variables";
*:hover > .hover-invertible {
- filter: invert(1);
+ filter: invert(1);
}
body[data-theme="dark"] {
- $primary-dark: #ff95bb;
-
- background: initial !important;
- background-color: $dark !important;
- color: $light;
-
- a { color: $primary-dark; }
- a:hover { color: lighten($primary-dark, 10%); }
- .text-dark { color: $light !important; }
- .btn-primary { color: $light; }
- .btn-outline-primary { color: $light; &:hover {color: $light;}}
- .btn-outline-success { color: lighten($success, 20%); &:hover {color: $light;} }
- .alert-info { background-color: darken($info, 35%); border-color: darken($info, 25%); color: $light; }
-
- /* BUTTONS */
-
- .btn-link { color: #fff; }
- .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
- .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
- .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
- .btn-check:focus + .btn-dark,
- .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
- .btn-check:checked + .btn-dark,
- .btn-check:active + .btn-dark,
- .btn-dark:active,
- .btn-dark.active,
- .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
- .btn-check:checked + .btn-dark:focus,
- .btn-check:active + .btn-dark:focus,
- .btn-dark:active:focus,
- .btn-dark.active:focus,
- .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
- .btn-dark:disabled,
- .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
- .btn-light { color: #fff; background-color: #212529; border-color: #212529; }
- .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; }
- .btn-check:focus + .btn-light,
- .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
- .btn-check:checked + .btn-light,
- .btn-check:active + .btn-light,
- .btn-light:active,
- .btn-light.active,
- .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; }
- .btn-check:checked + .btn-light:focus,
- .btn-check:active + .btn-light:focus,
- .btn-light:active:focus,
- .btn-light.active:focus,
- .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
- .btn-light:disabled,
- .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; }
- .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; }
- .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
- .btn-check:focus + .btn-outline-dark,
- .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
- .btn-check:checked + .btn-outline-dark,
- .btn-check:active + .btn-outline-dark,
- .btn-outline-dark:active,
- .btn-outline-dark.active,
- .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
- .btn-check:checked + .btn-outline-dark:focus,
- .btn-check:active + .btn-outline-dark:focus,
- .btn-outline-dark:active:focus,
- .btn-outline-dark.active:focus,
- .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
- .btn-outline-dark:disabled,
- .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; }
- .btn-outline-light { color: #212529; border-color: #212529; }
- .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; }
- .btn-check:focus + .btn-outline-light,
- .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
- .btn-check:checked + .btn-outline-light,
- .btn-check:active + .btn-outline-light,
- .btn-outline-light:active,
- .btn-outline-light.active,
- .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; }
- .btn-check:checked + .btn-outline-light:focus,
- .btn-check:active + .btn-outline-light:focus,
- .btn-outline-light:active:focus,
- .btn-outline-light.active:focus,
- .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
- .btn-outline-light:disabled,
- .btn-outline-light.disabled { color: #212529; background-color: transparent; }
-
- /* DROPDOWNS */
-
- .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); }
- .dropdown-menu .dropdown-item { color: #dee2e6; }
- .dropdown-menu .dropdown-item:hover,
- .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); }
- .dropdown-menu .dropdown-item.active,
- .dropdown-menu .dropdown-item:active { color: #fff; background-color: #0d6efd; }
- .dropdown-menu .dropdown-item.disabled,
- .dropdown-menu .dropdown-item:disabled { color: #adb5bd; }
- .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); }
- .dropdown-menu .dropdown-item-text { color: #dee2e6; }
- .dropdown-menu .dropdown-header { color: #adb5bd; }
-
- /* LIST GROUPS */
-
- .list-group-item-action { color: #fff; }
- .list-group-item-action:hover,
- .list-group-item-action:focus { color: #fff; background-color: #333; }
- .list-group-item-action:active { color: #212529; background-color: #e9ecef; }
- .list-group-item { color: #eee; background-color: #111; border: 1px solid #333; }
- .list-group-item:not(:first-child) { border-top: none; }
- .list-group-item.disabled,
- .list-group-item:disabled { color: #fff; background-color: #000; }
- .list-group-item.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
-
- /* TABS */
-
- .nav-tabs { border-bottom: 1px solid #000; }
- .nav-tabs .nav-link:hover,
- [data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; }
- .nav-tabs .nav-link.disabled { color: #333; }
- .nav-tabs .nav-link.active,
- .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; }
-
- /* PAGINATION */
-
- .page-link { color: #fff; background-color: #111; border: 1px solid #333; }
- .page-link:hover { color: #fff; background-color: #333; border-color: #333; }
- .page-link:focus { color: #fff; background-color: #000; }
- .page-item.active .page-link { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
- .page-item.disabled .page-link { color: #fff; background-color: #000; border-color: #333; }
-
- /* BACKGROUNDS */
-
- .bg-light { background-color: #212529 !important; }
- .bg-dark { background-color: #f8f9fa !important; }
- .bg-white { background-color: #000 !important; }
- .bg-white.text-white,
- .bg-dark.text-white,
- .bg-warning.text-dark,
- .bg-info.text-dark { color: #212529 !important; }
-
- /* BORDERS */
-
- .border,
- .border-top,
- .border-end,
- .border-bottom,
- .border-start { border-color: rgba(66, 70, 73, 0.5) !important; }
-
- /* BREADCRUMB */
-
- .breadcrumb.border { border-color: #333 !important; }
-
- /* SHADOWS */
-
- .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
- .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; }
- .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; }
-
- .cookie-consent { box-shadow: 0 -0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
-
- /* CARDS */
-
- .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); }
-
- /* MODALS */
-
- .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); }
- .modal-header { border-bottom: 1px solid #212529; }
- .modal-footer { border-top: 1px solid #212529; }
- .modal-backdrop.show { opacity: 0.75; }
-
- /* ACCORDIONS */
-
- .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
- .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; }
- .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; }
- .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }
- .accordion-collapse { border: 1px solid #333; }
- .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; }
- .accordion-flush .accordion-collapse { border-width: 0; }
- .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
- .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
-
- /* PROGRESS BARS */
-
- .progress { background-color: #333; }
-
- /* FORMS */
-
- .form-control::-webkit-input-placeholder,
- .form-control::-moz-placeholder,
- .form-control::placeholder { color: $light; }
- .form-control-plaintext { color: $light; }
- .form-control { color: #fff; background-color: #333; border: 1px solid #111; }
- .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; }
- .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); }
- .form-select:focus::-ms-value { color: #495057; background-color: #fff; }
- .form-select option { color: #000; }
- .form-select:disabled { color: #6c757d; background-color: #e9ecef; }
- .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; }
-
- /* CUSTOM */
- .separator {
- > .mask {
- &:after {
- box-shadow: 0 0 10px $light;
- }
- }
- > span {
- box-shadow:0 2px 4px $light;
- background: tint-color($light, 80%);
- color: $dark;
- }
- }
-
- .invertible {
- filter: invert(1);
- }
-
- mark {
- background-color: #848171;
+ background: initial !important;
+ background-color: $dark !important;
color: $light;
- }
- .table, .table-striped {
- > tbody > tr, > thead > tr, > tfoot > tr {
- td, th {
+ a { color: $primary-dark; }
+ a:hover { color: lighten($primary-dark, 10%); }
+ .text-dark { color: $light !important; }
+ .btn-primary { color: $light; }
+ .btn-outline-primary { color: $light; &:hover {color: $light;}}
+ .btn-outline-success { color: lighten($success, 20%); &:hover {color: $light;} }
+ .alert-info { background-color: darken($info, 35%); border-color: darken($info, 25%); color: $light; }
+
+ /* BUTTONS */
+
+ .btn-link { color: #fff; }
+ .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
+ .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
+ .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
+ .btn-check:focus + .btn-dark,
+ .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
+ .btn-check:checked + .btn-dark,
+ .btn-check:active + .btn-dark,
+ .btn-dark:active,
+ .btn-dark.active,
+ .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
+ .btn-check:checked + .btn-dark:focus,
+ .btn-check:active + .btn-dark:focus,
+ .btn-dark:active:focus,
+ .btn-dark.active:focus,
+ .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
+ .btn-dark:disabled,
+ .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
+ .btn-light { color: #fff; background-color: #212529; border-color: #212529; }
+ .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; }
+ .btn-check:focus + .btn-light,
+ .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
+ .btn-check:checked + .btn-light,
+ .btn-check:active + .btn-light,
+ .btn-light:active,
+ .btn-light.active,
+ .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; }
+ .btn-check:checked + .btn-light:focus,
+ .btn-check:active + .btn-light:focus,
+ .btn-light:active:focus,
+ .btn-light.active:focus,
+ .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
+ .btn-light:disabled,
+ .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; }
+ .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; }
+ .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
+ .btn-check:focus + .btn-outline-dark,
+ .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
+ .btn-check:checked + .btn-outline-dark,
+ .btn-check:active + .btn-outline-dark,
+ .btn-outline-dark:active,
+ .btn-outline-dark.active,
+ .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
+ .btn-check:checked + .btn-outline-dark:focus,
+ .btn-check:active + .btn-outline-dark:focus,
+ .btn-outline-dark:active:focus,
+ .btn-outline-dark.active:focus,
+ .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
+ .btn-outline-dark:disabled,
+ .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; }
+ .btn-outline-light { color: #212529; border-color: #212529; }
+ .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; }
+ .btn-check:focus + .btn-outline-light,
+ .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
+ .btn-check:checked + .btn-outline-light,
+ .btn-check:active + .btn-outline-light,
+ .btn-outline-light:active,
+ .btn-outline-light.active,
+ .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; }
+ .btn-check:checked + .btn-outline-light:focus,
+ .btn-check:active + .btn-outline-light:focus,
+ .btn-outline-light:active:focus,
+ .btn-outline-light.active:focus,
+ .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
+ .btn-outline-light:disabled,
+ .btn-outline-light.disabled { color: #212529; background-color: transparent; }
+
+ /* DROPDOWNS */
+
+ .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); }
+ .dropdown-menu .dropdown-item { color: #dee2e6; }
+ .dropdown-menu .dropdown-item:hover,
+ .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); }
+ .dropdown-menu .dropdown-item.active,
+ .dropdown-menu .dropdown-item:active { color: #fff; background-color: #0d6efd; }
+ .dropdown-menu .dropdown-item.disabled,
+ .dropdown-menu .dropdown-item:disabled { color: #adb5bd; }
+ .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); }
+ .dropdown-menu .dropdown-item-text { color: #dee2e6; }
+ .dropdown-menu .dropdown-header { color: #adb5bd; }
+
+ /* LIST GROUPS */
+
+ .list-group-item-action { color: #fff; }
+ .list-group-item-action:hover,
+ .list-group-item-action:focus { color: #fff; background-color: #333; }
+ .list-group-item-action:active { color: #212529; background-color: #e9ecef; }
+ .list-group-item { color: #eee; background-color: #111; border: 1px solid #333; }
+ .list-group-item:not(:first-child) { border-top: none; }
+ .list-group-item.disabled,
+ .list-group-item:disabled { color: #fff; background-color: #000; }
+ .list-group-item.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
+
+ /* TABS */
+
+ .nav-tabs { border-bottom: 1px solid #000; }
+ .nav-tabs .nav-link:hover,
+ [data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; }
+ .nav-tabs .nav-link.disabled { color: #333; }
+ .nav-tabs .nav-link.active,
+ .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; }
+
+ /* PAGINATION */
+
+ .page-link { color: #fff; background-color: #111; border: 1px solid #333; }
+ .page-link:hover { color: #fff; background-color: #333; border-color: #333; }
+ .page-link:focus { color: #fff; background-color: #000; }
+ .page-item.active .page-link { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
+ .page-item.disabled .page-link { color: #fff; background-color: #000; border-color: #333; }
+
+ /* BACKGROUNDS */
+
+ .bg-light { background-color: #212529 !important; }
+ .bg-dark { background-color: #f8f9fa !important; }
+ .bg-white { background-color: #000 !important; }
+ .bg-white.text-white,
+ .bg-dark.text-white,
+ .bg-warning.text-dark,
+ .bg-info.text-dark { color: #212529 !important; }
+
+ /* BORDERS */
+
+ .border,
+ .border-top,
+ .border-end,
+ .border-bottom,
+ .border-start { border-color: rgba(66, 70, 73, 0.5) !important; }
+
+ /* BREADCRUMB */
+
+ .breadcrumb.border { border-color: #333 !important; }
+
+ /* SHADOWS */
+
+ .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
+ .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; }
+ .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; }
+
+ .cookie-consent { box-shadow: 0 -0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
+
+ /* CARDS */
+
+ .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); }
+
+ /* MODALS */
+
+ .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); }
+ .modal-header { border-bottom: 1px solid #212529; }
+ .modal-footer { border-top: 1px solid #212529; }
+ .modal-backdrop.show { opacity: 0.75; }
+
+ /* ACCORDIONS */
+
+ .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
+ .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; }
+ .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; }
+ .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }
+ .accordion-collapse { border: 1px solid #333; }
+ .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; }
+ .accordion-flush .accordion-collapse { border-width: 0; }
+ .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
+ .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
+
+ /* PROGRESS BARS */
+
+ .progress { background-color: #333; }
+
+ /* FORMS */
+
+ .form-control::-webkit-input-placeholder,
+ .form-control::-moz-placeholder,
+ .form-control::placeholder { color: $light; }
+ .form-control-plaintext { color: $light; }
+ .form-control { color: #fff; background-color: #333; border: 1px solid #111; }
+ .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; }
+ .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); }
+ .form-select:focus::-ms-value { color: #495057; background-color: #fff; }
+ .form-select option { color: #000; }
+ .form-select:disabled { color: #6c757d; background-color: #e9ecef; }
+ .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; }
+
+ /* CUSTOM */
+ .separator {
+ > .mask {
+ &:after {
+ box-shadow: 0 0 10px $light;
+ }
+ }
+ > span {
+ box-shadow:0 2px 4px $light;
+ background: tint-color($light, 80%);
+ color: $dark;
+ }
+ }
+
+ .invertible {
+ filter: invert(1);
+ }
+
+ mark {
+ background-color: #848171;
color: $light;
- }
}
- }
- .alert {
.table, .table-striped {
- > tbody > tr, > thead > tr, > tfoot > tr {
- td, th {
- color: $dark;
+ > tbody > tr, > thead > tr, > tfoot > tr {
+ td, th {
+ color: $light;
+ }
}
- }
}
- }
- header {
- .nav-item {
- color: $light;
- &.active, &:hover {
- color: $primary-dark !important;
- }
- }
- }
-
- @include media-breakpoint-down('lg', $grid-breakpoints) {
- .nav-custom {
- .btn {
- &:hover, &:focus, &.active {
- border-inline-start: 3px solid $primary-dark !important;
+ .alert {
+ .table, .table-striped {
+ > tbody > tr, > thead > tr, > tfoot > tr {
+ td, th {
+ color: $dark;
+ }
+ }
}
- }
}
- }
- .nav-custom-start {
- .btn {
- &:hover, &:focus, &.active {
- border-inline-start: 3px solid $primary-dark !important;
- }
- }
- }
-
- @include media-breakpoint-up('lg', $grid-breakpoints) {
- .nav-custom:not(.nav-custom-start) {
- .nav-item {
- &.btn {
- &:hover, &:focus, &.active {
- border-bottom: 3px solid $primary-dark !important;
- }
- }
- }
- }
- }
-
- @include media-breakpoint-up('lg', $grid-breakpoints) {
header {
- @supports not (backdrop-filter: blur(12px)) {
+ .nav-item {
+ color: $light;
+ &.active, &:hover {
+ color: $primary-dark !important;
+ }
+ }
+ }
+
+ @include media-breakpoint-down('lg', $grid-breakpoints) {
+ .nav-custom {
+ .btn {
+ &:hover, &:focus, &.active {
+ border-inline-start: 3px solid $primary-dark !important;
+ }
+ }
+ }
+ }
+
+ .nav-custom-start {
+ .btn {
+ &:hover, &:focus, &.active {
+ border-inline-start: 3px solid $primary-dark !important;
+ }
+ }
+ }
+
+ @include media-breakpoint-up('lg', $grid-breakpoints) {
+ .nav-custom:not(.nav-custom-start) {
+ .nav-item {
+ &.btn {
+ &:hover, &:focus, &.active {
+ border-bottom: 3px solid $primary-dark !important;
+ }
+ }
+ }
+ }
+ }
+
+ @include media-breakpoint-up('lg', $grid-breakpoints) {
+ header {
+ @supports not (backdrop-filter: blur(12px)) {
+ background-color: $dark;
+ }
+ }
+ }
+
+ .alert-primary, .alert-success, .alert-warning, .alert-danger {
+ a {
+ color: $primary-dark;
+ }
+ }
+
+ .alert-warning a.btn-primary {
+ color: $white;
+ }
+
+ .alert-light {
+ background-color: $gray-800;
+ color: $white;
+ }
+
+ .badge.bg-dark {
+ color: $black;
+ }
+
+ .vdp-datepicker__calendar {
background-color: $dark;
- }
}
- }
- .alert-primary, .alert-success, .alert-warning, .alert-danger {
- a {
- color: $primary-dark;
+ .day-event-0 {
+ color: $black;
}
- }
- .alert-warning a.btn-primary {
- color: $white;
- }
+ .profile-current {
+ border-inline-start: 3px solid $primary-dark !important;
+ }
- .alert-light {
- background-color: $gray-800;
- color: $white;
- }
+ .list-group-flare > :first-child {
+ border-top: 3px solid $primary-dark !important;
+ }
- .badge.bg-dark {
- color: $black;
- }
+ code {
+ color: lighten($code-color, 45%);
+ background-color: darken($code-color, 30%);
+ border: 1px solid lighten($code-color, 30%);
+ }
- .vdp-datepicker__calendar {
- background-color: $dark;
- }
-
- .day-event-0 {
- color: $black;
- }
-
- .profile-current {
- border-inline-start: 3px solid $primary-dark !important;
- }
-
- .list-group-flare > :first-child {
- border-top: 3px solid $primary-dark !important;
- }
-
- code {
- color: lighten($code-color, 45%);
- background-color: darken($code-color, 30%);
- border: 1px solid lighten($code-color, 30%);
- }
+ &:not(.reduced-colours) {
+ @each $name, $value in $colours {
+ .colour-#{$name} {
+ color: map-get($value, 'dark') !important;
+ }
+ }
+ }
}
diff --git a/assets/fonts.scss b/assets/fonts.scss
index 89c29e4c8..034c53073 100644
--- a/assets/fonts.scss
+++ b/assets/fonts.scss
@@ -1,6 +1,6 @@
@use "sass:list";
-@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@700&display=swap');
@if list.index($fonts, 'Quicksand') {
/* quicksand-regular - latin-ext_latin */
diff --git a/assets/style.scss b/assets/style.scss
index 103c10bc3..0e3bced60 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -246,3 +246,18 @@ form[disabled] {
border-inline-start: 3px solid $primary;
padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
}
+
+.bold {
+ font-weight: bold;
+}
+.italics {
+ font-style: italic;
+}
+
+body:not(.reduced-colours) {
+ @each $name, $value in $colours {
+ .colour-#{$name} {
+ color: map-get($value, 'light') !important;
+ }
+ }
+}
diff --git a/assets/variables.scss b/assets/variables.scss
index b5fae8967..7e4d2d58a 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -33,3 +33,14 @@ $square-button-size: 2.2rem;
@import "~bootstrap/scss/utilities";
@import '~@fortawesome/fontawesome-pro/scss/variables';
+
+$primary-dark: #ff95bb;
+
+$colours: (
+ 'pink': ('light': $primary, 'dark': $primary-dark),
+ 'red': ('light': $red, 'dark': $red-200),
+ 'orange': ('light': $orange-600, 'dark': $orange-300),
+ 'green': ('light': $green, 'dark': $green-300),
+ 'blue': ('light': $blue-700, 'dark': $blue-200),
+ 'grey': ('light': $gray-600, 'dark': $gray-300),
+);
diff --git a/components/CookieConsent.vue b/components/CookieConsent.vue
index 7e0b9e696..5e7e7a1c1 100644
--- a/components/CookieConsent.vue
+++ b/components/CookieConsent.vue
@@ -54,7 +54,7 @@ export default {
},
computed: {
enabled() {
- return this.config.ads?.enabled;
+ return this.config.ads?.enabled && process.env.NODE_ENV !== 'development';
},
visible() {
return this.enabled && this.consent === undefined;
diff --git a/components/IconSelector.vue b/components/IconSelector.vue
new file mode 100644
index 000000000..d52e1e4b9
--- /dev/null
+++ b/components/IconSelector.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
rel="me"
tag pointing back to the card.
Our links also include a rel="me"
tag, so that external websites can verify your card the other way round too.
column: 'Column'
+ opinions:
+ header: 'Legend/opinions'
+ description: 'Description…'
+ colours:
+ _: '(Font colour…)'
+ pink: 'Pink'
+ red: 'Red'
+ orange: 'Orange'
+ green: 'Green'
+ blue: 'Blue'
+ grey: 'Grey'
+ styles:
+ _: '(Style…)'
+ bold: 'Bold'
+ italics: 'Italics'
+ small: 'Small'
+ validation:
+ missingIcon: 'Icon is required'
+ missingDescription: 'Description is required'
+ duplicateIcon: 'Icon must be unique'
+ duplicateDescription: 'Description must be unique'
+ invalidOpinion: 'Selected icon was not found in the legend above'
+ custom: 'custom, added by the user:'
header: 'Cards'
list: 'Your cards'
@@ -660,6 +683,7 @@ crud:
loginRequired: '{/account=Log in} to submit an entry'
copy: 'Copy link'
download: 'Download'
+ loadAll: 'Load all…'
footer:
license: >
@@ -895,6 +919,7 @@ mode:
light: 'Light mode'
automatic: 'Automatic'
dark: 'Dark mode'
+ reducedColours: 'Reduced colours'
ban:
reason: 'Ban reason'
diff --git a/locale/en/translations.suml b/locale/en/translations.suml
index 854484b59..9f81a0588 100644
--- a/locale/en/translations.suml
+++ b/locale/en/translations.suml
@@ -702,6 +702,29 @@ profile:
or (under construction) by a rel="me"
tag pointing back to the card.
Our links also include a rel="me"
tag, so that external websites can verify your card the other way round too.
column: 'Column'
+ opinions:
+ header: 'Legend/opinions'
+ description: 'Description…'
+ colours:
+ _: '(Font colour…)'
+ pink: 'Pink'
+ red: 'Red'
+ orange: 'Orange'
+ green: 'Green'
+ blue: 'Blue'
+ grey: 'Grey'
+ styles:
+ _: '(Style…)'
+ bold: 'Bold'
+ italics: 'Italics'
+ small: 'Small'
+ validation:
+ missingIcon: 'Icon is required'
+ missingDescription: 'Description is required'
+ duplicateIcon: 'Icon must be unique'
+ duplicateDescription: 'Description must be unique'
+ invalidOpinion: 'Selected icon was not found in the legend above'
+ custom: 'custom, added by the user:'
header: 'Cards'
list: 'Your cards'
@@ -756,6 +779,7 @@ crud:
loginRequired: '{/account=Log in} to submit an entry'
copy: 'Copy link'
download: 'Download'
+ loadAll: 'Load all…'
footer:
license: >
@@ -1007,6 +1031,7 @@ mode:
light: 'Light mode'
automatic: 'Automatic'
dark: 'Dark mode'
+ reducedColours: 'Reduced colours'
ban:
reason: 'Ban reason'
diff --git a/locale/expectedTranslations.js b/locale/expectedTranslations.js
index 7fdf9b8a8..5a0611db1 100644
--- a/locale/expectedTranslations.js
+++ b/locale/expectedTranslations.js
@@ -52,4 +52,25 @@ export default [
'user.qr.download',
'footer.stats.month',
'profile.wordsColumnHeader',
+ 'profile.opinions.header',
+ 'profile.opinions.description',
+ 'profile.opinions.colours._',
+ 'profile.opinions.colours.pink',
+ 'profile.opinions.colours.red',
+ 'profile.opinions.colours.orange',
+ 'profile.opinions.colours.green',
+ 'profile.opinions.colours.blue',
+ 'profile.opinions.colours.grey',
+ 'profile.opinions.styles._',
+ 'profile.opinions.styles.bold',
+ 'profile.opinions.styles.italics',
+ 'profile.opinions.styles.small',
+ 'profile.opinions.validation.missingIcon',
+ 'profile.opinions.validation.missingDescription',
+ 'profile.opinions.validation.duplicateIcon',
+ 'profile.opinions.validation.duplicateDescription',
+ 'profile.opinions.validation.invalidOpinion',
+ 'profile.opinions.custom',
+ 'mode.reducedColours',
+ 'crud.loadAll',
];
diff --git a/locale/pl/translations.suml b/locale/pl/translations.suml
index 4d7e40422..545aeb95a 100644
--- a/locale/pl/translations.suml
+++ b/locale/pl/translations.suml
@@ -1343,6 +1343,29 @@ profile:
albo (ficzer w budowie) poprzez umieszczenie tagu rel="me"
wskazującego z powrotem na wizytówkę.
Nasze linki również umieszczają rel="me"
, aby zewnętrzne strony mogły potwierdzić wizytówkę również w odwrotną stronę.
column: 'Kolumna'
+ opinions:
+ header: 'Legenda/opinie'
+ description: 'Opis…'
+ colours:
+ _: '(Kolor fontu…)'
+ pink: 'Różowy'
+ red: 'Czerwony'
+ orange: 'Pomarańczowy'
+ green: 'Zielony'
+ blue: 'Niebieski'
+ grey: 'Szary'
+ styles:
+ _: '(Styl tekstu…)'
+ bold: 'Pogrubiony'
+ italics: 'Kursywa'
+ small: 'Mały'
+ validation:
+ missingIcon: 'Ikona jest wymagana'
+ missingDescription: 'Opis jest wymagany'
+ duplicateIcon: 'Ikony muszą być unikalne'
+ duplicateDescription: 'Opishy muszą być unikalne'
+ invalidOpinion: 'Wybrana ikona nie jest dostępna w legendzie powyżej'
+ custom: 'dodane ręcznie:'
header: 'Wizytówki'
list: 'Twoje wizytówki'
@@ -1463,6 +1486,7 @@ crud:
loginRequired: '{/konto=Zaloguj się}, aby zgłosić wpis'
copy: 'Skopiuj link'
download: 'Ściągnij'
+ loadAll: 'Załaduj wszystko…'
footer:
license: >
@@ -1679,6 +1703,7 @@ mode:
light: 'Tryb dzienny'
automatic: 'Auto'
dark: 'Tryb nocny'
+ reducedColours: 'Zredukowane kolory'
ban:
reason: 'Powód blokady'
diff --git a/migrations/061-profile-opinions.sql b/migrations/061-profile-opinions.sql
new file mode 100644
index 000000000..3c7223b44
--- /dev/null
+++ b/migrations/061-profile-opinions.sql
@@ -0,0 +1,6 @@
+-- Up
+
+ALTER TABLE profiles ADD COLUMN opinions TEXT NOT NULL DEFAULT '{}';
+
+-- Down
+
diff --git a/nuxt.config.js b/nuxt.config.js
index 5269b8726..37bacaeb0 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -202,10 +202,15 @@ export default {
config.module.rules.push({
test: /\.md$/,
use: ['html-loader', 'markdown-loader']
+ });
+ config.module.rules.push({
+ test: /\.ya?ml$/,
+ use: 'yaml-loader',
})
},
},
env: {
+ ENV: process.env.ENV,
BASE_URL: process.env.BASE_URL,
HOME_URL: process.env.HOME_URL || 'https://pronouns.page',
TITLE: title,
diff --git a/package.json b/package.json
index 91d887845..3ed3fa547 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"vuedraggable": "^2.24.3",
"vuejs-datepicker": "^1.6.2",
"webpack": "^5.0",
+ "yaml-loader": "^0.8.0",
"zh_cn_zh_tw": "^1.0.7"
},
"devDependencies": {
diff --git a/routes/profile.vue b/routes/profile.vue
index d8e56d674..be383f4c9 100644
--- a/routes/profile.vue
+++ b/routes/profile.vue
@@ -135,6 +135,9 @@