diff --git a/src/assets/base.css b/src/assets/base.css index 912bd876..58c20292 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -3,7 +3,8 @@ :root { /* Base color scheme */ - --clr-accent-50: #FAF5F8; + /* --clr-accent-50: #FAF5F8; */ + --clr-accent-50: #f9f3f6; --clr-accent-100: #F5EAF2; --clr-accent-200: #ECD5E5; --clr-accent-300: #E1BDD5; @@ -13,6 +14,7 @@ --clr-accent-700: #AF5091; --clr-accent-800: #8F4277; --clr-accent-900: #693057; + --clr-accent-950: #411632; --clr-gray-50: #F5F4F5; --clr-gray-100: #EBEAEB; @@ -46,6 +48,7 @@ --clr-dark-main-950: #120e1a; --clr-rating: rgb(235, 133, 0); + --clr-rating-bg: rgb(255, 238, 216); --shadow-color: 324deg 10% 71%; --shadow-elevation-low: diff --git a/src/assets/buttons.css b/src/assets/buttons.css index e3870391..4259a1a0 100644 --- a/src/assets/buttons.css +++ b/src/assets/buttons.css @@ -47,7 +47,7 @@ } .dark-theme .button.button--dark { - background-color: var(--clr-dark-main-200); + background-color: var(--clr-accent-500); color: var(--clr-dark-main-800); } diff --git a/src/assets/dialog.css b/src/assets/dialog.css index 1d4b8d47..3e826fc5 100644 --- a/src/assets/dialog.css +++ b/src/assets/dialog.css @@ -31,7 +31,7 @@ } .dialog__overlay { - background-color: rgba(21, 13, 34, 0.5); + background-color: rgba(21, 13, 34, 0.8); position: fixed; inset: 0; pointer-events: auto; @@ -54,7 +54,7 @@ } .dark-theme .dialog__content { - background-color: var(--clr-dark-main-950); + background-color: var(--clr-dark-main-800); border: 1px solid var(--clr-dark-main-800); } diff --git a/src/assets/forms.css b/src/assets/forms.css index 828eff04..2d3476c2 100644 --- a/src/assets/forms.css +++ b/src/assets/forms.css @@ -71,7 +71,7 @@ --form-clr-text: var(--clr-gray-100); --form-clr-bg: var(--clr-dark-main-700); --form-clr-bg-focus: var(--clr-dark-main-700); - --form-clr-border: var(--clr-dark-main-900); + --form-clr-border: var(--clr-dark-main-600); --form-clr-border-focus: var(--clr-accent-500); --form-clr-placeholder: var(--clr-gray-400); } diff --git a/src/assets/main.css b/src/assets/main.css index 489ec689..6ae619e4 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -58,7 +58,7 @@ main { } .dark-theme .page-subtitle { - --ps-clr-bg: var(--clr-dark-main-900); + --ps-clr-bg: rgba(0, 0, 0, .2); } h3.form-section-title { diff --git a/src/components/Cocktail/CocktailRating.vue b/src/components/Cocktail/CocktailRating.vue index 933f03db..8c94290b 100644 --- a/src/components/Cocktail/CocktailRating.vue +++ b/src/components/Cocktail/CocktailRating.vue @@ -45,7 +45,7 @@ export default { .resource-rating__alt { color: var(--clr-rating); - background-color: rgb(255, 238, 216); + background-color: var(--clr-rating-bg); display: block; padding: 0 5px; border-radius: var(--radius-1); diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue index 1aca8d84..f2f6189f 100644 --- a/src/components/ImageUpload.vue +++ b/src/components/ImageUpload.vue @@ -197,8 +197,8 @@ export default { } .dark-theme .image-upload__select { - --iu-clr-bg: linear-gradient(160deg, var(--clr-dark-main-900) 10%, var(--clr-dark-main-950) 110%); - --iu-clr-border: var(--clr-dark-main-800); + --iu-clr-bg: var(--clr-dark-main-700); + --iu-clr-border: var(--clr-dark-main-600); } @media (max-width: 450px) { @@ -213,6 +213,10 @@ export default { background-color: #fff; } +.dark-theme .image-upload__select:is(:hover, :active, :focus) { + background-color: var(--clr-dark-main-700); +} + .image-upload__select__icon { width: 60px; height: 60px; diff --git a/src/components/MiniRating.vue b/src/components/MiniRating.vue index f3a40117..51e90e7f 100644 --- a/src/components/MiniRating.vue +++ b/src/components/MiniRating.vue @@ -18,16 +18,16 @@ export default {