Improve design

This commit is contained in:
L3D 2025-01-25 17:38:07 +01:00
parent 42c2dda6f6
commit 80f9a58007
Signed by: l3d
GPG key ID: CD08445BFF4313D1

View file

@ -1,34 +1,67 @@
table {
border-collapse: collapse;
min-width: 100%;
width: 100%;
text-align: left;
border: 1px solid #424242;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
thead {
padding-top: 12px;
padding-bottom: 12px;
background-color: $animated_color;
box-shadow: 400px 0px 0px $animated_color, -400px 0px 0px $animated_color, 800px 0px 0px $animated_color, -800px 0px 0px $animated_color, 1500px 0px 0px $animated_color, -1500px 0px 0px $animated_color, 2800px 0px 0px $animated_color, -2800px 0px 0px $animated_color, 4000px 0px 0px $animated_color, -4000px 0px 0px $animated_color;
color: white;
background-color: #333;
th {
padding: 12px 16px;
font-weight: bold;
font-size: 14px;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #424242;
}
}
tbody {
tr:nth-child(even){
background-color: $lighter_background_color;
box-shadow: 400px 0px 0px $lighter_background_color, -400px 0px 0px $lighter_background_color, 800px 0px 0px $lighter_background_color, -800px 0px 0px $lighter_background_color, 1500px 0px 0px $lighter_background_color, -1500px 0px 0px $lighter_background_color, 2800px 0px 0px $lighter_background_color, -2800px 0px 0px $lighter_background_color, 4000px 0px 0px $lighter_background_color, -4000px 0px 0px $lighter_background_color;
}
tr:hover {
box-shadow: 400px 0px 0px $even_lighter_background_color, -400px 0px 0px $even_lighter_background_color, 800px 0px 0px $even_lighter_background_color, -800px 0px 0px $even_lighter_background_color, 1500px 0px 0px $even_lighter_background_color, -1500px 0px 0px $even_lighter_background_color, 2800px 0px 0px $even_lighter_background_color, -2800px 0px 0px $even_lighter_background_color, 4000px 0px 0px $even_lighter_background_color, -4000px 0px 0px $even_lighter_background_color;
background-color: $even_lighter_background_color;
}
tr th {
a[href] {
tr {
transition: background-color 0.3s;
&:nth-child(even) {
background-color: #2b2b2b;
}
&:hover {
background-color: #3a3a3a;
}
td {
padding: 12px 16px;
font-size: 14px;
color: #ddd;
border-bottom: 1px solid #424242;
}
th {
padding: 12px 16px;
font-weight: normal;
font-size: 14px;
color: #ddd;
}
a {
color: #76c7c0;
text-decoration: none;
color: white;
&:hover{
color: $animated_color;
transition: color 0.2s;
&:hover {
color: #4caf50;
}
}
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
}