/* vim:set et ts=4 sw=4 */ form { border: 1px solid #ddd; padding: 0 1em; } /* recursive models can be displayed as a tree within a <select>, by * ordering them cleverly and adding their "depth" to the class, to * bump them to the right, indicating their ancestry */ form option.depth-1 { padding-left: 1em; } form option.depth-2 { padding-left: 2em; } form option.depth-3 { padding-left: 3em; } form option.depth-4 { padding-left: 4em; } form option.depth-5 { padding-left: 5em; } form option.depth-6 { padding-left: 6em; } form option.depth-7 { padding-left: 7em; } form option.depth-8 { padding-left: 8em; } /* some options are less interesting than others; like None, or * Disabled, or Default; so mark them dull */ form option.na { font-style: italic; color: #aaa; } /* TODO: wtf is this? */ form .no-data { display: inline-block; background: #f8f8ff; text-align: center; padding: 2em; color: #aaa; } form .no-data a.add { display: block; padding-top: 0.625em; font-size: 80%; } /* each field is wrapped in a div.field, which bundles together * everything related to it. in order: * * 1. text label * 2. list of errors * 3. the field itself * 4. help text */ form div.field { margin-top: 1em; } form div.field label { margin-bottom: 0.5em; display: block; color: #000; } /* for fields that need a longer description, help text can be * added below. similar to django's models.Model.help_text */ form div.field p.help { max-width: 30em; font-size: 80%; color: #aaa; margin-top: 0; padding-top: 2px; margin-left: 0.625em; padding-left: 0.3125em; border-left: 0.625em solid #f8f8f8; } /* highlight examples (usually examples of text that should * be sent over SMS, but could be anything) in help text */ form div.field p.help span.example { font-family: monospace; background: #f8f8f8; color: #888; } form div.field.error { } form div.field.error label { font-weight: bold; color: #f00; } form div.field.error ul.errors { margin: 0 0 0.5em 0; padding: 0; } form div.field.error ul.errors li { background: #fff8f8 url("../icons/silk/exclamation.png") no-repeat 5px 50%; padding: 0.25em 5px 0.25em 25px; border: 1px solid #fdd; margin-top: 0.25em; min-height: 16px; line-height: 1.4; display: block; color: #f44; } /* wrap submission and/or action buttons separately */ form div.submit { background: #f8f8f8 url("../images/table-footer-bg.png") repeat-x 0 0; border-top: 1px solid #eee; margin: 1em -1em 0 -1em; padding: 1em; } /* if the browser supports after (+) and :first-child... * * 1. do a bit of extra work to replace the usual `1em margin-top` of * the first div.field with padding-top on the form itself, to remove * the 1px border between the module h2 and the form * * 2. add some fancy rounded corners to the bottom of the form, and do * some margin jiggery-pokery to ensure that the div.submit doesn't * overlap and cause jagged edges. */ body:last-child h2 + form { border-top: 0; padding: 0; background-color: #f8f8f8; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } h2 + form div.field:first-child { margin-top: 0; } body:last-child form > div:first-child { background-color: #fff; padding: 1em; } body:last-child form div.submit { background-color: transparent; margin: 0; }