86 lines
1.4 KiB
SCSS
86 lines
1.4 KiB
SCSS
$off-grey-color: #ededed;
|
|
$off-color: #eef2f9;
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.main {
|
|
margin: auto;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
.split-pane {
|
|
display: flex;
|
|
flex-direction: vertical;
|
|
}
|
|
|
|
.split-elem {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.table-wrapper {
|
|
border: 1px solid $off-grey-color;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 1rem;
|
|
border-radius: 0.25rem;
|
|
display: inline-block;
|
|
margin-top: 1rem;
|
|
box-shadow: 0px 0px 5px rgba(grey, 0.1);
|
|
}
|
|
|
|
.class-table {
|
|
border-collapse: collapse;
|
|
|
|
th, td {
|
|
padding: 0.5rem;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
th {
|
|
text-align: left;
|
|
}
|
|
|
|
tr {
|
|
transition: background-color 0.2s;
|
|
|
|
&:nth-child(2n+3) {
|
|
background-color: $off-color;
|
|
}
|
|
|
|
&.hoverable:hover {
|
|
background-color: lighten(yellow, 30%);
|
|
}
|
|
|
|
&.selected {
|
|
border: 1px dashed black;
|
|
}
|
|
}
|
|
}
|
|
|
|
.feather {
|
|
vertical-align: middle;
|
|
height: 1rem;
|
|
}
|
|
|
|
.button {
|
|
border: 1px solid black;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
|
|
vertical-align: middle;
|
|
|
|
&.color-green {
|
|
background-color: lighten(#5bc275, 30%);
|
|
border-color: #5bc275;
|
|
color: darken(#5bc275, 30%);
|
|
}
|
|
|
|
&.color-red {
|
|
background-color: lighten(#c25b75, 30%);
|
|
border-color: #c25b75;
|
|
color: darken(#c25b75, 30%);
|
|
}
|
|
}
|