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
master
Aadhavan Srinivasan 1 month ago
parent 3aa4135a81
commit d1feca7003
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File

25
index.html
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save