datatable: make image filesize smaller and simpler to align/style - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit 84c2504d86a5fec3c8cbcc3d6f908268bdaf0637
(DIR) parent ed82eea91230781e2e5ba243b86ca94621d7222c
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Thu, 4 Apr 2019 18:46:19 +0200
datatable: make image filesize smaller and simpler to align/style
- use alpha+grey PNG format for non-highlighted order.
- crop the images smaller so they're easier to align/style.
Diffstat:
M datatable/datatable.css | 44 ++++++++-----------------------
M datatable/datatable_lite.css | 32 ++++++++++---------------------
2 files changed, 21 insertions(+), 55 deletions(-)
---
(DIR) diff --git a/datatable/datatable.css b/datatable/datatable.css
@@ -1,8 +1,7 @@
table.datatable {
- table-layout: fixed;
border-collapse: collapse;
+ table-layout: fixed;
}
-
table.datatable tr th {
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -11,84 +10,68 @@ table.datatable tr th {
-ms-user-select: none;
user-select: none;
}
-
-table.datatable tr td {
+table.datatable tr td,
+table.datatable tr th {
border: 1px solid #aaa;
- padding: 0 3px 0 3px;
line-height: 25px;
}
-
+table.datatable tr td {
+ padding: 0 3px 0 3px;
+}
table.datatable tr th {
- border: 1px solid #aaa;
- padding: 0 16px 0 3px;
- line-height: 25px;
+ padding: 0 15px 0 3px; /* icon width (9px) + (padding * 2) */
}
-
table.datatable thead td,
table.datatable thead th {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAVFBMVEX////c3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzIvRbaAAAAG3RSTlMAAPf5AQprKuOQBnX6nZFB7vI8Db64B2HbI1kLO0PyAAAAaklEQVQYGZXBxw3EABADMY1zzln993nwa38HmNQnQF43gALQdgWgAGXl6wYFst72kKHAONmeFxTWza/9UDjT5JU++u9Jk1d6Khy7X9uqwDLbnkYUyAbbfYYC3JerEhSAomsBBaCpc0Bf/AAeJAWLTmqG7wAAAABJRU5ErkJggg==");
- background-position: right center;
- background-repeat: no-repeat;
+ background: no-repeat right 3px center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAPCAQAAACcwS2GAAAAqElEQVQY02XMIQ6CYADF8T+fzk03g9liIFE8AyewcAG9A5lAZlM2I56AjXkCyB6A9IIbdAJNw2eQKc6X3n7be4AAzXTUgm8iFOqhMBqBp0ZWjbwB5SiTlZVVJgcmEVufiDkAG26ru6MlV/zPbcnOEIwAfAL+42jP5UcOhpxyBCW5oSemG6AjdnsDVBQDFVRgAEtCC7QkrgXjAtSkPEndGmA6TE6sOb/rC97sOtg0idb1AAAAAElFTkSuQmCC");
cursor: pointer;
}
-
table.datatable thead td,
table.datatable thead th,
table.datatable tfoot td,
table.datatable tfoot th {
background-color: #eee;
}
-
table.datatable thead tr td:hover,
table.datatable thead tr th:hover {
background-color: #ccc;
}
-
table.datatable thead .sort-asc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABIklEQVQ4y9WTL0gEQRTGf7Oji3/xEGwugj6xGsRmE4wG04UD4YqgxSDYLRtFMAnaTIeCySBosW02jUmzntxxKnI3lgvHMjt3e2rwKwPzPb75vnnvwS9Cda2IkwhYBW7YX3rylQbdtEYVu8BpCNs/cxYn0YjCNCzhmOK9blnwuQt8QgXNVcMSAtQtwxMBlXbs3DHL1SaLnRdvLZaBcj6xOIkKgdp0UZNalbLcOcXGA/aqLTvj4l6adjaEnZ7FprRe9/VlelBv8NdwjoYxpgicAx8ZabZE5CxNDGQ8ctE+hxzcLVDp+c9E5BNYAWop6hU4EJFa3jm7B9JRLoG7vtbJGDMHXAMCPANrIvLQ16KLyCNwCHwBRz4hXwM6cQLMA8f8W3wDnmNEHIbRWQMAAAAASUVORK5CYII=");
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAMAAADzlqVxAAAAYFBMVEUAAAAAiMzc3Nzc3Nzc3Nzc3Nzc3Nzc3NwAiMzc3Nzc3Nzc3Nzc3Nwijc8ijc8NiswGiMwLicwSi80GiMwKicwMicwQi8wPiswAiMwQis3c3Nzc3Nzc3Nzc3NwAiMzc3NwvFJZ7AAAAHnRSTlMAHQ1B7gGdKoB1vmHj4dySiY7diPn2z8lh4PoGkAo2Nz8xAAAAVklEQVR4XkXGVw4DIQwFwGc623u6uf8tY3CkzNdA0J2gVt41dPBJLRcz32oTVwmgR9tGmFktGFlN+OuL6mG6ls4A1kmcBeCDLHiIOJQhosnPDPV6fyRfcpYHu22ugvsAAAAASUVORK5CYII=");
}
-
table.datatable thead .sort-desc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABGUlEQVQ4y82Uv0oDQRDGf3unGIOiWCtCnMpOuM7G0lbxFayENGnuEQSxEVMGBGsLS8EnEEHbwHigZyeIRCN6YbM21yiX+6OgLgwDM7PzfcN+s/BfjykqUNU60AcmRCTJq/VKAO6kfvtHzFR1GTgD5gEF1kXkpjIzVTVAK20EIEAzjVcecw3Y+BJrAquVxlTVaaCXA1QTkfeyzLZS/5ZhAJt/o7PG/pVGA7s06lJj3L+LWiuLpca8H9iTPAYP1p6Wfs0EDud8E2XlZj1z+zxkr7w0wiB+tO44K/U0dEeEQVxVZ50Zj4tPrHyugc73Fn33cmHK0H1xTNYNyatDRrEqXvQwiBPHQYrazmsEMFaknQTaQLfvOP/Vz/EDaOlUh4wYGM8AAAAASUVORK5CYII=");
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAMAAADzlqVxAAAAYFBMVEUAAAAAiMzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NwAiMzc3Nzc3Nzc3Nwijc8GiMwNiszc3NwSi80Qis0ijc8PiswQi8wMicwKicwGiMwLicwAiMzc3NwAiMyvlaDrAAAAHnRSTlMAHZ1BKuN1Ab5h7g2ACpAG4YmS+t3g3MnP9vmIjmGtHVckAAAAWElEQVR4XkXGVRLDMAwFwCdzkKEo3/+Wka3OdL8WYhoHqLAFjfPsXUk0zGyizLay1gJd4iJ1aFg1+DuzmrH8toL2moOAvq4HQJfkQSh95heheucPFH1JcgNFnwfFBOP8fQAAAABJRU5ErkJggg==");
}
-
table.datatable thead .sort-disabled {
background-image: none;
cursor: default;
}
-
table.datatable tbody tr:nth-child(2n+1) td {
background-color: #f9f9f9;
}
-
table.datatable tbody tr:hover td {
background-color: #d6f0ff;
}
-
/* datatable lazy scroll styles below */
.datatable-lazyscroll-container {
overflow: hidden;
position: relative;
}
-
.datatable-lazyscroll-container table {
- table-layout: fixed;
border-collapse: collapse;
+ table-layout: fixed;
width: 1px;
height: 1px;
}
-
.datatable-lazyscroll-headers {
overflow: hidden;
position: relative;
margin-right: 17px; /* fix scrollbar */
}
-
.datatable-lazyscroll-headers th {
height: 25px !important;
text-align: left;
}
-
.datatable-lazyscroll-body td {
overflow: hidden !important;
line-height: 25px !important;
@@ -96,25 +79,20 @@ table.datatable tbody tr:hover td {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
-
.datatable-lazyscroll-body {
overflow-y: scroll;
overflow-x: auto;
position: relative;
}
-
.datatable-lazyscroll-headers th {
border-bottom: 0 !important;
}
-
.datatable-lazyscroll-container {
height: 608px;
}
-
.datatable-lazyscroll-body {
height: 580px;
}
-
.datatable-lazyscroll-container th {
width: 150px;
}
(DIR) diff --git a/datatable/datatable_lite.css b/datatable/datatable_lite.css
@@ -1,8 +1,7 @@
table.datatable {
- table-layout: fixed;
border-collapse: collapse;
+ table-layout: fixed;
}
-
table.datatable tr th {
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -11,56 +10,45 @@ table.datatable tr th {
-ms-user-select: none;
user-select: none;
}
-
-table.datatable tr td {
+table.datatable tr td,
+table.datatable tr th {
border: 1px solid #aaa;
- padding: 0 3px 0 3px;
line-height: 25px;
}
-
+table.datatable tr td {
+ padding: 0 3px 0 3px;
+}
table.datatable tr th {
- border: 1px solid #aaa;
- padding: 0 16px 0 3px;
- line-height: 25px;
+ padding: 0 15px 0 3px;
}
-
table.datatable thead td,
table.datatable thead th {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAVFBMVEX////c3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzIvRbaAAAAG3RSTlMAAPf5AQprKuOQBnX6nZFB7vI8Db64B2HbI1kLO0PyAAAAaklEQVQYGZXBxw3EABADMY1zzln993nwa38HmNQnQF43gALQdgWgAGXl6wYFst72kKHAONmeFxTWza/9UDjT5JU++u9Jk1d6Khy7X9uqwDLbnkYUyAbbfYYC3JerEhSAomsBBaCpc0Bf/AAeJAWLTmqG7wAAAABJRU5ErkJggg==");
- background-position: right center;
- background-repeat: no-repeat;
+ background: no-repeat right 3px center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAPCAQAAACcwS2GAAAAqElEQVQY02XMIQ6CYADF8T+fzk03g9liIFE8AyewcAG9A5lAZlM2I56AjXkCyB6A9IIbdAJNw2eQKc6X3n7be4AAzXTUgm8iFOqhMBqBp0ZWjbwB5SiTlZVVJgcmEVufiDkAG26ru6MlV/zPbcnOEIwAfAL+42jP5UcOhpxyBCW5oSemG6AjdnsDVBQDFVRgAEtCC7QkrgXjAtSkPEndGmA6TE6sOb/rC97sOtg0idb1AAAAAElFTkSuQmCC");
cursor: pointer;
}
-
table.datatable thead td,
table.datatable thead th,
table.datatable tfoot td,
table.datatable tfoot th {
background-color: #eee;
}
-
table.datatable thead tr td:hover,
table.datatable thead tr th:hover {
background-color: #ccc;
}
-
table.datatable thead .sort-asc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABIklEQVQ4y9WTL0gEQRTGf7Oji3/xEGwugj6xGsRmE4wG04UD4YqgxSDYLRtFMAnaTIeCySBosW02jUmzntxxKnI3lgvHMjt3e2rwKwPzPb75vnnvwS9Cda2IkwhYBW7YX3rylQbdtEYVu8BpCNs/cxYn0YjCNCzhmOK9blnwuQt8QgXNVcMSAtQtwxMBlXbs3DHL1SaLnRdvLZaBcj6xOIkKgdp0UZNalbLcOcXGA/aqLTvj4l6adjaEnZ7FprRe9/VlelBv8NdwjoYxpgicAx8ZabZE5CxNDGQ8ctE+hxzcLVDp+c9E5BNYAWop6hU4EJFa3jm7B9JRLoG7vtbJGDMHXAMCPANrIvLQ16KLyCNwCHwBRz4hXwM6cQLMA8f8W3wDnmNEHIbRWQMAAAAASUVORK5CYII=");
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAMAAADzlqVxAAAAYFBMVEUAAAAAiMzc3Nzc3Nzc3Nzc3Nzc3Nzc3NwAiMzc3Nzc3Nzc3Nzc3Nwijc8ijc8NiswGiMwLicwSi80GiMwKicwMicwQi8wPiswAiMwQis3c3Nzc3Nzc3Nzc3NwAiMzc3NwvFJZ7AAAAHnRSTlMAHQ1B7gGdKoB1vmHj4dySiY7diPn2z8lh4PoGkAo2Nz8xAAAAVklEQVR4XkXGVw4DIQwFwGc623u6uf8tY3CkzNdA0J2gVt41dPBJLRcz32oTVwmgR9tGmFktGFlN+OuL6mG6ls4A1kmcBeCDLHiIOJQhosnPDPV6fyRfcpYHu22ugvsAAAAASUVORK5CYII=");
}
-
table.datatable thead .sort-desc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABGUlEQVQ4y82Uv0oDQRDGf3unGIOiWCtCnMpOuM7G0lbxFayENGnuEQSxEVMGBGsLS8EnEEHbwHigZyeIRCN6YbM21yiX+6OgLgwDM7PzfcN+s/BfjykqUNU60AcmRCTJq/VKAO6kfvtHzFR1GTgD5gEF1kXkpjIzVTVAK20EIEAzjVcecw3Y+BJrAquVxlTVaaCXA1QTkfeyzLZS/5ZhAJt/o7PG/pVGA7s06lJj3L+LWiuLpca8H9iTPAYP1p6Wfs0EDud8E2XlZj1z+zxkr7w0wiB+tO44K/U0dEeEQVxVZ50Zj4tPrHyugc73Fn33cmHK0H1xTNYNyatDRrEqXvQwiBPHQYrazmsEMFaknQTaQLfvOP/Vz/EDaOlUh4wYGM8AAAAASUVORK5CYII=");
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAMAAADzlqVxAAAAYFBMVEUAAAAAiMzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NwAiMzc3Nzc3Nzc3Nwijc8GiMwNiszc3NwSi80Qis0ijc8PiswQi8wMicwKicwGiMwLicwAiMzc3NwAiMyvlaDrAAAAHnRSTlMAHZ1BKuN1Ab5h7g2ACpAG4YmS+t3g3MnP9vmIjmGtHVckAAAAWElEQVR4XkXGVRLDMAwFwCdzkKEo3/+Wka3OdL8WYhoHqLAFjfPsXUk0zGyizLay1gJd4iJ1aFg1+DuzmrH8toL2moOAvq4HQJfkQSh95heheucPFH1JcgNFnwfFBOP8fQAAAABJRU5ErkJggg==");
}
-
table.datatable thead .sort-disabled {
background-image: none;
cursor: default;
}
-
table.datatable tbody tr:nth-child(2n+1) td {
background-color: #f9f9f9;
}
-
table.datatable tbody tr:hover td {
background-color: #d6f0ff;
}