kpsul/static/grappelli/css/forms.css
2016-05-21 23:57:36 +02:00

1243 lines
No EOL
36 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* 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;
}