641 lines
15 KiB
CSS
641 lines
15 KiB
CSS
/* -------------------------------------------------------------------------------------------------
|
|
|
|
Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs.
|
|
This will allow you to update formtastic.css with new releases without clobbering your own changes.
|
|
|
|
For example, to make the inline hint paragraphs a little darker in color than the standard #666:
|
|
|
|
form.formtastic fieldset ol li p.inline-hints { color:#333; }
|
|
|
|
--------------------------------------------------------------------------------------------------*/
|
|
|
|
form.formtastic legend {
|
|
margin: 0;
|
|
float: left;
|
|
white-space: normal;
|
|
position: relative;
|
|
}
|
|
|
|
form.formtastic legend span {
|
|
display: block;
|
|
width: 900px;
|
|
height: 26px;
|
|
background: transparent url(/images/admin/form/header.png) no-repeat 0 0px;
|
|
color: #1e1f26;
|
|
font-size: 0.7em;
|
|
padding: 4px 0 0 20px;
|
|
text-shadow: #fff 0px 1px;
|
|
}
|
|
|
|
form.formtastic legend span small {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 20px;
|
|
color: #787a89;
|
|
font-size: 0.8em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* ___ enabling fold/unfold ___ */
|
|
|
|
form.formtastic fieldset.foldable legend span { cursor: pointer; }
|
|
|
|
form.formtastic fieldset.foldable legend span em {
|
|
display: inline-block;
|
|
width: 9px;
|
|
height: 6px;
|
|
position: relative;
|
|
top: 8px;
|
|
left: 10px;
|
|
background: transparent url(/images/admin/form/folded-arrow-on.png) no-repeat 0 0px;
|
|
}
|
|
|
|
form.formtastic fieldset.foldable.folded legend span { background-image: url(/images/admin/form/folded.png); }
|
|
form.formtastic fieldset.foldable.folded legend span em {
|
|
width: 6px;
|
|
height: 9px;
|
|
top: 6px;
|
|
background-image: url(/images/admin/form/folded-arrow-off.png);
|
|
}
|
|
|
|
form.formtastic fieldset.foldable ol {
|
|
clear: both;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
form.formtastic fieldset.foldable.folded ol { display: none; }
|
|
|
|
/* ___ inputs ___ */
|
|
|
|
form.formtastic fieldset.inputs { min-height: 30px; width: 100%; margin-bottom: 20px; }
|
|
|
|
form.formtastic fieldset.inputs ol {
|
|
clear: both;
|
|
margin: 30px 0 0 0;
|
|
padding-top: 15px;
|
|
padding-bottom: 5px;
|
|
background: #ebedf4 url(/images/admin/form/footer.png) no-repeat 0 bottom;
|
|
border-top: 1px solid #ccced7;
|
|
}
|
|
|
|
form.formtastic fieldset ol li { width: 100%; position: relative; margin-bottom: 0.8em; }
|
|
|
|
form.formtastic fieldset.inputs ol li {
|
|
background: url("/images/admin/form/input-sep.png") repeat-x 0 bottom;
|
|
margin-bottom: 0.7em;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
form.formtastic fieldset.inputs ol li.last { background: none; margin-bottom: 0.8em; padding-bottom: 0px; }
|
|
|
|
form.formtastic fieldset ol li label { text-align: left; padding: 0.4em 2em 0 20px; font-size: 0.8em; width: 15%; color: #585a69; text-shadow: #fff 0px 1px; }
|
|
|
|
form.formtastic fieldset ol li.string input,
|
|
form.formtastic fieldset ol li.password input,
|
|
form.formtastic fieldset ol li.numeric input,
|
|
form.formtastic fieldset ol li.text textarea,
|
|
form.formtastic fieldset ol li code textarea,
|
|
form.formtastic fieldset ol li input[type=password] {
|
|
padding: 4px 5px;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
width: 700px;
|
|
color: #17171b;
|
|
background: white url(/images/admin/form/field.png) repeat-x 0 0;
|
|
border: 1px solid #d1d6e6;
|
|
-webkit-box-shadow: #f1f1f1 0px 1px;
|
|
-moz-box-shadow: #f1f1f1 0px 1px;
|
|
box-shadow: #f1f1f1 0px 1px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.string.highlighted input {
|
|
font-size: 1.1em;
|
|
width: 696px;
|
|
padding: 6px 7px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.text textarea.html {
|
|
height: 300px;
|
|
width: 46%;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.date input {
|
|
width: 80px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li p.inline-hints { margin-left: 20%; }
|
|
form.formtastic fieldset ol li p.inline-hints a { color: #1f82bc; }
|
|
|
|
form.formtastic fieldset ol li code { display: block; border: 1px solid #d1d6e6; margin: 10px 20px 0 20px; }
|
|
form.formtastic fieldset ol li code.nude textarea {
|
|
width: 870px;
|
|
border: 0px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li select { font-size: 0.9em; position: relative; top: 2px; color: #787a89; }
|
|
|
|
form.formtastic fieldset ol li.multiple select { width: 45%; }
|
|
|
|
form.formtastic fieldset ol li div.inline-errors {
|
|
background: transparent url(/images/admin/form/error-arrow.png) no-repeat 17px 0;
|
|
margin: 2px 0 0 20%;
|
|
padding: 8px 0 0 0;
|
|
}
|
|
|
|
form.formtastic fieldset ol li div.inline-errors p {
|
|
display: inline-block;
|
|
width: auto;
|
|
margin: 0px;
|
|
padding: 3px 12px 4px 30px;
|
|
color: #fff !important;
|
|
text-shadow: #000 0px 1px;
|
|
font-size: 0.9em;
|
|
padding-left: 30px;
|
|
background: #cd0f19 url(/images/admin/form/icons/error.png) no-repeat 10px 6px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.code label { display: none; }
|
|
|
|
form.formtastic fieldset ol li.code div.inline-errors {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.small-code code { margin: 0px; display: inline-block; width: 75%; }
|
|
|
|
form.formtastic fieldset ol .more { text-align: right; width: auto; margin: 10px 20px 0 0; line-height: 0.6em; }
|
|
form.formtastic fieldset ol .more a { text-decoration: none; color: #787A89; font-size: 0.7em; }
|
|
form.formtastic fieldset ol .more a:hover { text-decoration: underline; }
|
|
|
|
form.formtastic fieldset ol .more a.picture {
|
|
padding-left: 23px;
|
|
background: transparent url(/images/admin/icons/asset_add.png) no-repeat left 1px;
|
|
}
|
|
|
|
/* ___ pages ___ */
|
|
|
|
form.formtastic fieldset ol li.path em {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.path input {
|
|
background: transparent;
|
|
padding: 4px 4px 2px 4px;
|
|
border: none;
|
|
color: #787a89;
|
|
border-bottom: 1px solid #b5b7c4;
|
|
width: 30%;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.path.error input {
|
|
border: none !important;
|
|
border-bottom: 2px solid #ff092c !important;
|
|
}
|
|
|
|
/* ___ sites ___ */
|
|
|
|
form.formtastic fieldset ol li.item {
|
|
position: relative;
|
|
background: transparent url(/images/admin/form/item.png) no-repeat 0 0;
|
|
height: 25px;
|
|
width: 861px;
|
|
margin: 0px 0px 10px 20px;
|
|
padding: 3px 10px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.item strong {
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
color: #17171d;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.item strong a {
|
|
color: #17171d;
|
|
text-decoration: none;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.item strong a:hover { text-decoration: underline; }
|
|
|
|
form.formtastic fieldset ol li.item em {
|
|
margin-left: 10px;
|
|
font-size: 0.7em;
|
|
color: #757575;
|
|
}
|
|
|
|
form.formtastic fieldset ol li em.editable {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -1px;
|
|
color: #8b8d9a;
|
|
font-size: 0.9em;
|
|
font-style: italic;
|
|
margin-left: 3px;
|
|
border: 1px solid transparent;
|
|
padding: 2px 5px;
|
|
height: 18px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li em.editable:hover {
|
|
background: #fffbe5;
|
|
border: 1px dotted #efe4a5;
|
|
cursor: pointer;
|
|
color: #17171D;
|
|
font-weight: bold;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.item span.actions {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 10px;
|
|
width: 50px;
|
|
height: 16px;
|
|
text-align:right;
|
|
}
|
|
|
|
/* ___ editable-list (content type fields and validations) ___ */
|
|
|
|
form.formtastic fieldset.editable-list ol { padding-left: 20px; padding-right: 20px; width: 880px; }
|
|
|
|
form.formtastic fieldset.editable-list ol li { margin-left: 0px !important; }
|
|
|
|
form.formtastic fieldset.editable-list ol li span.handle {
|
|
cursor: move;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added span.actions a.remove {
|
|
display: inline;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added span.actions button {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added select {
|
|
display: none;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added select,
|
|
form.formtastic fieldset.editable-list ol li.added em {
|
|
width: 150px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added input {
|
|
position: relative;
|
|
top: -1px;
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
padding: 1px 5px 2px 5px;
|
|
color: #17171D;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added input.domain {
|
|
width: 250px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added input:hover {
|
|
background: #fffbe5;
|
|
border: 1px dotted #efe4a5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added input:focus {
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
color: #787a89;
|
|
background: white url(/images/admin/form/field.png) repeat-x 0 0;
|
|
border: 1px solid #d1d6e6;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.added .inline-errors {
|
|
position: relative;
|
|
top: -1px;
|
|
padding: 2px 3px;
|
|
background: #FFE5E5;
|
|
color: #CE2525;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template {
|
|
height: 42px;
|
|
background-image: url(/images/admin/form/big_item.png);
|
|
padding-top: 10px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template em {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template input[type=text] {
|
|
display: inline;
|
|
margin-left: 10px;
|
|
padding: 4px;
|
|
font-size: 0.9em;
|
|
width: 180px;
|
|
color: #787a89;
|
|
background: white url(/images/admin/form/field.png) repeat-x 0 0;
|
|
border: 1px solid #a6a8b8;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template select {
|
|
display: inline;
|
|
top: -1px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.handle {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.actions {
|
|
width: auto;
|
|
top: 10px;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.actions a.edit {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.actions a.remove {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.actions button {
|
|
display: inline;
|
|
}
|
|
|
|
form.formtastic fieldset.editable-list ol li.template span.actions button span {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* ___ custom fields: inherits from editable-list ___ */
|
|
|
|
form.formtastic fieldset.fields input[type=checkbox] {
|
|
margin: 0 0 0 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
form.formtastic fieldset.fields label {
|
|
display: inline;
|
|
float: none;
|
|
padding: 0px;
|
|
font-weight: normal;
|
|
color: #8B8D9A;
|
|
}
|
|
|
|
form.formtastic fieldset.fields li.required label {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ___ editable-list (content type validations) ___ */
|
|
|
|
form.formtastic fieldset.validations ol li.added em.key {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -1px;
|
|
padding: 1px 5px 2px 5px;
|
|
color: #17171D;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
font-style: normal;
|
|
margin-left: 5px;
|
|
width: 180px;
|
|
}
|
|
|
|
/* ___ content instance / editable elements___ */
|
|
|
|
form.formtastic fieldset ol li.file p.remove {
|
|
margin: 5px 0 0 20%;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.file p.remove a {
|
|
text-decoration: none;
|
|
color: #333;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.file p.remove a:hover { text-decoration: underline; }
|
|
|
|
form.formtastic fieldset ol li.has-many p {
|
|
font-style: italic;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul {
|
|
width: 736px;
|
|
margin-left: 20%;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.item {
|
|
background: transparent url(/images/admin/form/item-popup.png) no-repeat 0 0;
|
|
width: 413px;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.item strong {
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
color: #17171d;
|
|
position: relative;
|
|
top: -1px;
|
|
left: 10px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.item span.handle {
|
|
cursor: move;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.added span.actions a.remove {
|
|
display: inline;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.added span.actions button {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.sep {
|
|
border-top: 1px solid #ccc;
|
|
height: 2px;
|
|
padding: 0px;
|
|
margin: 5px 0 7px;
|
|
width: 433px;
|
|
background: none;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template {}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template select {
|
|
display: inline;
|
|
top: -1px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template span.handle {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template span.actions {
|
|
width: auto;
|
|
top: 0px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template span.actions a.remove {
|
|
display: none;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template span.actions button {
|
|
display: inline;
|
|
position: relative;
|
|
top: 1px;
|
|
right: 3px;
|
|
}
|
|
|
|
form.formtastic fieldset ol li.has-many ul li.template span.actions button span {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
|
|
|
|
/* ___ my account ___ */
|
|
|
|
form.formtastic fieldset.language li.full span {
|
|
margin: 0 20px;
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
form.formtastic fieldset.language li.full span img {
|
|
position: relative;
|
|
top: 6px;
|
|
}
|
|
|
|
form.formtastic fieldset.language li.full span input {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/* ___ membership ___ */
|
|
|
|
form.formtastic fieldset.email li.full input {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
form.formtastic fieldset.memberships ol li .role {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 30px;
|
|
width: 170px;
|
|
text-align: left;
|
|
}
|
|
|
|
form.formtastic fieldset.memberships ol li .role em {
|
|
display: inline-block;
|
|
position: relative;
|
|
top: -1px;
|
|
color: #757575;
|
|
font-size: 0.8em;
|
|
padding: 2px 5px 2px 17px;
|
|
height: 18px;
|
|
line-height: 16px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
form.formtastic fieldset.memberships ol li .role em.locked {
|
|
background: transparent url(/images/admin/icons/membership_lock.png) no-repeat 1px 3px;
|
|
}
|
|
|
|
form.formtastic fieldset.memberships ol li .role em.editable {
|
|
background: transparent url(/images/admin/icons/membership_edit.png) no-repeat left 3px;
|
|
}
|
|
|
|
form.formtastic fieldset.memberships ol li .role em.editable { font-style: normal; font-size: 0.8em; }
|
|
form.formtastic fieldset.memberships ol li .role em.editable:hover { color: #000; font-style: normal; background: #fffbe5; padding-left: 5px; }
|
|
|
|
form.formtastic fieldset.memberships ol li select {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
/* ___ theme assets ___ */
|
|
|
|
.selector {
|
|
position: relative;
|
|
}
|
|
|
|
.selector span.alt {
|
|
position: absolute;
|
|
top: 7px;
|
|
right: 20px;
|
|
color: #787a89;
|
|
font-size: 0.7em;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
padding-left: 20px;
|
|
background: transparent url(/images/admin/icons/asset_switch.png) no-repeat left 2px;
|
|
}
|
|
|
|
.selector span.alt:hover { text-decoration: underline; }
|
|
|
|
|
|
form.formtastic fieldset.file li.full input {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
form.formtastic fieldset.file li.full p.inline-errors { display: block !important; }
|
|
|
|
|
|
form.formtastic fieldset.preview { position: relative; }
|
|
|
|
form.formtastic fieldset.preview li { text-align: center; position: static; }
|
|
|
|
form.formtastic fieldset.preview li .image {
|
|
width: 870px;
|
|
margin: 10px 20px 0px 20px;
|
|
border: 4px solid white;
|
|
background: transparent url(/images/admin/list/empty.png) repeat 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
form.formtastic fieldset.preview li .inside {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
}
|
|
|
|
form.formtastic fieldset.preview li img { }
|
|
|
|
|
|
/* ___ main error message ___ */
|
|
|
|
div.form-errors p {
|
|
background: #FFE5E5;
|
|
color: #CE2525;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
margin: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
div.formError {
|
|
position: relative;
|
|
top: -2px;
|
|
display: inline;
|
|
background: #CE2525 url(/images/admin/left_arrow_red.png) no-repeat 0px center;
|
|
color: white;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
padding: 3px 10px 3px 20px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
div.fieldWithErrors { display: inline; }
|
|
|