Clean up look of summary and details to remove visual noise

Visual noise and the psychological effect known as "the tyranny of small decisions are at play in the admin UI where:

a) All details wrappers are expanded by default on pageload nullifying their utility (their purpose is to collapse information until it is needed.
b) Every details element has a border around it creating excessive visual noise.

The proposal is very compact and simple and includes just four things:

• Make the default state of all of the summary and details elements "closed"
• Remove the border from the details element and add it to the details wrapper
• Add outline none to the details element since it is not an input and does not require a focus effect (The effect is also confusing and obtrusive because it surrounds only the summary and not the details wrapper which is where the user action will occur)
• Override the default closed details wrapper for the first summary/details element on any form in which all content is wrapped in summary/details

Examples

Admin/content on load (current):

admin/content on load (proposed):

Misplaced focus:

admin/configuration/site_information (current):

admin/configuration/site_information (proposed):

Changes to system.theme.css

summary {
cursor: pointer;
+ padding: 0.2em 1em .2em 0;
+ outline: none;
}

details {
- border: 1px solid #ccc;
margin-top: 1em;
margin-bottom: 1em;
}

.details-wrapper {
+ padding: 1em 1.5em;
+ border: 1px solid #ddd;
}

I don't know how to make the details closed by default. Perhaps someone who does could add that to the above CSS and make this a patch. :)