Skip to content

Instantly share code, notes, and snippets.

@llk23r
Created October 17, 2022 03:34
Show Gist options
  • Save llk23r/87fd745386f01fd0b18575cd0426fc10 to your computer and use it in GitHub Desktop.
Save llk23r/87fd745386f01fd0b18575cd0426fc10 to your computer and use it in GitHub Desktop.
CSS for report
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
*,
body {
font-family: "Poppins", sans-serif;
margin: 0;
width: auto;
overflow-y: scroll;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
h3 {
border: 1px solid whitesmoke;
padding: 10px;
margin-top: 1px;
margin-bottom: 1px;
background-color: #4e4b66;
color: white;
}
.report-header {
/* background-color: #4e4b66; */
border: 1px solid whitesmoke;
color: white;
padding: 10px;
margin-bottom: 10px;
font-size: smaller;
display: flex;
justify-content: space-between;
background: linear-gradient(-45deg, #4e4b66, #3c3761);
animation: gradient 15s ease infinite;
}
table {
/* background-color: #fff; */
border-collapse: collapse;
box-shadow: 0 5px 10px #e1e5ee;
overflow-x: auto;
text-align: left;
width: 100%;
margin-bottom: 20px;
padding: 10px;
}
thead {
box-shadow: 0 2px 2px #4e4b66;
}
th {
padding: 1rem;
text-transform: uppercase;
letter-spacing: 0rem;
font-size: 0.8rem;
font-weight: 900;
color: #4e4b66;
text-align: left;
}
td {
font-size: 0.8rem;
padding: 0.7rem 1rem;
vertical-align: middle;
font-weight: 300;
color: #4e4b66;
}
tbody tr {
border-bottom: 1px solid #e0e0e0;
}
/* tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
} */
tbody tr:last-of-type {
border-bottom: 2px ridge #4e4b66;
}
tbody tr:hover {
background-color: #bcbace;
cursor: pointer;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
thead {
display: none;
}
tr {
margin-bottom: 1rem;
display: block;
border-bottom: 2px solid #e1e5ee;
}
td {
display: block;
text-align: right;
font-size: 0.8rem;
border-bottom: 1px solid #e1e5ee;
}
td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment