/* * General control styling */ .control-table .table-container { border: 1px solid #e0e0e0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; overflow: hidden; margin-bottom: 15px; } .control-table .table-container:last-child { margin-bottom: 0; } .control-table.active .table-container { border-color: #e0e0e0; } .control-table table { width: 100%; border-collapse: collapse; table-layout: fixed; } .control-table table td, .control-table table th { padding: 0; font-size: 13px; color: #555555; } .control-table table [data-view-container] { padding: 5px 10px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; } .control-table table.headers:after { content: ' '; display: block; position: absolute; left: 1px; right: 1px; margin-top: -1px; border-bottom: 1px solid #e0e0e0; } .control-table table.headers th { padding: 7px 10px; font-weight: normal; text-transform: uppercase; font-size: 11px; color: #333333; background: white; border-right: 1px solid #ecf0f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .control-table table.headers th [data-view-container] { padding-bottom: 6px; } .control-table table.headers th:last-child { border-right: none; } .control-table.active table.headers:after { border-bottom-color: #e0e0e0; } .control-table table.data td { border: 1px solid #ecf0f1; } .control-table table.data td .content-container { position: relative; padding: 1px; } .control-table table.data td.active { border-color: #34495e !important; } .control-table table.data td.active .content-container { padding: 0; border: 1px solid #34495e; } .control-table table.data td.active .content-container:before, .control-table table.data td.active .content-container:after { content: ' '; background: #34495e; position: absolute; left: -2px; top: -2px; } .control-table table.data td.active .content-container:before { width: 1px; bottom: -2px; } .control-table table.data td.active .content-container:after { right: -2px; height: 1px; } .control-table table.data tr { background-color: white; } .control-table table.data tr.error { background-color: #fbecec!important; } .control-table table.data tr.error td.active.error { border-color: #ec0000!important; } .control-table table.data tr.error td.active.error .content-container { border-color: #ec0000!important; } .control-table table.data tr.error td.active.error .content-container:before, .control-table table.data tr.error td.active.error .content-container:after { background-color: #ec0000!important; } .control-table table.data tr:nth-child(2n) { background-color: #fbfbfb; } .control-table table.data tr:first-child td { border-top: none; } .control-table table.data tr:last-child td { border-bottom: none; } .control-table table.data td:first-child { border-left: none; } .control-table table.data td:last-child { border-right: none; } .control-table .control-scrollbar > div { border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; overflow: hidden; } .control-table .control-scrollbar table.data tr:last-child td { border-bottom: 1px solid #ecf0f1; } .control-table .toolbar { background: white; border-bottom: 1px solid #e0e0e0; } .control-table .toolbar a.btn { color: #323e50; padding: 8px 10px; opacity: 0.5; filter: alpha(opacity=50); -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none; } .control-table .toolbar a.btn:hover { opacity: 1; filter: alpha(opacity=100); } .control-table .toolbar .table-search { float: right; margin: 3px 3px 0 0; } .control-table .toolbar .table-search .table-search-input { height: auto; padding: 5px 13px 5px; } .control-table .toolbar a.table-icon:before { display: inline-block; content: ' '; width: 16px; height: 16px; margin-right: 8px; position: relative; top: 3px; background: transparent url(../images/table-icons.gif) no-repeat 0 0; background-size: 32px auto; } .control-table .toolbar a.table-icon.add-table-row-above:before { background-position: 0 -56px; } .control-table .toolbar a.table-icon.delete-table-row:before { background-position: 0 -113px; } .control-table.active .toolbar { border-bottom-color: #e0e0e0; } .control-table .pagination ul { padding: 0; margin-bottom: 15px; } .control-table .pagination ul li { list-style: none; padding: 4px 6px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: inline-block; margin-right: 5px; font-size: 12px; background: #ecf0f1; line-height: 100%; } .control-table .pagination ul li a { text-decoration: none; color: #95a5a6; } .control-table .pagination ul li.active { background: #3498db; } .control-table .pagination ul li.active a { color: #ffffff; } @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) { .control-table .toolbar a:before { background-position: 0px -9px; background-size: 16px auto; } .control-table .toolbar a.add-table-row-above:before { background-position: 0 -39px; } .control-table .toolbar a.delete-table-row:before { background-position: 0 -66px; } } /* * String and autocomplete editors */ .control-table td[data-column-type=string] input[type=text], .control-table td[data-column-type=autocomplete] input[type=text] { width: 100%; height: 100%; display: block; outline: none; border: none; padding: 6px 10px 7px; } html.chrome .control-table td[data-column-type=string] input[type=text], html.chrome .control-table td[data-column-type=autocomplete] input[type=text] { padding: 6px 10px 7px!important; } html.safari .control-table td[data-column-type=string] input[type=text], html.gecko .control-table td[data-column-type=string] input[type=text], html.safari .control-table td[data-column-type=autocomplete] input[type=text], html.gecko .control-table td[data-column-type=autocomplete] input[type=text] { padding: 5px 10px 5px; } ul.table-widget-autocomplete { background: white; font-size: 13px; margin-top: 0; border: 1px solid #808c8d; border-top: 1px solid #ecf0f1; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } ul.table-widget-autocomplete li a { padding: 5px 10px; } /* * Checkbox editor */ .control-table td[data-column-type=checkbox] div[data-checkbox-element] { width: 16px; height: 16px; border-radius: 3px; background-color: #FFFFFF; border: 1px solid #999999; margin: 5px 5px 5px 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .control-table td[data-column-type=checkbox] div[data-checkbox-element]:hover { border-color: #808080; color: #4d4d4d; } .control-table td[data-column-type=checkbox] div[data-checkbox-element].checked { border-width: 2px; } .control-table td[data-column-type=checkbox] div[data-checkbox-element].checked:before { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; content: "\f00c"; font-size: 10px; position: relative; left: 1px; top: -4px; } .control-table td[data-column-type=checkbox] div[data-checkbox-element]:focus { border-color: #34495e; outline: none; } /* * Dropdown editor */ .control-table td[data-column-type=dropdown] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .control-table td[data-column-type=dropdown] [data-view-container] { padding-right: 20px; position: relative; cursor: pointer; } .control-table td[data-column-type=dropdown] [data-view-container]:after { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; content: "\f107"; font-size: 13px; line-height: 100%; color: #95a5a6; position: absolute; top: 8px; right: 10px; } .control-table td[data-column-type=dropdown] [data-view-container]:hover:after { color: #0181b9; } .control-table td[data-column-type=dropdown] [data-dropdown-open=true] { background: white; } .control-table td[data-column-type=dropdown] [data-dropdown-open=true] [data-view-container]:after { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; content: "\f106"; } .control-table td[data-column-type=dropdown] .content-container { outline: none; } /* Frameless control styles start */ .widget-field.frameless .control-table .table-container { border-top: none; border-left: none; border-right: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .widget-field.frameless .control-table .toolbar { background: transparent; } /* Frameless control styles end */ html.cssanimations .control-table td[data-column-type=dropdown] [data-view-container].loading:after { background: url('../../../../../../modules/system/assets/ui/images/loader-transparent.svg') 50% 50%; background-size: 15px 15px; position: absolute; width: 15px; height: 15px; top: 6px; right: 5px; content: ' '; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .table-control-dropdown-list { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; background: white; border: 1px solid #e0e0e0; border-top: none; padding-top: 1px; overflow: hidden; z-index: 1000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .table-control-dropdown-list ul { border-top: 1px solid #ecf0f1; padding: 0; margin: 0; max-height: 200px; overflow: auto; } .table-control-dropdown-list li { list-style: none; font-size: 13px; color: #555555; padding: 5px 10px; cursor: pointer; outline: none; } .table-control-dropdown-list li:focus { background: #34495e; color: white; }