127 lines
2.0 KiB
CSS
127 lines
2.0 KiB
CSS
:root {
|
|
--error-color: red;
|
|
--success-color: green;
|
|
}
|
|
|
|
|
|
/***
|
|
* Table
|
|
**/
|
|
#networkTableForm {
|
|
/* Center table */
|
|
width: 100%;
|
|
}
|
|
|
|
#networkTable {
|
|
/* Center table */
|
|
margin: 0 auto;
|
|
|
|
/* Make table as small as possible */
|
|
width: auto;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
|
|
/* Text alignment */
|
|
#networkTable th.sourceLabel, #networkTable td.sourceLabel {
|
|
text-align: right;
|
|
}
|
|
|
|
#networkTable th:not(.sourceLabel), #networkTable td:not(.sourceLabel) {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Borders */
|
|
#networkTable th, #networkTable td {
|
|
border-right: 1px solid var(--kpxc-table-border-color);
|
|
}
|
|
|
|
#networkTable tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
#networkTable th:first-child, #networkTable td:first-child,
|
|
#networkTable th:last-child, #networkTable td:last-child {
|
|
/* Undo Milligram padding because it looks bad with column borders */
|
|
padding-left: 1.5rem;
|
|
padding-right: 1.5rem;
|
|
}
|
|
|
|
|
|
/* Colors */
|
|
#networkTable tbody tr:nth-child(odd) {
|
|
background-color: var(--kpxc-table-hover-color);
|
|
}
|
|
|
|
#networkTable td.correct {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
#networkTable td.incorrect {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
#networkTable th a i {
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
/***
|
|
* Loading icon
|
|
*
|
|
* From https://loading.io/css/.
|
|
**/
|
|
.lds-dual-ring {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.lds-dual-ring:after {
|
|
content: " ";
|
|
display: block;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
border: 1px solid;
|
|
border-color: #000 transparent;
|
|
animation: lds-dual-ring 1.2s linear infinite;
|
|
}
|
|
|
|
@keyframes lds-dual-ring {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
|
|
/***
|
|
* Messages, errors, etc.
|
|
**/
|
|
#messages {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.messageInner {
|
|
display: inline-block;
|
|
}
|
|
|
|
#errorMessage {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
input[data-entered=true]:invalid {
|
|
border-color: var(--error-color);
|
|
color: var(--error-color);
|
|
}
|
|
|
|
.redLink a {
|
|
color: #ba0000;
|
|
}
|