Reversi: Text in header search box unreadable when it has focus

Description

Originally reported on Google Code with ID 4250
What archive revision are you testing on? (See the version label in
the footer, for example v0.8.13.8.)
otwarchive test-0.9.49.4

If appropriate, enter the URL of a page where the problem can be seen:
http://test.archiveofourown.org/?site_skin=929

What steps will reproduce the problem?
1. Log in
2. From Choose Skin in the footer, select Reversi
3. Enter text in the search box in the site header

What is the expected output? What do you see instead?
I expect to be able to read it. Instead, the text is black on dark grey and hard to
read until you click or tab out of the field, at which point it becomes white or light
grey.

NOTE: Please do mention if you notice issues with:

  • inconsistency with other things on the archive

  • how this might work for screenreader/mobile/other devices or users with
    other accessibility issues

  • overlap with other features or gap left between features

  • the clarity and conciseness of the text

  • how well one action flows to another

  • how intuitive you find the correct actions

  • if not intuitive, how badly things go wrong if you do what you find
    intuitive

Please use labels and text to provide additional information.

Activity

Show:
cosette
November 24, 2016, 7:32 AM

i think the problem arises because #header .search input[type="text"] is grouped with a lot of other elements that have been given the colour #eee. but rather than separate #header .search input[type="text"] from the group, you can just add

#header .search input[type="text"] {
color: #ffffff;
}

under this big chunk of code

.actions a,
.actions a:link,
.action,
.action:link,
.actions input,
input[type="submit"],
button,
.current,
.actions label,
#header .actions a,
#header input[type="submit"],
#header .search input[type="text"] {
background: #555;
border-color: #222;
color: #eee;
box-shadow: inset 0 -8px 4px #232323, inset 0 8px 7px #555;
text-shadow: none;
}

redsummernight
October 13, 2019, 8:40 PM

We can submit a PR for the changes following AO3-5787.

Sarken
January 25, 2020, 6:00 AM

Updated Reversi on the admin side, but the skins need james_ to recache them before this can be set to QA.

Sarken
January 26, 2020, 10:25 AM

Looks good in Safari 13.0.4!

redsummernight
January 28, 2020, 4:51 AM

Looks good in Firefox 72.0.2.

DeployedToBeta

Assignee

cosette

Reporter

Sarken

Roadmap

Skins

Priority

Medium

Affects versions

None

Fix versions

Components

FrontEnd

Difficulty

Easy

Required Access Level

Admin

Milestone

Internal 0.9

Google Code Issue ID

4250
Configure