Improve appearance of inline-markers

Change-Id: I61685d0f548b729a55295eda5f9eb44e130fa6e5
KorAP · Jul 11, 2024 · 6e02652 · 6e02652
1 parent 22b008a
commit 6e02652
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/dev/demo/all.html b/dev/demo/all.html
@@ -231,7 +231,7 @@ <h2>Einstellungen</h2>
         <div class="match-wrap">
 	        <div class="snippet startMore endMore">
 	          <div class="flag"></div>
-                                  <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match"><span class="inline-marker" data-key="who" data-value="Mai Thi Nguyen-Kim"></span><span class="inline-marker" data-key="start" data-value="0:00"></span><span class="inline-marker" data-key="end" data-value="01:20"></span>Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><!--<span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>-->
+                                  <span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><span class="match"><span class="inline-marker" data-key="who" data-value="Mai Thi Nguyen-Kim"></span><span class="inline-marker" data-key="start" data-value="0:00"></span><span class="inline-marker" data-key="end" data-value="01:20"></span><span class="inline-marker" data-key="fine" data-value=""></span>Hey</span><span class="context-right">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><!--<span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>-->
 	      <div class="tokenInfo"></div>
 	      </div>
       </div>

diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
@@ -225,14 +225,16 @@ body.no-js #search > ol > li:active,
       background-color: transparent;
     }
 
-    span.inline-marker {
+    span.inline-marker[data-key][data-value]:not([data-value=""]) {
+      font-size: 85%;
+      text-shadow:none;
       font-weight: normal;
       color: $dark-grey;
       &::before, &::after {
         display: inline-block !important;
         border-width: 2px;
         border-radius: 0;
-        margin: 0 3pt;
+        margin: 0;
         padding:  0 4pt;
       }
       &::before {
@@ -242,13 +244,14 @@ body.no-js #search > ol > li:active,
         border-bottom-left-radius: 5px;
         border-width-right: 0;
         background-color: $dark-orange  !important;
-        content: attr(data-key) ': ';
+        content: attr(data-key) ':';
       }
 
       &::after {
         border-width-left: 0;
         margin-left: 0;
-        padding-left: 0;
+        margin-right: 3pt;
+        padding-left: 1pt;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
         background-color: $dark-orange  !important;