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 {