Fixing color contrast and small style updates of the top part

Description

Some color adjustments to achieve WCAG AA, also included some small top part changes

Browse content types - title:

.navbar-brand {
padding-left: 1.5em;
font-style: italic;
font-weight: 600;
font-size: 1.15em;
padding: 0.4em 0 0;
padding-left: 1.5em;
padding-top: 0px;
display: inline-block;
color: #ced6e3; should have enough contrast now since it is large text
}

*Blue buttons *
Contrast for hover effect is not good.
Since we are not setting color codes here just try reducing lightness by 10 or 15% this should be ok.

Border ( below menu items ) color

.h5p-hub .navbar{
border-bottom: solid 1px rgba(206, 214, 227, 0.34);
}

Search bar adjustments:

Search field:

.input-group input {
padding-left: 1.5em;
font-style: italic;
font-weight: 400;
font-size: 1.15em;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
}
when input field is selected{
font color: #000000; - for text user types
border-color: #3ba0f2;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25)
}
.form-control {
border: 1px solid #b4b8c1;
font-weight: 600;
}
Search field - placeholder text color:
color: #757575;

Search icon:
.icon-search {
font-size: 1.3em;
top: 0.95em;
right: 1.3em;
}

Top menu links ( all, my content types.... )

Links take too much vertical space, reduce the padding:

.navbar {
padding-top: 0.2em;
font-size: 1em;
}

Color for the links #ffffff

Top menu line ( create, upload )

.tab-panel {
height: 0.27em;
}

Acceptance Criteria

Colors should match WCAG AA
Top part slightly reduced in height and additional styling to the search bar

Status

Assignee

Timothy Lim

Reporter

Jelena Milinovic

Labels

None

Funding

None

Code reviewer

None

Released

None

Time tracking

2h

Fix versions

Priority

Medium
Configure