Introduction
Introduction Statistics Contact Development Disclaimer Help
datatable: make image filesize smaller and simpler to align/style - jscancer - …
git clone git://git.codemadness.org/jscancer
Log
Files
Refs
README
LICENSE
---
commit 84c2504d86a5fec3c8cbcc3d6f908268bdaf0637
parent ed82eea91230781e2e5ba243b86ca94621d7222c
Author: Hiltjo Posthuma <[email protected]>
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(-)
---
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,iVBORw0KGgoAAAANSUhEUgAAA…
- background-position: right center;
- background-repeat: no-repeat;
+ background: no-repeat right 3px center url("data:image/png;base64,iVBO…
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,iVBORw0KGgoAAAANSUhEUgAAA…
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
}
-
table.datatable thead .sort-desc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
}
-
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;
}
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,iVBORw0KGgoAAAANSUhEUgAAA…
- background-position: right center;
- background-repeat: no-repeat;
+ background: no-repeat right 3px center url("data:image/png;base64,iVBO…
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,iVBORw0KGgoAAAANSUhEUgAAA…
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
}
-
table.datatable thead .sort-desc {
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA…
}
-
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;
}
You are viewing proxied material from codemadness.org. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.