Improve design
This commit is contained in:
parent
42c2dda6f6
commit
80f9a58007
1 changed files with 52 additions and 19 deletions
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue