Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make districts transparent; dim other languages when one is hovered; change default opacity of language

Browse Source
This commit is contained in:
Aadhavan Srinivasan
2025-03-07 15:45:27 -05:00
parent 3aa4135a81
commit d1feca7003
1 changed files with 22 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -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>