From bef110550fd6b71fcea7e24060bf7c72d8f8a837 Mon Sep 17 00:00:00 2001 From: Hugo Date: Mon, 12 Jun 2023 11:52:34 -0300 Subject: [PATCH 1/4] Update blueberries.css Fixed .language-dropdown__dropdown__results__item rule, improved readability in some rules, added new rules. --- blueberries.css | 88 ++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 80 insertions(+), 8 deletions(-) diff --git a/blueberries.css b/blueberries.css index 8a6fb85..28c8265 100644 --- a/blueberries.css +++ b/blueberries.css @@ -526,6 +526,15 @@ border-color: hsl(var(--hue), 70%, 47%); } + .compose-form__poll-wrapper .poll__footer, + .compose-form__poll-wrapper { + /* border-color: #ebebeb; */ + /* border-color: hsl(0, 0%, 92%); */ + /* border-color: hsl(var(--hue), 0%, 92%); */ + /* Manually changed for readability */ + border-color: hsl(var(--hue), 16%, 27%); + } + .compose-form__poll-wrapper select { /* color: #282c37; */ /* background-color: #fff; */ @@ -539,6 +548,13 @@ border: 1px solid hsl(var(--hue), 16%, 45%); } + /* Apparently an HTML "select" element cannot be properly styled in its expanded form. + So this exists to mitigate contrast issues with the (unstylable) selected item. */ + .compose-form__poll-wrapper select option { + background-color: hsl(var(--hue), 16%, 19%); + /* color: hsl(var(--hue), 17%, 15%); */ + + .poll__option input[type="text"]:focus { /* border-color: #8c8dff; */ /* border-color: hsl(239, 100%, 77%); */ @@ -564,6 +580,14 @@ color: hsl(var(--hue), 70%, 47%); } + .privacy-dropdown.active .privacy-dropdown__value { + /* background: #fff; */ + /* background: hsl(0, 0%, 100%); */ + /* background: hsl(var(--hue), 0%, 100%); */ + /* Manually changed for readability */ + background: hsl(var(--hue), 70%, 39%); + } + .privacy-dropdown.active .privacy-dropdown__value.active { /* background: #6364ff; */ /* background: hsl(240, 100%, 69%); */ @@ -607,10 +631,12 @@ background: hsl(var(--hue), 100%, 69%); } + .language-dropdown__dropdown__results__item.active, .language-dropdown__dropdown__results__item.active .language-dropdown__dropdown__results__item__common-name { - /* color: #d9e1e8; */ - /* color: hsl(208, 25%, 88%); */ - color: hsl(var(--hue), 25%, 88%); + /* color: #fff; */ + /* color: hsl(0, 0%, 100%); */ + /* Manually changed for readability */ + color: hsl(var(--hue), 16%, 38%); } .language-dropdown__dropdown__results__item.active:hover { @@ -623,7 +649,7 @@ /* color: #282c37; */ /* color: hsl(224, 16%, 19%); */ /* Manually changed for readability */ - color: hsl(300, 46%, 75.3%); + color: hsl(var(--hue), 46%, 75.3%); } .language-dropdown__dropdown__results__item__common-name { @@ -632,6 +658,20 @@ color: hsl(var(--hue), 29%, 70%); } + .language-dropdown__dropdown__results__item:active, + .language-dropdown__dropdown__results__item:focus, + .language-dropdown__dropdown__results__item:hover { + /* background: #d9e1e8; */ + /* background: hsl(208, 25%, 88%); */ + /* background: hsl(var(--hue), 25%, 88%); */ + /* Manually changed for readability */ + background: hsl(var(--hue), 25%, 37%); + } + + .emoji-button img { + filter: grayscale(100%) sepia(50%) hue-rotate(calc(var(--hue) - 50deg)); + } + .emoji-picker-dropdown__menu { /* background: #fff; */ /* background: hsl(0, 0%, 100%); */ @@ -706,6 +746,18 @@ color: hsl(var(--hue), 16%, 45%); } + .emoji-mart-anchor { + /* color: #606984; */ + /* color: hsl(225, 16%, 45%); */ + color: hsl(var(--hue), 16%, 45%); + } + + .emoji-mart-anchor:hover { + /* color: #a8b9cf; */ + /* color: hsl(214, 29%, 74%); */ + color: hsl(var(--hue), 29%, 74%); + } + .emoji-mart-bar { /* border-color: #c0cdd9; */ /* border-color: hsl(209, 25%, 80%); */ @@ -714,8 +766,12 @@ .emoji-mart-bar:first-child { /* background: #d9e1e8; */ + /* border-color: #c0cdd9; */ /* background: hsl(208, 25%, 88%); */ - background: hsl(var(--hue), 25%, 88%); + /* border-color: hsl(209, 25%, 80%); */ + /* Manually changed for readability */ + background: hsl(var(--hue), 17%, 15%); + border-color: hsl(var(--hue), 16%, 27%); } .emoji-mart-anchor-bar { @@ -733,15 +789,31 @@ /* background: hsla(208, 25%, 88%, .3); */ /* color: hsl(224, 16%, 19%); */ /* border-color: hsl(208, 25%, 88%); */ - background: hsla(var(--hue), 25%, 88%, .3); + /* Manually changed for readability */ + background: hsla(var(--hue), 17%, 15%, .3); color: hsl(var(--hue), 16%, 19%); - border-color: hsl(var(--hue), 25%, 88%); + border-color: hsl(var(--hue), 16%, 27%); + } + + .emoji-mart-search input::placeholder { + /* Manually changed for readability */ + color: hsl(var(--hue), 25%, 88%); + } + + .emoji-mart-search-icon svg { + /* fill: #606984; */ + /* fill: hsl(225, 16%, 45%); */ + /* fill: hsl(var(--hue), 16%, 45%); */ + /* Manually changed for readability */ + fill: hsl(var(--hue), 25%, 88%); } .emoji-mart-category .emoji-mart-emoji:hover::before { /* background-color: rgba(217,225,232,.7); */ /* background-color: hsla(208, 25%, 88%, .7); */ - background-color: hsla(var(--hue), 25%, 88%, .7); + /* background-color: hsla(var(--hue), 25%, 88%, .7); */ + /* Manually changed for readability */ + background-color: hsla(var(--hue), 25.4%, 27.8%, .7); } .dismissable-banner { From 73d7591ef4581791e1c1c2bc8539f93a3b2d65ca Mon Sep 17 00:00:00 2001 From: Hugo Date: Tue, 13 Jun 2023 13:27:20 -0300 Subject: [PATCH 2/4] Update blueberries.css Added "moved account" rules. --- blueberries.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/blueberries.css b/blueberries.css index 28c8265..2d6d6ac 100644 --- a/blueberries.css +++ b/blueberries.css @@ -3117,6 +3117,18 @@ background: hsl(var(--hue), 15%, 30%); } + .follow-request-banner, .moved-account-banner { + /*background: #313543; */ + /* background: hsl(227, 16%, 23%); */ + background: hsl(var(--hue), 16%, 23%); + } + + .follow-request-banner__message, .moved-account-banner__message { + color: #9baec8; + color: hsl(215, 29%, 70%); + color: hsl(var(--hue), 29%, 70%); + } + @media screen and (max-width: 1174px) { From d28b88a08ff96d4a934037a78ca7d12165fead29 Mon Sep 17 00:00:00 2001 From: Hugo Date: Thu, 15 Jun 2023 13:50:49 -0300 Subject: [PATCH 3/4] Update blueberries.css Fixed missing closing bracket in rule ".compose-form__poll-wrapper select option" --- blueberries.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blueberries.css b/blueberries.css index 2d6d6ac..e8aea56 100644 --- a/blueberries.css +++ b/blueberries.css @@ -552,7 +552,8 @@ So this exists to mitigate contrast issues with the (unstylable) selected item. */ .compose-form__poll-wrapper select option { background-color: hsl(var(--hue), 16%, 19%); - /* color: hsl(var(--hue), 17%, 15%); */ + /* color: hsl(var(--hue), 17%, 15%); */ + } .poll__option input[type="text"]:focus { From 01c997d0f7da0d434d1789fd8359105a133ab5c4 Mon Sep 17 00:00:00 2001 From: Hugo Date: Thu, 15 Jun 2023 13:54:38 -0300 Subject: [PATCH 4/4] Update blueberries.css Improved readability on emoji/language dropdown search bars. --- blueberries.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/blueberries.css b/blueberries.css index e8aea56..7300c5c 100644 --- a/blueberries.css +++ b/blueberries.css @@ -792,7 +792,8 @@ /* border-color: hsl(208, 25%, 88%); */ /* Manually changed for readability */ background: hsla(var(--hue), 17%, 15%, .3); - color: hsl(var(--hue), 16%, 19%); + /* Manually changed for readability */ + color: hsl(var(--hue), 16%, 72%); border-color: hsl(var(--hue), 16%, 27%); }