147 lines
4.2 KiB
CSS
Executable File
147 lines
4.2 KiB
CSS
Executable File
/* 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;
|
|
}
|