kpsul/static/grappelli_old/css/forms.css

1243 lines
36 KiB
CSS
Raw Normal View History

/* Basic Settings, Fieldsets, Form-Rows
------------------------------------------------------------------------------------------------------ */
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
}
.row p.help {
margin: 3px 0 2px 0;
padding: 0;
}
.row.cells p.help {
max-width: 278px;
white-space: normal !important;
}
.row ul.radio-list + p.help,
.row ul.checkbox-list + p.help {
margin-top: -3px;
}
/* Errors
------------------------------------------------------------------------------------------------------ */
.errornote {
margin-bottom: 7px;
padding: 8px 10px;
font-size: 12px;
font-weight: bold;
}
/* little fix to accomodate the top aligned login form .. */
.errornote.login-errors {
margin-bottom: 0 !important;
padding: 8px 12px;
}
ul.errorlist {
margin: 6px 0 -3px;
font-size: 11px;
line-height: 13px;
font-weight: bold;
}
ul.errorlist li {
padding: 0 5px 0 0;
}
p.errornote + ul.errorlist {
margin-bottom: 8px;
}
ul.errorlist:empty {
display: none;
margin: 0;
}
.group.tabular ul.errorlist {
margin-left: 11px;
}
.group.stacked ul.errorlist {
margin-left: 11px;
margin-bottom: 5px;
}
.group.stacked h3 + * + ul.errorlist {
margin: 0 !important;
padding: 5px 11px;
}
.cell ul.errorlist {
padding-left: 0;
}
.cell ul.errorlist li {
padding-left: 0;
}
.cell label + * + ul.errorlist,
.cell label + * + * + ul.errorlist {
padding-left: 160px !important;
}
table ul.errorlist {
margin: -9px 0 6px;
}
.group.stacked .row ul.errorlist,
.module.table ul.errorlist {
margin-top: 5px;
margin-left: 0;
margin-bottom: -3px;
}
ul.radiolist.inline + ul.errorlist,
ul.radiolist.inline + * + ul.errorlist {
position: relative; clear: both;
}
ul.radiolist + ul.errorlist,
ul.radiolist + * + ul.errorlist {
margin-top: 0 !important;
}
.module.table .tbody>ul.errorlist {
margin-top: 2px;
margin-left: 11px;
margin-bottom: 2px;
}
.module.table .tr ul.errorlist {
margin-left: 0;
}
.module.table ul.radiolist + ul.errorlist,
.module.table ul.radiolist + * + ul.errorlist {
margin: -2px 0 0;
}
table ul.errorlist li,
.module.table ul.errorlist li {
padding-left: 0;
}
p.errornote + ul.errorlist li {
padding-left: 10px;
}
/* Labels & Other Typographic Elements in Forms
------------------------------------------------------------------------------------------------------ */
label {
margin: 5px 0 -5px;
font-size: 11px;
line-height: 15px;
cursor: pointer;
}
.required label, label.required,
.row .required label, .row label.required {
font-weight: bold;
}
.module label {
display: block;
padding: 0 0 6px;
white-space: normal;
}
.module .vCheckboxLabel {
display: inline;
float: none;
clear: both;
margin: 0 0 0 10px;
padding: 0;
}
/* Form Elements
------------------------------------------------------------------------------------------------------ */
input, textarea, select, button {
margin: 0;
vertical-align: top;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
/* Text, Password ................................................... */
input[type=text], input[type=password] {
padding: 5px 5px 4px;
height: 25px;
}
/* Webkit browser hack: apply same horizontal padding as in moz browsers
Moz Browsers have a default horizontal padding of 3px in input[type=submit] */
@media screen and (-webkit-min-device-pixel-ratio:0) {
input[type=text], input[type=password] {
line-height: 13px !important;
}
}
/* Searchbar ................................................... */
form#changelist-search {
position: relative;
float: left;
clear: both;
}
input#searchbar {
position: relative;
float: left;
padding-left: 8px;
padding-right: 30px;
width: 218px;
height: 26px;
font-size: 11px;
}
/* FileBrowseField ................................................... */
input.vFileBrowseField {
padding-right: 25px;
}
/* File ................................................... */
input[type=file] {
position: relative;
top: 1px;
height: auto;
border: 0;
}
.th input[type=file],
.td input[type=file] {
top: 3px;
margin-bottom: -2px;
}
.module p.file-upload {
margin-bottom: 5px !important;
padding: 3px 0 0 !important;
font-size: 11px;
line-height: 20px;
/* font-size: 0;*/
/* color: transparent;*/
}
.file-upload a {
font-size: 12px;
font-weight: bold;
}
.file-upload br {
display: none;
}
.file-upload .clearable-file-input {
display: block;
margin: 0 0 5px;
padding: 0;
min-width: 320px;
}
.file-upload .clearable-file-input label {
display: inline-block;
float: none;
margin-bottom: -2px;
position: relative;
top: 0;
}
.file-upload .clearable-file-input input {
top: 5px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.file-upload .clearable-file-input input {
top: 7px !important;
}
}
.file-upload input[type=file] {
position: relative;
top: 1px;
height: auto;
border: 0;
}
/* Date & Time ................................................... */
.vDateField, .vTimeField {
margin-left: 0;
}
p.datetime {
margin-bottom: 0 !important;
padding: 0;
}
p.datetime input.vTimeField {
margin-left: 13px;
}
/* Textarea ................................................... */
textarea {
vertical-align: top;
padding: 3px 5px;
}
fieldset.monospace textarea {
font-family: "Bitstream Vera Sans Mono",Monaco,"Courier New",Courier,monospace;
}
/* Select ................................................... */
select {
padding: 4px 3px 4px 3px;
height: 25px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select {
padding: 4px 28px 4px 8px;
-webkit-appearance: textfield;
background: #fff url('../img/icons/icon-form-select.png') 100% 50% no-repeat;
}
}
select[multiple=multiple] {
padding-right: 5px;
height: 160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select[multiple=multiple] {
background-image: none;
}
}
/* Checkbox, Radio ................................................... */
input[type=checkbox], input[type=radio] {
position: relative;
margin: 0;
}
.row input[type=checkbox], .row input[type=radio] {
margin-left: 0;
margin-right: 5px;
}
.th>input[type=radio],
.th>input[type=checkbox],
.td>input[type=radio],
.td>input[type=checkbox] {
top: 5px;
margin-bottom: -3px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.th>input[type=radio],
.td>input[type=radio] {
top: 6px;
margin-bottom: -2px;
}
.th>input[type=checkbox],
.td>input[type=checkbox] {
top: 7px;
margin-bottom: -2px;
}
}
.row input[type=radio],
.th ul.radiolist input[type=radio],
.td ul.radiolist input[type=radio] {
top: 0;
}
.row input[type=checkbox],
.th ul.checkboxlist input[type=checkbox],
.td ul.checkboxlist input[type=checkbox] {
top: 2px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.row input[type=radio],
.th ul.radiolist input[type=radio],
.td ul.radiolist input[type=radio] {
top: 1px;
}
.row input[type=checkbox],
.th ul.checkboxlist input[type=checkbox],
.td ul.checkboxlist input[type=checkbox] {
top: 3px;
}
}
.th input[type=radio],
.th input[type=checkbox],
.td input[type=radio],
.td input[type=checkbox],
ul.radiolist input[type=radio],
ul.checkboxlist input[type=checkbox] {
margin-left: 0;
margin-right: 5px;
}
.row input[type=checkbox] + label {
position: relative;
float: none;
top: 0;
display: inline-block;
margin-bottom: -2px;
}
.row ul.checkboxlist input[type=checkbox] {
top: 0;
margin: 0 5px 0 0;
}
.row ul.checkboxlist label input[type=checkbox] {
top: -2px;
vertical-align: middle;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.row ul.checkboxlist label input[type=checkbox] {
top: -1px;
vertical-align: middle;
}
}
.row label + input + p.help input[type=checkbox] {
position: relative;
top: -2px;
margin: 0 3px 0 0;
}
ul.tools .delete-handler-container input[type=checkbox],
ul.tools .remove-handler-container input[type=checkbox] {
display: none !important;
}
/* Radiolists & Checkboxlists ................................................... */
ul.radiolist, ul.checkboxlist {
position: relative;
float: none;
display: inline-block;
margin: 5px 0;
padding: 0;
font-size: 11px;
line-height: 15px;
font-weight: normal;
}
.row>ul.radiolist, .row>ul.checkboxlist {
margin: 0;
}
ul.radiolist li + li, ul.checkboxlist li + li {
margin-top: 2px;
}
ul.radiolist.inline, ul.checkboxlist.inline {
float: left;
display: inline;
margin-top: 5px;
margin-bottom: 3px;
padding-right: 20px;
}
th ul.radiolist.inline, th ul.checkboxlist.inline,
td ul.radiolist.inline, td ul.checkboxlist.inline {
margin-top: 0;
}
ul.radiolist.inline li, ul.checkboxlist.inline li {
float: left;
display: inline;
margin-top: 0 !important;
margin-bottom: 2px;
padding-right: 20px;
}
.module.tbody ul.radiolist.inline, .module.tbody ul.checkboxlist.inline {
display: inline;
white-space: normal;
}
.module.tbody ul.radiolist.inline li, .module.tbody ul.checkboxlist.inline li {
position: relative;
float: left;
display: inline;
}
.row.cells ul.radiolist.inline li, .row.cells ul.checkboxlist.inline li {
float: none;
}
ul.radiolist label, ul.checkboxlist label {
float: none;
display: inline-block;
margin: 0;
padding: 0;
width: auto !important;
white-space: nowrap;
}
/* Changelist Form Fields ................................................... */
#changelist table input[type=text],
#changelist table input[type=password],
#changelist table input[type=file],
#changelist table select,
#changelist table textarea {
position: relative;
top: -5px;
margin-bottom: -9px;
vertical-align: top;
}
#changelist table input[type=file] {
top: -3px;
margin-bottom: -7px;
}
#changelist table input[type=radio],
#changelist table input[type=checkbox] {
position: relative;
top: 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#changelist table input[type=radio],
#changelist table input[type=checkbox] {
top: 1px;
}
}
#changelist table thead input[type=radio],
#changelist table thead input[type=checkbox] {
top: 0;
}
/* Form Fields in Grid
------------------------------------------------------------------------------------------------------ */
input[class*="span"], select[class*="span"], textarea[class*="span"] {
margin-right: 0;
}
.span-24 input[type=text], .span-24 input[type=password],
.span-24 select, .span-24 textarea,
input[type=text].span-24, input[type=password].span-24,
select.span-24, textarea.span-24,
.span-24 .ui-gFacelist-message,
.span-24 .ui-gFacelist-facelist,
.span-24 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-24 {
width: 918px;
}
.span-24 div.autocomplete-wrapper-m2m ul.repr,
.span-24 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-24 ul.repr,
div.autocomplete-wrapper-m2m.span-24 ul.repr li {
max-width: 860px;
}
.span-23 input[type=text], .span-23 input[type=password],
.span-23 select, .span-23 textarea,
input[type=text].span-23, input[type=password].span-23,
select.span-23, textarea.span-23,
.span-23 .ui-gFacelist-message,
.span-23 .ui-gFacelist-facelist,
.span-23 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-23 {
width: 878px;
}
.span-23 div.autocomplete-wrapper-m2m ul.repr,
.span-23 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-23 ul.repr,
div.autocomplete-wrapper-m2m.span-23 ul.repr li {
max-width: 820px;
}
.span-22 input[type=text], .span-22 input[type=password],
.span-22 select, .span-22 textarea,
input[type=text].span-22, input[type=password].span-22,
select.span-22, textarea.span-22,
.span-22 .ui-gFacelist-message,
.span-22 .ui-gFacelist-facelist,
.span-22 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-22 {
width: 838px;
}
.span-22 div.autocomplete-wrapper-m2m ul.repr,
.span-22 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-22 ul.repr,
div.autocomplete-wrapper-m2m.span-22 ul.repr li {
max-width: 780px;
}
.span-21 input[type=text], .span-21 input[type=password],
.span-21 select, .span-21 textarea,
input[type=text].span-21, input[type=password].span-21,
select.span-21, textarea.span-21,
.span-21 .ui-gFacelist-message,
.span-21 .ui-gFacelist-facelist,
.span-21 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-21 {
width: 798px;
}
.span-21 div.autocomplete-wrapper-m2m ul.repr,
.span-21 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-21 ul.repr,
div.autocomplete-wrapper-m2m.span-21 ul.repr li {
max-width: 740px;
}
.span-20 input[type=text], .span-20 input[type=password],
.span-20 select, .span-20 textarea,
input[type=text].span-20, input[type=password].span-20,
select.span-20, textarea.span-20,
.span-20 .ui-gFacelist-message,
.span-20 .ui-gFacelist-facelist,
.span-20 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-20,
.span-24 label + input[type=text], .span-24 label + input[type=password],
.span-24 label + select, .span-24 label + textarea {
width: 758px;
}
.span-20 div.autocomplete-wrapper-m2m ul.repr,
.span-20 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-20 ul.repr,
div.autocomplete-wrapper-m2m.span-20 ul.repr li {
max-width: 700px;
}
.span-19 input[type=text], .span-19 input[type=password],
.span-19 select, .span-19 textarea,
input[type=text].span-19, input[type=password].span-19,
select.span-19, textarea.span-19,
.span-19 .ui-gFacelist-message,
.span-19 .ui-gFacelist-facelist,
.span-19 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-19,
.span-23 label + input[type=text], .span-23 label + input[type=password],
.span-23 label + select, .span-23 label + textarea {
width: 718px;
}
.span-19 div.autocomplete-wrapper-m2m ul.repr,
.span-19 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-19 ul.repr,
div.autocomplete-wrapper-m2m.span-19 ul.repr li {
max-width: 660px;
}
.span-18 input[type=text], .span-18 input[type=password],
.span-18 select, .span-18 textarea,
input[type=text].span-18, input[type=password].span-18,
select.span-18, textarea.span-18,
.span-18 .ui-gFacelist-message,
.span-18 .ui-gFacelist-facelist,
.span-18 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-18,
.span-22 label + input[type=text], .span-22 label + input[type=password],
.span-22 label + select, .span-22 label + textarea {
width: 678px;
}
.span-18 div.autocomplete-wrapper-m2m ul.repr,
.span-18 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-18 ul.repr,
div.autocomplete-wrapper-m2m.span-18 ul.repr li {
max-width: 620px;
}
.span-17 input[type=text], .span-17 input[type=password],
.span-17 select, .span-17 textarea,
input[type=text].span-17, input[type=password].span-17,
select.span-17, textarea.span-17,
.span-17 .ui-gFacelist-message,
.span-17 .ui-gFacelist-facelist,
.span-17 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-17,
.span-21 label + input[type=text], .span-21 label + input[type=password],
.span-1 label + select, .span-21 label + textarea {
width: 638px;
}
.span-17 div.autocomplete-wrapper-m2m ul.repr,
.span-17 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-17 ul.repr,
div.autocomplete-wrapper-m2m.span-17 ul.repr li {
max-width: 580px;
}
.span-16 input[type=text], .span-16 input[type=password],
.span-16 select, .span-16 textarea,
input[type=text].span-16, input[type=password].span-16,
select.span-16, textarea.span-16,
.span-16 .ui-gFacelist-message,
.span-16 .ui-gFacelist-facelist,
.span-24 input.vForeignKeyRawIdAdminField,
.span-24 input.vManyToManyRawIdAdminField,
.span-16 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-16,
.span-20 label + input[type=text], .span-20 label + input[type=password],
.span-20 label + select, .span-20 label + textarea {
width: 598px;
}
.span-16 div.autocomplete-wrapper-m2m ul.repr,
.span-16 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-16 ul.repr,
div.autocomplete-wrapper-m2m.span-16 ul.repr li {
max-width: 540px;
}
.span-15 input[type=text], .span-15 input[type=password],
.span-15 select, .span-15 textarea,
input[type=text].span-15, input[type=password].span-15,
select.span-15, textarea.span-15,
.span-15 .ui-gFacelist-message,
.span-15 .ui-gFacelist-facelist,
.span-23 input.vForeignKeyRawIdAdminField,
.span-23 input.vManyToManyRawIdAdminField,
.span-15 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-15,
.span-19 label + input[type=text], .span-19 label + input[type=password],
.span-19 label + select, .span-19 label + textarea {
width: 558px;
}
.span-15 div.autocomplete-wrapper-m2m ul.repr,
.span-15 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-15 ul.repr,
div.autocomplete-wrapper-m2m.span-15 ul.repr li {
max-width: 500px;
}
.span-14 input[type=text], .span-14 input[type=password],
.span-14 select, .span-14 textarea,
input[type=text].span-14, input[type=password].span-14,
select.span-14, textarea.span-14,
.span-14 .ui-gFacelist-message,
.span-14 .ui-gFacelist-facelist,
.span-22 input.vForeignKeyRawIdAdminField,
.span-22 input.vManyToManyRawIdAdminField,
.span-14 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-14,
.span-18 label + input[type=text], .span-18 label + input[type=password],
.span-18 label + select, .span-18 label + textarea {
width: 518px;
}
.span-14 div.autocomplete-wrapper-m2m ul.repr,
.span-14 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-14 ul.repr,
div.autocomplete-wrapper-m2m.span-14 ul.repr li {
max-width: 460px;
}
.span-13 input[type=text], .span-13 input[type=password],
.span-13 select, .span-13 textarea,
input[type=text].span-13, input[type=password].span-13,
select.span-13, textarea.span-13,
.span-13 .ui-gFacelist-message,
.span-13 .ui-gFacelist-facelist,
.span-21 input.vForeignKeyRawIdAdminField,
.span-21 input.vManyToManyRawIdAdminField,
.span-13 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-13,
.span-17 label + input[type=text], .span-17 label + input[type=password],
.span-17 label + select, .span-17 label + textarea {
width: 478px;
}
.span-13 div.autocomplete-wrapper-m2m ul.repr,
.span-13 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-13 ul.repr,
div.autocomplete-wrapper-m2m.span-13 ul.repr li {
max-width: 420px;
}
.span-12 input[type=text], .span-12 input[type=password],
.span-12 select, .span-12 textarea,
input[type=text].span-12, input[type=password].span-12,
select.span-12, textarea.span-12,
.span-12 .ui-gFacelist-message,
.span-12 .ui-gFacelist-facelist,
.span-20 input.vForeignKeyRawIdAdminField,
.span-20 input.vManyToManyRawIdAdminField,
.span-12 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-12,
.span-16 label + input[type=text], .span-16 label + input[type=password],
.span-16 label + select, .span-16 label + textarea {
width: 438px;
}
.span-12 div.autocomplete-wrapper-m2m ul.repr,
.span-12 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-12 ul.repr,
div.autocomplete-wrapper-m2m.span-12 ul.repr li {
max-width: 380px;
}
.span-11 input[type=text], .span-11 input[type=password],
.span-11 select, .span-11 textarea,
input[type=text].span-11, input[type=password].span-11,
select.span-11, textarea.span-11,
.span-11 .ui-gFacelist-message,
.span-11 .ui-gFacelist-facelist,
.span-19 input.vForeignKeyRawIdAdminField,
.span-19 input.vManyToManyRawIdAdminField,
.span-11 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-11,
.span-15 label + input[type=text], .span-15 label + input[type=password],
.span-15 label + select, .span-15 label + textarea {
width: 398px;
}
.span-11 div.autocomplete-wrapper-m2m ul.repr,
.span-11 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-11 ul.repr,
div.autocomplete-wrapper-m2m.span-11 ul.repr li {
max-width: 340px;
}
.span-10 input[type=text], .span-10 input[type=password],
.span-10 select, .span-10 textarea,
input[type=text].span-10, input[type=password].span-10,
select.span-10, textarea.span-10,
.span-10 .ui-gFacelist-message,
.span-10 .ui-gFacelist-facelist,
.span-18 input.vForeignKeyRawIdAdminField,
.span-18 input.vManyToManyRawIdAdminField,
.span-10 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-10,
.span-14 label + input[type=text], .span-4 label + input[type=password],
.span-14 label + select, .span-14 label + textarea {
width: 358px;
}
.span-10 div.autocomplete-wrapper-m2m ul.repr,
.span-10 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-10 ul.repr,
div.autocomplete-wrapper-m2m.span-10 ul.repr li {
max-width: 300px;
}
.span-9 input[type=text], .span-9 input[type=password],
.span-9 select, .span-9 textarea,
input[type=text].span-9, input[type=password].span-9,
select.span-9, textarea.span-9,
.span-9 .ui-gFacelist-message,
.span-9 .ui-gFacelist-facelist,
.span-17 input.vForeignKeyRawIdAdminField,
.span-17 input.vManyToManyRawIdAdminField,
.span-9 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-9,
.span-13 label + input[type=text], .span-13 label + input[type=password],
.span-13 label + select, .span-13 label + textarea {
width: 318px;
}
.span-9 div.autocomplete-wrapper-m2m ul.repr,
.span-9 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-9 ul.repr,
div.autocomplete-wrapper-m2m.span-9 ul.repr li {
max-width: 260px;
}
.span-8 input[type=text], .span-8 input[type=password],
.span-8 select, .span-8 textarea,
input[type=text].span-8, input[type=password].span-8,
select.span-8, textarea.span-8,
.span-8 .ui-gFacelist-message,
.span-8 .ui-gFacelist-facelist,
.span-16 input.vForeignKeyRawIdAdminField,
.span-16 input.vManyToManyRawIdAdminField,
.span-8 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-8,
.span-12 label + input[type=text], .span-12 label + input[type=password],
.span-12 label + select, .span-12 label + textarea {
width: 278px;
}
.span-8 div.autocomplete-wrapper-m2m ul.repr,
.span-8 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-8 ul.repr,
div.autocomplete-wrapper-m2m.span-8 ul.repr li {
max-width: 220px;
}
.span-7 input[type=text], .span-7 input[type=password],
.span-7 select, .span-7 textarea,
input[type=text].span-7, input[type=password].span-7,
select.span-7, textarea.span-7,
.span-15 input.vForeignKeyRawIdAdminField,
.span-15 input.vManyToManyRawIdAdminField,
.span-7 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-7,
.span-11 label + input[type=text], .span-11 label + input[type=password],
.span-11 label + select, .span-11 label + textarea {
width: 238px;
}
.span-7 div.autocomplete-wrapper-m2m ul.repr,
.span-7 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-7 ul.repr,
div.autocomplete-wrapper-m2m.span-7 ul.repr li {
max-width: 180px;
}
.span-6 input[type=text], .span-6 input[type=password],
.span-6 select, .span-6 textarea,
input[type=text].span-6, input[type=password].span-6,
select.span-6, textarea.span-6,
.span-14 input.vForeignKeyRawIdAdminField,
.span-14 input.vManyToManyRawIdAdminField,
.span-6 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-6,
.span-10 label + input[type=text], .span-10 label + input[type=password],
.span-10 label + select, .span-10 label + textarea {
width: 198px;
}
.span-6 div.autocomplete-wrapper-m2m ul.repr,
.span-6 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-6 ul.repr,
div.autocomplete-wrapper-m2m.span-6 ul.repr li {
max-width: 140px;
}
.span-5 input[type=text], .span-5 input[type=password],
.span-5 select, .span-5 textarea,
input[type=text].span-5, input[type=password].span-5,
select.span-5, textarea.span-5,
.span-13 input.vForeignKeyRawIdAdminField,
.span-13 input.vManyToManyRawIdAdminField,
.span-5 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-5,
.span-9 label + input[type=text], .span-9 label + input[type=password],
.span-9 label + select, .span-9 label + textarea {
width: 158px;
}
.span-5 div.autocomplete-wrapper-m2m ul.repr,
.span-5 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-5 ul.repr,
div.autocomplete-wrapper-m2m.span-5 ul.repr li {
max-width: 100px;
}
.span-4 input[type=text], .span-4 input[type=password],
.span-4 select, .span-4 textarea,
input[type=text].span-4, input[type=password].span-4,
select.span-4, textarea.span-4,
.span-12 input.vForeignKeyRawIdAdminField,
.span-12 input.vManyToManyRawIdAdminField,
.span-4 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-4,
.span-8 label + input[type=text], .span-8 label + input[type=password],
.span-8 label + select, .span-8 label + textarea {
width: 118px;
}
.span-4 div.autocomplete-wrapper-m2m ul.repr,
.span-4 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-4 ul.repr,
div.autocomplete-wrapper-m2m.span-4 ul.repr li {
max-width: 60px;
}
.span-3 input[type=text], .span-3 input[type=password],
.span-3 select, .span-3 textarea,
input[type=text].span-3, input[type=password].span-3,
select.span-3, textarea.span-3,
.span-11 input.vForeignKeyRawIdAdminField,
.span-11 input.vManyToManyRawIdAdminField,
.span-3 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-3,
.span-7 label + input[type=text], .span-7 label + input[type=password],
.span-7 label + select, .span-7 label + textarea {
width: 78px;
}
.span-3 div.autocomplete-wrapper-m2m ul.repr,
.span-3 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-3 ul.repr,
div.autocomplete-wrapper-m2m.span-3 ul.repr li {
max-width: 20px;
}
.span-2 input[type=text], .span-2 input[type=password],
.span-2 select, .span-2 textarea,
input[type=text].span-2, input[type=password].span-2,
select.span-2, textarea.span-2,
.span-10 input.vForeignKeyRawIdAdminField,
.span-10 input.vManyToManyRawIdAdminField,
.span-2 div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-m2m.span-2,
.span-6 label + input[type=text], .span-6 label + input[type=password],
.span-6 label + select, .span-6 label + textarea {
width: 38px;
}
.span-2 div.autocomplete-wrapper-m2m ul.repr,
.span-2 div.autocomplete-wrapper-m2m ul.repr li,
div.autocomplete-wrapper-m2m.span-2 ul.repr,
div.autocomplete-wrapper-m2m.span-2 ul.repr li {
max-width: 30px;
}
.container-grid .span-flexible input[type=text], .container-grid .span-flexible input[type=password],
.container-grid .span-flexible textarea, .container-grid .span-flexible select {
width: 100% !important;
}
/* Form Elements: Basic Widths & Heights
------------------------------------------------------------------------------------------------------ */
input[type=text],
input[type=password],
.vDateField,
.vTimeField,
.vIntegerField,
.vPositiveSmallIntegerField,
.vManyToManyRawIdAdminField,
.vForeignKeyRawIdAdminField {
width: 118px;
}
input.vTextField,
input.vURLField,
input.vFileBrowseField,
textarea,
.vLargeTextField,
.vXMLLargeTextField {
width: 278px;
}
.row select {
min-width: 118px;
}
.vLargeTextField {
height: 118px;
}
/* Large Form Elements in Change-Form: Widths & Heights
------------------------------------------------------------------------------------------------------ */
.row .vTextField,
.row .vURLField,
.row .vFileBrowseField,
.row textarea,
.row .vLargeTextField,
.row .vXMLLargeTextField,
div.autocomplete-wrapper-m2m {
width: 758px;
}
.row select {
max-width: 758px;
}
div.autocomplete-wrapper-m2m ul.repr,
div.autocomplete-wrapper-m2m ul.repr li {
max-width: 700px;
}
/* Form Elements in Changelist-Results Table & Tabular Modules: Widths & Heights
------------------------------------------------------------------------------------------------------ */
.changelist-results table select,
.module.table select,
.module.table div.autocomplete-wrapper-m2m {
max-width: 278px;
}
.module.table div.autocomplete-wrapper-m2m {
width: 278px;
}
.module.table div.autocomplete-wrapper-m2m ul.repr,
.module.table div.autocomplete-wrapper-m2m ul.repr li {
max-width: 222px;
}
/* Form Elements Cells
------------------------------------------------------------------------------------------------------ */
.cell input[type=text],
.cell input[type=password],
.cell select,
.cell div.autocomplete-wrapper-m2m {
max-width: 280px;
}
.cell div.autocomplete-wrapper-m2m {
width: 280px;
}
.cell div.autocomplete-wrapper-m2m ul.repr,
.cell div.autocomplete-wrapper-m2m ul.repr li {
max-width: 222px;
}
/* Autocomplete Elements
------------------------------------------------------------------------------------------------------ */
/* Autocomplete Wrappers (Input and Input-Lookalike) ......................................... */
div.autocomplete-wrapper-m2m,
div.autocomplete-wrapper-fk input.ui-autocomplete-input {
padding-right: 55px;
color: #666;
border: 1px solid #ccc;
/* border-color: #ccc #ddd #ddd #ccc;*/
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
box-shadow: 0 1px 3px #eaeaea inset; -moz-box-shadow: 0 1px 3px #eaeaea inset; -webkit-box-shadow: 0 1px 3px #eaeaea inset;
/* background: #fff url('../img/backgrounds/autocomplete.png') repeat-x scroll;*/
background: #fff;
/* background: #f2f8fa;*/
/* background: #e1f0f5;*/
}
div.autocomplete-wrapper-m2m.state-focus,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus {
border-color: #999;
background: #e1f0f5;
/* border: 1px solid #309bbf;*/
/* background: #fff url('../img/backgrounds/autocomplete.png');*/
}
div.autocomplete-wrapper-m2m {
display: inline-block;
position: relative;
padding: 0 0 0 1px;
/* width: 758px;*/
height: auto !important;
vertical-align: top;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
div.autocomplete-wrapper-fk {
display: inline-block;
position: relative;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
vertical-align: top;
font-size: 0 !important; /* Set font-size and line-height to 0 to let the   at the end of the autocomplete-wrapper disappear */
line-height: 0 !important;
background: transparent !important;
}
/* M2M Listing ......................................... */
div.autocomplete-wrapper-m2m ul.repr {
/* position: relative;*/
float: left;
/* clear: both;*/
/* padding-right: 25px;*/
width: 100%;
overflow: hidden;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
div.autocomplete-wrapper-m2m li {
/* position: relative;*/
float: left;
display: inline;
overflow: hidden;
text-overflow: ellipsis;
}
div.autocomplete-wrapper-m2m li.search {
margin-top: 1px;
margin-bottom: 1px;
background: transparent;
}
div.autocomplete-wrapper-m2m li.search input[type=text] {
margin: 0 0 -1px !important;
padding: 0 4px !important;
width: 100px;
height: 22px !important;
font-size: 12px !important;
line-height: 16px !important;
outline: 0 !important;
border: 0 !important;
box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;
background: transparent !important;
cursor: text;
}
div.autocomplete-wrapper-m2m li.repr {
margin-top: 3px;
margin-bottom: 0;
margin-right: 5px;
font-weight: bold;
line-height: 18px;
}
/* Autocomplete Icons ......................................... */
div.autocomplete-wrapper-m2m li.repr a.m2m-remove {
color: #666;
padding-left: 5px;
}
div.autocomplete-wrapper-fk.autocomplete-preremove input.ui-autocomplete-input,
div.autocomplete-wrapper-m2m.autocomplete-preremove li.repr a {
color: #bf3030 !important;
}
div.autocomplete-wrapper-m2m li.repr.autocomplete-preremove a {
color: #bf3030 !important;
}
div.autocomplete-wrapper-m2m a.related-lookup,
div.autocomplete-wrapper-fk a.related-lookup {
position: absolute;
border: 1px solid #ccc;
}
div.autocomplete-wrapper-m2m a.related-lookup {
top: -1px;
right: -1px;
/* border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;*/
}
div.autocomplete-wrapper-fk a.related-lookup {
top: 0;
right: 0;
}
div.autocomplete-wrapper-fk a.related-remove,
div.autocomplete-wrapper-m2m a.related-remove,
div.autocomplete-wrapper-fk div.loader,
div.autocomplete-wrapper-m2m div.loader {
display: inline-block;
position: absolute;
right: 24px;
top: 0;
font-size: 0;
line-height: 0;
width: 23px;
height: 23px;
border: 1px solid #ccc;
/* border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;*/
}
div.autocomplete-wrapper-m2m a.related-remove + a.related-lookup {
border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;
}
div.autocomplete-wrapper-fk a.related-remove:link,
div.autocomplete-wrapper-fk a.related-remove:visited,
div.autocomplete-wrapper-m2m a.related-remove:link,
div.autocomplete-wrapper-m2m a.related-remove:visited {
background: #fff url('../img/icons/icon-autocomplete-fk-remove.png') 50% 50% no-repeat scroll;
}
div.autocomplete-wrapper-fk a.related-remove:hover,
div.autocomplete-wrapper-fk a.related-remove:active,
div.autocomplete-wrapper-m2m a.related-remove:hover,
div.autocomplete-wrapper-m2m a.related-remove:active {
background: #fff url('../img/icons/icon-autocomplete-fk-remove-hover.png') 50% 50% no-repeat scroll;
}
div.autocomplete-wrapper-m2m.state-focus a.related-lookup,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + a.related-lookup,
div.autocomplete-wrapper-m2m.state-focus a.related-remove,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + a.related-remove,
div.autocomplete-wrapper-m2m.state-focus .loader,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + * + .loader {
border-color: #999;
}
div.autocomplete-wrapper-fk div.loader,
div.autocomplete-wrapper-m2m div.loader {
/*display: inline-block !important;*/
width: 23px;
height: 23px;
background: #fff url('../img/backgrounds/loading-small.gif') 50% 50% no-repeat scroll;
}
/*div.autocomplete-wrapper-m2m.state-focus a.related-remove,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + a.related-remove,
div.autocomplete-wrapper-m2m.state-focus .loader,
div.autocomplete-wrapper-fk input.ui-autocomplete-input:focus + * + * + * + .loader {
background-color: #e1f0f5;
}
*/
div.autocomplete-wrapper-m2m a.related-remove,
div.autocomplete-wrapper-m2m a.related-remove + div.loader {
top: -1px;
right: 23px;
/* border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px;*/
}
/* Autocompletes in Changelists ......................................... */
#changelist table div.autocomplete-wrapper-fk a.related-remove, #changelist table div.autocomplete-wrapper-m2m a.related-remove,
#changelist table div.autocomplete-wrapper-fk div.loader, #changelist table div.autocomplete-wrapper-m2m div.loader {
top: -5px;
}
/* we need to "hide" the input-field without display:none, because with display:none we can´t focus the field anymore */
div.autocomplete-wrapper-m2m input.vManyToManyRawIdAdminField, div.autocomplete-wrapper-fk input.vForeignKeyRawIdAdminField, div.autocomplete-wrapper-fk input.vIntegerField {
position: absolute;
left: 0;
top: -40px;
width: 10px;
height: 10px;
color: transparent !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important;
cursor: default !important;
}