|
|
|
|
@ -34,8 +34,9 @@
|
|
|
|
|
stroke: red;
|
|
|
|
|
/* There has to be a fill, even if it's transparent, to allow
|
|
|
|
|
hover events to be recognized on the inside. */
|
|
|
|
|
fill: black;
|
|
|
|
|
fill-opacity: 0.0;
|
|
|
|
|
/* fill: black;
|
|
|
|
|
fill-opacity: 0.0; */
|
|
|
|
|
fill-opacity: 0.8;
|
|
|
|
|
stroke-width: 1;
|
|
|
|
|
}
|
|
|
|
|
.languageText, .romanizationText {
|
|
|
|
|
@ -48,6 +49,10 @@
|
|
|
|
|
.language:hover ~ .languageText {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
.language:hover ~ .romanizationText {
|
|
|
|
|
visibility: visible;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.testClass:hover {
|
|
|
|
|
fill: red;
|
|
|
|
|
cursor: default;
|
|
|
|
|
@ -57,6 +62,8 @@
|
|
|
|
|
stroke: white;
|
|
|
|
|
stroke-width: 0.25;
|
|
|
|
|
transition: fill 0.3s;
|
|
|
|
|
fill: none;
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
}
|
|
|
|
|
.language:hover {
|
|
|
|
|
stroke-width: 2;
|
|
|
|
|
@ -75,6 +82,18 @@
|
|
|
|
|
.loading, .htmx-request.loading-indicator /* While request is being made */ {
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Dim all other states */
|
|
|
|
|
/* Kinda wild that you can do this in plain CSS */
|
|
|
|
|
#indiaMap:has(.language:hover) .language:not(:hover) {
|
|
|
|
|
fill-opacity: 0.5;
|
|
|
|
|
transition: fill-opacity 0.3s;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#indiaMap .language:hover {
|
|
|
|
|
fill-opacity: 1;
|
|
|
|
|
transition: fill-opacity 0.3s;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
@ -89,7 +108,7 @@
|
|
|
|
|
<progress id="loading-screen" class="loading-indicator"></progress>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<svg id = "indiaMap" width="1000" height="1000"></svg>
|
|
|
|
|
<svg id = "indiaMap" width="1200" height="1200"></svg>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" src="index.js"></script>
|
|
|
|
|
|
