150 lines
2.6 KiB
CSS
150 lines
2.6 KiB
CSS
:root {
|
|
--error-color: red;
|
|
--error-bg-color: #ffdddd;
|
|
--success-color: green;
|
|
--success-bg-color: #ddffdd;
|
|
--warning-color: orange;
|
|
--warning-bg-color: #ffffcc;
|
|
--info-color: blue;
|
|
--info-bg-color: #ddffff;
|
|
--table-border-color: #e1e1e1;
|
|
--table-row-color: #f2f2f2;
|
|
--fandom-redlink: #ba0000;
|
|
}
|
|
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/***
|
|
* 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(--table-border-color);
|
|
border-bottom: 1px solid var(--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;
|
|
}
|
|
|
|
|
|
/* Table colors */
|
|
#networkTable tbody tr:nth-child(odd) {
|
|
background-color: var(--table-row-color);
|
|
}
|
|
|
|
#networkTable th a i {
|
|
font-size: 0.9em;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#networkTable a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* Shared colors */
|
|
.redLink a {
|
|
color: var(--fandom-redlink);
|
|
}
|
|
|
|
span.success, i.success {
|
|
color: var(--success-color);
|
|
}
|
|
|
|
div.success {
|
|
border-color: var(--success-color);
|
|
background-color: var(--success-bg-color);
|
|
}
|
|
|
|
span.error, i.error {
|
|
color: var(--error-color);
|
|
}
|
|
|
|
div.error {
|
|
border-color: var(--error-color);
|
|
background-color: var(--error-bg-color);
|
|
}
|
|
|
|
span.warning, i.warning {
|
|
color: var(--warning-color);
|
|
}
|
|
|
|
div.warning {
|
|
border-color: var(--warning-color);
|
|
background-color: var(--warning-bg-color);
|
|
}
|
|
|
|
span.info, i.info {
|
|
color: var(--info-color);
|
|
}
|
|
|
|
div.info {
|
|
border-color: var(--info-color);
|
|
background-color: var(--info-bg-color);
|
|
}
|
|
|
|
|
|
/***
|
|
* Messages, errors, etc.
|
|
**/
|
|
#errors, #messages {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.errorOuter, .messageOuter {
|
|
display: inline-block;
|
|
}
|
|
|
|
.errorInner {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.errorInner, .messageInner {
|
|
padding: 1em;
|
|
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
input[data-entered=true]:invalid {
|
|
border-color: var(--error-color);
|
|
color: var(--error-color);
|
|
}
|