188 lines
3.0 KiB
CSS
188 lines
3.0 KiB
CSS
:root {
|
|
--fc-stroke-width: 0.1%;
|
|
--fc-stroke-dasharray: 5px;
|
|
}
|
|
|
|
@media print {
|
|
.noprint {
|
|
display: none;
|
|
}
|
|
#place_list {
|
|
position: static;
|
|
}
|
|
}
|
|
|
|
svg .highlight {
|
|
fill: lightgrey !important;
|
|
}
|
|
svg .text_highlight {
|
|
fill: black !important;
|
|
}
|
|
|
|
svg .same_hl .bg {
|
|
fill: lightgrey !important;
|
|
}
|
|
svg .same_hl .text {
|
|
fill: black !important;
|
|
}
|
|
|
|
/* places list */
|
|
body:not(.places-list) #places-list {
|
|
display: none;
|
|
}
|
|
|
|
#places-list {
|
|
overflow: scroll;
|
|
height: 100%;
|
|
width: var(--fc-tool-size, 18%);
|
|
white-space: nowrap;
|
|
}
|
|
/*
|
|
#places-list>ul>li {
|
|
font-size: 70%;
|
|
}
|
|
*/
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
margin-left: 5px;
|
|
margin-top: 5px;
|
|
padding: 0;
|
|
}
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/* Place hilight */
|
|
body.place_hl .square, .square {
|
|
display: none;
|
|
}
|
|
|
|
/* Colorise places */
|
|
body.place_color .square { display: inline; color: transparent; }
|
|
|
|
/* death age */
|
|
#death-age {
|
|
margin: 5px;
|
|
}
|
|
|
|
body.death-age svg .DA0 { fill: hsl(30, 100%, 90%)}
|
|
body.death-age svg .DA1 { fill: hsl(30, 100%, 80%)}
|
|
body.death-age svg .DA2 { fill: hsl(30, 100%, 70%)}
|
|
body.death-age svg .DA3 { fill: hsl(30, 100%, 60%)}
|
|
body.death-age svg .DA4 { fill: hsl(30, 100%, 50%)}
|
|
body.death-age svg .DA5 { fill: hsl(30, 100%, 45%)}
|
|
body.death-age svg .DA6 { fill: hsl(30, 100%, 40%)}
|
|
body.death-age svg .DA7 { fill: hsl(30, 100%, 35%)}
|
|
|
|
body:not(.death-age) #death-age {
|
|
display: none;
|
|
}
|
|
|
|
body.death-age span.DA0 { color: hsl(30, 100%, 90%)}
|
|
body.death-age span.DA1 { color: hsl(30, 100%, 80%)}
|
|
body.death-age span.DA2 { color: hsl(30, 100%, 70%)}
|
|
body.death-age span.DA3 { color: hsl(30, 100%, 60%)}
|
|
body.death-age span.DA4 { color: hsl(30, 100%, 50%)}
|
|
body.death-age span.DA5 { color: hsl(30, 100%, 45%)}
|
|
body.death-age span.DA6 { color: hsl(30, 100%, 40%)}
|
|
body.death-age span.DA7 { color: hsl(30, 100%, 35%)}
|
|
|
|
.arrow {
|
|
color: transparent;
|
|
}
|
|
body.death-age .hl .arrow {
|
|
color: black;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
svg .link {
|
|
cursor: pointer;
|
|
}
|
|
|
|
path {
|
|
stroke: transparent;
|
|
stroke-width: var(--fc-stroke-width);
|
|
fill: transparent;
|
|
}
|
|
circle, path.contour {
|
|
stroke: #A0A0A0;
|
|
stroke-width: var(--fc-stroke-width);
|
|
fill: transparent;
|
|
}
|
|
path.middle {
|
|
stroke: #A0A0A0;
|
|
stroke-dasharray: var(--fc-stroke-dasharray);
|
|
stroke-width: var(--fc-stroke-width);
|
|
fill: transparent;
|
|
}
|
|
text {
|
|
fill: black;
|
|
text-anchor: middle;
|
|
}
|
|
textPath {
|
|
dominant-baseline: central;
|
|
}
|
|
.dates { font-size: 80%; }
|
|
.none {
|
|
display: none;
|
|
}
|
|
|
|
.icon {
|
|
fill: transparent;
|
|
}
|
|
.icon:hover {
|
|
fill: green;
|
|
}
|
|
|
|
.no-link {
|
|
fill: transparent;
|
|
}
|
|
.no-link:hover {
|
|
fill: brown;
|
|
}
|
|
|
|
#standard {
|
|
font-size: 100%;
|
|
fill: transparent;
|
|
}
|
|
|
|
#places-list, #death-age {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
svg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
#buttons {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
background-color: white;
|
|
margin: 2px;
|
|
}
|
|
.button {
|
|
font-size: 140%;
|
|
text-align: center;
|
|
}
|
|
.button:hover {
|
|
cursor: pointer;
|
|
}
|
|
.disabled {
|
|
color: lightgrey;
|
|
}
|
|
|
|
svg.mono text {
|
|
font-family: monospace;
|
|
}
|