ii.Adding style

Modify tma02_admin.css to add the following style changes.

(6 marks)

Mike is concerned that there are some aspects of the look and feel which dont reflect his expectations. Despite it being a prototype, he is insistent that these be addressed.

He would ideally like the text to be in the Segoe UI font, but understands that cannot be guaranteed. Failing that he would like Arial, but if that is not possible, he wants to be sure that the font is from an appropriate generic family.

Modify one place in the CSS to use an appropriate font for the page text (note that text in the input fields and the buttons may not be changed).

Some elements are to be changed to less intense background colours. Mike isnt specific about the exact colour, so anything meeting his specifications will be fine.

The elements you need to change are:

text inputs to have a grey background

valid feedback to have a pale purple background

invalid feedback to have a pale red background.

Change the background colours as required. You may use any CSS mechanism to specify the colour. Note that autocomplete features in your web browser may affect the background colour of some inputs you are not required to address this.

In your solution document, provide your code and a screenshot of the web page showing the new colour scheme and font.

/* STANDARD ELEMENTS */

body { background-color: #f0f8ff; font-size: 14px; /* Always show a vertical scrollbar */ overflow-y: scroll; }

table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; text-align: left; }

header, footer { border: 2px solid #456879; box-sizing: border-box; margin: 6px 0; padding: 10px; }

/* FORM ELEMENTS */

label, a.cancel { display: inline-block; text-align: right; width: 20%; } input, select { border: 1px solid darkslategrey; color: black; display: inline-block; } input:focus, select:focus { outline: 2px solid darkslategrey; } input[type="text"], input[type="password"], input[type="submit"], select { background-color: lightgoldenrodyellow; margin: 6px 0; padding: 10px; } input[type="submit"] { background-color: lightgreen; } input[type="submit"][value="delete"] { background-color: pink; } input[type="radio"] { height: 20px; width: 20px; vertical-align: bottom; }

.valid { background-color: lightgreen; }

.invalid { background-color: orange; }

/* HIDE/SHOW SECTIONS */

pre { background: white; padding: 5px; }

/* This CSS requires the following HTML structure, where "id1" is a unique value for each input/label pair

[Show/Hide message here]

[or

or any element] [HTML to show/hide here]

This CSS is advanced - you're not expected to fully understand it. The complexity is necessary to keep the HTML simple and the app usable. For reference see e.g. - https://www.w3schools.com/cssref/sel_element_pluss.asp - https://www.w3schools.com/cssref/sel_gen_sibling.asp - https://www.w3schools.com/cssref/sel_attribute_value.asp - https://www.w3schools.com/cssref/sel_not.asp */ .collapser { margin-top: 20px; } input.collapser { position: absolute; left: -1000px; width: 0; height: 0; } input.collapser + label { background: plum; box-sizing: border-box; cursor: pointer; display: block; padding: 5px; margin-bottom: 20px; margin-top: 20px; text-align: center; width: 100%; } input.collapser + label:active { outline: 3px solid magenta; } input.collapser:focus + label { outline: 3px solid darkmagenta; } input.collapser:not(:checked) + label + * { display: none; }

/* Special case to show/hide script execution reports */ .report { background: white; padding: 5px; } .report.file { background: paleturquoise; } .report.message { background: powderblue; } input#show_reports:not(:checked) + label ~ .report { display: none; } input#show_reports:not(:checked) + label ~ .report.always { display: block; }