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

891 lines
20 KiB
CSS

/* Paragraphs & Other Typo Formats
------------------------------------------------------------------------------------------------------ */
.module p {
margin: 0;
padding: 5px 0;
}
fieldset.module label + p {
font-size: 11px;
line-height: 15px;
}
/* Modules
------------------------------------------------------------------------------------------------------ */
.module {
margin: 0 0 7px;
}
.form-container .module {
min-width: 938px;
}
#changelist .span-flexible .module + ul.submit-row {
margin-top: 10px;
}
/* Empty breaks in Chrome 11+: Elements are not displayed initially even if they are not empty */
/*.module:empty {
padding: 0;
height: 0;
border: 0;
visibility: hidden;
}*/
/* Nested Modules Basics ......................................... */
.module .module,
.module fielset.module {
margin: 0;
}
/* Groups
------------------------------------------------------------------------------------------------------ */
.group {
margin: 0 -4px 7px;
padding: 2px;
}
.form-container .group {
min-width: 940px;
}
/* Elements in Modules & Groups
------------------------------------------------------------------------------------------------------ */
/* 1st Level Elements ......................................... */
.group h2,
.module h2 {
padding: 6px 10px;
}
.group h2+.tools+* {
margin-top: 2px;
}
/* 2nd Level Elements (Dark/Bright) ......................................... */
.group h3,
.module h3 {
margin: 0;
padding: 5px 10px;
}
/* 3rd Level Elements ......................................... */
.group h4,
.module h4 {
margin: 0;
padding: 4px 10px 4px 10px;
}
.module .description {
padding: 8px 10px;
font-size: 11px;
}
/* Modules & Groups Overrides
------------------------------------------------------------------------------------------------------ */
.module:first-child {
margin-top: 0 !important;
}
.group .module:first-child {
margin-top: 2px !important;
}
.group:first-child {
margin-top: -4px;
}
.group .module {
margin-top: 2px;
margin-bottom: 0;
}
.group .module .module {
margin-top: 0;
}
.group:last-child,
.module:last-child {
margin-bottom: 0;
}
/* Collapsible Structures
------------------------------------------------------------------------------------------------------ */
.collapse.closed *,
.collapse.closed .module.table,
.collapse.closed .module.table * {
display: none;
}
.collapse-handler {
cursor: pointer;
}
.collapse.closed .collapse-handler,
.collapse.closed .tools,
.collapse.closed .tools * {
display: block !important;
}
.collapse.closed h3+.tools,
.collapse.closed h4+.tools {
margin-top: 1px !important;
}
/* Row
------------------------------------------------------------------------------------------------------ */
.row {
padding: 5px 10px;
font-weight: bold;
}
fieldset.module .row + .module {
margin-top: -1px !important;
}
/* Cell
------------------------------------------------------------------------------------------------------ */
.row .cell {
display: inline-block;
margin-top: -5px;
margin-bottom: -5px;
padding: 5px 10px;
width: auto;
}
.row .cell + .cell {
padding-left: 18px;
}
/* Fieldset Row
------------------------------------------------------------------------------------------------------ */
fieldset.module .row {
padding: 8px 10px;
line-height: 18px;
font-weight: normal;
}
fieldset.module .row.cells {
white-space: nowrap;
overflow: hidden;
}
/* Fieldset Cell
------------------------------------------------------------------------------------------------------ */
fieldset.module .cell {
margin: -8px 0 -1000px 0;
padding: 8px 18px 1000px 0;
vertical-align: top;
white-space: nowrap;
height: 100%;
}
fieldset.module .cell:last-child, fieldset.module .cell.last {
margin-right: -20px;
}
/* Tabular Modules
------------------------------------------------------------------------------------------------------ */
.module.table {
display: table;
margin: 0 0 -2px;
width: 100%;
border-collapse: separate;
border-spacing: 0 2px;
}
h2 + .module.table,
h2 + * + .module.table,
h2 + * + * + .module.table {
margin-top: 0 !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.module.table {
margin-bottom: -1px;
border-spacing: 0 1px !important;
}
}
.module.thead {
display: table-header-group;
}
.module.tfoot {
display: table-footer-group;
}
.module.thead,
.module.tfoot {
font-size: 11px;
font-weight: bold;
}
.module.table .tr {
display: table-row;
}
.module.tbody {
display: table-row-group;
}
.module.table .th,
.module.table .td {
display: table-cell;
float: none;
overflow: hidden;
margin-right: 0;
padding: 1px 20px;
height: 100%;
vertical-align: top;
white-space: nowrap;
}
.module.tbody .th,
.module.tbody .td {
padding-top: 5px;
padding-bottom: 5px;
}
.module.table .th:first-of-type,
.module.table .td:first-of-type {
padding-left: 10px;
}
.module.tbody .th.tools,
.module.tbody .td.tools {
padding-left: 0;
width: 100%;
}
.empty-form {
display: none !important;
}
/* Add Items
------------------------------------------------------------------------------------------------------ */
.module.add-item {
height: 28px;
}
.module.add-item>a {
position: relative;
top: 6px;
padding: 5px 10px;
font-weight: bold;
}
/* Selectors
------------------------------------------------------------------------------------------------------ */
.selector {
position: relative;
float: left;
overflow: hidden;
width: 758px;
}
.selector-available, .selector-chosen {
float: left;
width: 366px;
}
.selector.stacked .selector-available, .selector.stacked .selector-chosen {
width: 756px;
}
.selector h2, .inline-group .selector h2,
.inline-related fieldset .selector-available h2, .inline-related fieldset .selector-chosen h2 {
padding: 7px 5px 6px 7px;
font-size: 12px;
line-height: 13px;
font-weight: bold;
}
.selector .selector-filter {
padding: 3px 5px 2px 2px;
min-height: 25px;
font-weight: bold;
/*line-height: 25px;*/
/*text-indent: 25px;*/
/*background: url('../img/icons/icon-searchbox.png') 6px 50% no-repeat;*/
}
.selector .selector-available .selector-filter {
line-height: 25px;
text-indent: 25px;
background: url('../img/icons/icon-searchbox.png') 6px 50% no-repeat;
}
.selector .selector-chosen .selector-filter {
margin: 0 0 -3px;
padding: 6px 5px 2px 26px;
/*line-height: 25px;*/
/*text-indent: 25px;*/
background: url('../img/icons/icon-searchbox.png') 6px 8px no-repeat;
}
.selector .selector-filter input[type=text] {
position: relative;
margin: 0;
width: 326px !important;
max-width: 326px !important;
}
.selector.stacked .selector-filter input[type=text] {
width: 716px !important;
max-width: 716px !important;
}
.selector .selector-filter img {
display: none;
}
.selector .selector-chosen .selector-filter:after {
content: " " url('../img/icons/icon-selector_filter.png');
opacity: .75;
}
.selector.stacked .selector-chosen .selector-filter:after {
content: " " url('../img/icons/icon-selector_add-m2m_vertical-hover.png');
}
.selector select[multiple=multiple] {
margin: 0;
padding-left: 3px;
max-width: 367px !important;
width: 367px !important;
height: 200px;
}
.selector.stacked select[multiple=multiple] {
width: 757px !important;
max-width: 757px !important;
}
.selector h2 + select {
/*display: none;*/
position: relative;
top: -1px;
}
.selector ul.selector-chooser {
float: left;
margin: 110px 2px 0;
padding: 0;
width: 18px;
}
.selector.stacked ul.selector-chooser {
margin: 4px 0 0 356px;
width: 36px;
}
.selector.stacked ul.selector-chooser li {
float: left;
}
a.selector-add, a.selector-remove {
display: block;
width: 18px;
height: 18px;
color: transparent !important;
background-position: 50% 0;
background-repeat: no-repeat;
}
a.selector-add:link, a.selector-add:visited {
background-image: url('../img/icons/icon-selector_add-m2m_horizontal.png');
}
a.selector-add:hover, a.selector-add:active {
background-image: url('../img/icons/icon-selector_add-m2m_horizontal-hover.png');
}
a.selector-remove:link, a.selector-remove:visited {
background-image: url('../img/icons/icon-selector_remove-m2m_horizontal.png');
}
a.selector-remove:hover, a.selector-remove:active {
background-image: url('../img/icons/icon-selector_remove-m2m_horizontal-hover.png');
}
.selector.stacked a.selector-add:link, .selector.stacked a.selector-add:visited {
background-image: url('../img/icons/icon-selector_add-m2m_vertical.png');
}
.selector.stacked a.selector-add:hover, .selector.stacked a.selector-add:active {
background-image: url('../img/icons/icon-selector_add-m2m_vertical-hover.png');
}
.selector.stacked a.selector-remove:link, .selector.stacked a.selector-remove:visited {
background-image: url('../img/icons/icon-selector_remove-m2m_vertical.png');
}
.selector.stacked a.selector-remove:hover, .selector.stacked a.selector-remove:active {
background-image: url('../img/icons/icon-selector_remove-m2m_vertical-hover.png');
}
a.selector-chooseall, a.selector-clearall {
display: block;
margin: 0;
padding: 2px 7px;
font-size: 11px;
line-height: 13px;
font-weight: bold;
}
/* Link-List, Actions, Feed, Table of Contents
------------------------------------------------------------------------------------------------------ */
.link-list ul li,
.feed ul li,
.table-of-contents ul li {
padding: 0;
font-size: 11px;
line-height: 15px;
font-weight: bold;
}
.link-list ul li a,
.feed ul li a, .feed ul li span,
.table-of-contents ul li a {
display: block;
padding: 5px 10px;
font-weight: bold;
line-height: 13px;
background-color: transparent;
background-position: 50% 50%;
background-repeat: no-repeat;
}
.actions p,
.link-list p,
.feed p {
color: #999;
font-size: 11px;
padding: 3px 10px;
}
.link-list ul li a,
.feed ul li a {
padding-left: 25px;
}
a.internal,
a.external {
background-repeat: no-repeat;
}
.dashboard a.internal {
background-position: 12px 7px;
}
.dashboard a.external {
background-position: 10px 8px;
}
.documentation a.external {
padding-left: 12px;
background-position: 1px 3px;
}
a.internal:link, a.internal:visited {
background-image: url('../img/icons/icon-navigation-internal.png');
}
a.internal:hover, a.internal:active {
background-image: url('../img/icons/icon-navigation-internal-hover.png');
}
a.external:link, a.external:visited {
background-image: url('../img/icons/icon-navigation-external.png');
}
a.external:hover, a.external:active {
background-image: url('../img/icons/icon-navigation-external-hover.png');
}
.feed ul li a, .feed ul li span {
line-height: 13px;
}
.feed ul li span.date {
float: right;
padding: 5px 5px 0 5px;
}
/* Basic Actions & Module Actions
------------------------------------------------------------------------------------------------------ */
ul.actions {
position: relative;
float: right;
clear: both;
}
ul.actions li {
position: relative;
float: left;
}
ul.actions li + li {
margin-left: 20px;
}
ul.actions li a {
padding-left: 15px;
font-size: 11px;
background-position: 0 50%;
background-repeat: no-repeat;
}
.actions ul li {
padding: 4px 5px 4px 25px;
font-size: 11px;
line-height: 12px;
}
.actions ul li a {
margin-left: -15px;
padding-left: 15px;
font-weight: bold;
background-position: 0 50%;
background-repeat: no-repeat;
}
.actions li.add-link a:link, .actions li.add-link a:visited {
background-image: url('../img/icons/icon-actions-add-link.png');
}
.actions li.add-link a:hover, .actions li.add-link a:active {
background-image: url('../img/icons/icon-actions-add-link-hover.png');
}
.actions li.change-link a:link, .actions li.change-link a:visited {
background-image: url('../img/icons/icon-actions-change-link.png');
}
.actions li.change-link a:hover, .actions li.change-link a:active {
background-image: url('../img/icons/icon-actions-change-link-hover.png');
}
.actions li.delete-link {
text-decoration: line-through;
background: url('../img/icons/icon-actions-delete-link.png') 10px 7px no-repeat;
}
/* Module Search & Module Filter
------------------------------------------------------------------------------------------------------ */
.module.search,
.module.filter {
position: relative;
float: right;
z-index: 1001;
padding: 8px 10px;
}
.module.filter + .module.search {
padding-right: 0;
}
.module.filter .pulldown-container {
position: absolute;
width: inherit;
}
.module.search .tooltip {
position: absolute;
}
.module.search .tooltip.search-fields {
top: 25px;
}
.module.search .tooltip .tooltip-pointer {
position: relative;
z-index: 1000;
display: block;
width: 30px;
height: 8px;
background: transparent url('../img/backgrounds/tooltip-pointer.png') 10px 100% no-repeat scroll;
}
.module.search .tooltip .tooltip-content {
position: relative;
z-index: 990;
top: -1px;
padding: 8px 10px;
font-size: 11px;
line-height: 15px;
}
a.button.toggle-filters {
display: block;
margin: 0;
padding: 4px 20px 4px 8px;
}
a.button.toggle-filters:link, a.button.toggle-filters:visited {
background: transparent url('../img/icons/icon-dropdown.png') 100% 3px no-repeat;
}
.selected a.button.toggle-filters:link, .selected a.button.toggle-filters:visited {
background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.open a.button.toggle-filters, .selected a.button.toggle-filters,
.selected a.button.toggle-filters:hover, .selected a.button.toggle-filters:active,
a.button.toggle-filters:hover, a.button.toggle-filters:active {
background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.selected a.button.toggle-filters:link, .selected a.button.toggle-filters:visited {
background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.open a.button.toggle-filters,
.open.selected a.button.toggle-filters,
.selected a.button.toggle-filters:hover, .selected a.button.toggle-filters:active,
a.button.toggle-filters:hover, a.button.toggle-filters:active {
background: url('../img/icons/icon-dropdown-hover.png') 100% 3px no-repeat;
}
.filter-pulldown {
display: none;
position: relative;
z-index: 1000;
margin: -1px 0;
padding: 0 10px 10px;
}
.filter-pulldown .filter {
position: relative;
padding: 7px 0 0;
width: 100%;
}
.filter-pulldown select {
width: 100% !important;
}
.filter-pulldown label {
margin: 0 0 -2px;
padding: 0;
width: 100% !important;
line-height: 12px;
font-weight: bold;
}
/* Module Date Hierarchy
------------------------------------------------------------------------------------------------------ */
.module + .module.date-hierarchy {
margin-top: -8px;
}
.date-hierarchy ul {
position: relative;
float: left;
clear: both;
font-size: 11px;
line-height: 16px;
font-weight: bold;
}
.date-hierarchy ul li {
position: relative;
float: left;
margin-right: 10px;
}
.module.date-hierarchy ul a,
.module.date-hierarchy ul span {
padding: 2px 5px 1px;
font-weight: normal;
}
.date-hierarchy ul li a.date-hierarchy-back {
padding-left: 10px;
background: 0 50% no-repeat scroll;
}
.date-hierarchy a.date-hierarchy-back:link, .date-hierarchy a.date-hierarchy-back:visited {
background-image: url('../img/icons/icon-date-hierarchy-back.png');
}
.date-hierarchy a.date-hierarchy-back:hover, .date-hierarchy a.date-hierarchy-back:active {
background-image: url('../img/icons/icon-date-hierarchy-back-hover.png');
}
/* Pagination
------------------------------------------------------------------------------------------------------ */
.module.pagination {
padding: 8px 10px;
}
.module .module.pagination {
position: relative;
float: left;
}
ul.pagination {
position: relative;
clear: both;
margin: 0;
padding: 0;
width: auto;
font-weight: bold;
}
ul.pagination li {
position: relative;
float: left;
display: block;
margin-right: 3px;
}
ul.pagination li.results {
margin-right: 10px;
}
ul.pagination li.separator {
border-color: transparent;
}
ul.pagination li:last-child {
clear: right;
}
ul.pagination span,
ul.pagination a {
display: inline-block;
padding: 4px 8px 4px;
min-width: 25px;
font-size: 11px;
font-weight: bold;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
ul.pagination li.separator span {
padding: 4px 0;
min-width: 10px;
font-size: 14px;
}
ul.pagination li.showall {
margin-left: 7px;
}
.submit-row ul.pagination li,
.submit-row ul.pagination li.results {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Module Changelist-Results
------------------------------------------------------------------------------------------------------ */
.module.changelist-results {
background: url('../img/backgrounds/changelist-results.png') repeat scroll !important;
}
.changelist-actions + .changelist-results,
.changelist-results + .changelist-actions {
margin-top: -1px;
}
/* Module Changelist Actions
------------------------------------------------------------------------------------------------------ */
.changelist-actions {
position: relative;
margin-bottom: 0;
}
.changelist-actions ul {
position: relative;
float: left;
display: inline;
font-size: 11px;
line-height: 16px;
font-weight: bold;
margin: -1px 10px -1px 0;
}
.changelist-actions ul li {
position: relative;
float: left;
display: block;
margin-right: 3px;
}
.changelist-actions ul a,
.changelist-actions ul span {
display: inline-block;
padding: 4px 8px 3px;
font-size: 11px;
font-weight: bold;
}
.changelist-actions ul span span {
padding: 0;
}
.changelist-actions #action-toggle {
display: none;
}
.changelist-actions select {
float: left;
margin: 0 10px 0 0;
width: 278px;
}
.changelist-actions li.all,
.changelist-actions li.clear-selection,
.changelist-actions li.question {
display: none;
}
/* Submit Row
------------------------------------------------------------------------------------------------------ */
.module.submit-row {
width: 100%;
}
ul.submit-row {
position: relative;
float: left;
clear: both;
width: 100%;
}
.pagination + ul.submit-row {
float: right;
clear: none;
width: 25%;
}
ul.submit-row li {
float: right;
margin-left: 10px;
}
ul.submit-row li.left {
float: left;
}
ul.submit-row li.left:first-child {
margin-left: 0;
}
/* Module Footer
------------------------------------------------------------------------------------------------------ */
.module.footer {
position: fixed;
z-index: 1000;
bottom: 0;
margin: 0 -20px;
padding: 12px 20px;
min-width: 100px;
width: 100%;
opacity: 1;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.module.footer .changelist-actions {
position: relative;
float: left;
clear: none;
width: 75%;
padding: 2px 0 0;
}
.change-list .module.footer ul.submit-row {
position: relative;
float: right;
clear: none;
width: 25%;
}
/* Sortable
------------------------------------------------------------------------------------------------------ */
.sortablehelper, sortablehelper * {
display: none;
}