l3d/ansible.l3d.space
1
0
Fork 0
Code Issues Pull requests Releases Activity

Improve design

Browse source
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
1 changed files with 52 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
assets/scss/_table.scss
View file

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