You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.3 KiB
CSS
100 lines
2.3 KiB
CSS
main {
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
padding: 1em;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.table-wrapper {
|
|
overflow: auto;
|
|
max-width: 100%;
|
|
background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
|
background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: white;
|
|
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
|
|
background-position: 0 0, 100%, 0 0, 100%;
|
|
background-attachment: local, local, scroll, scroll;
|
|
}
|
|
|
|
tr {
|
|
border-bottom: 1px solid;
|
|
}
|
|
|
|
th {
|
|
background-color: #555;
|
|
color: #fff;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
text-align: left;
|
|
padding: 0.5em 1em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
button {
|
|
font-size: inherit;
|
|
margin: 0 0.25em;
|
|
padding: 0.25em 0.5em;
|
|
background-color: #555;
|
|
color: #fff;
|
|
border: 0;
|
|
-webkit-transition: background-color 0.4s, color 0.4s;
|
|
transition: background-color 0.4s, color 0.4s;
|
|
}
|
|
button:hover {
|
|
background-color: #bbb;
|
|
color: #000;
|
|
}
|
|
|
|
.pagination {
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
margin-bottom: 1em;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.page-numbers {
|
|
margin: 1em 1em 0;
|
|
}
|
|
|
|
.page-number {
|
|
padding: 0.5em;
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media screen and (min-width: 540px) {
|
|
.backward {
|
|
-webkit-box-ordinal-group: 2;
|
|
order: 1;
|
|
}
|
|
|
|
.page-numbers {
|
|
-webkit-box-ordinal-group: 3;
|
|
order: 2;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.forward {
|
|
-webkit-box-ordinal-group: 4;
|
|
order: 3;
|
|
}
|
|
} |