fix(dicts): fix longman styles

crimx · Aug 27, 2018 · 4dc74c4 · 4dc74c4
1 parent f86f77e
commit 4dc74c4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 6 deletions.
diff --git a/src/components/dictionaries/longman/_style.scss b/src/components/dictionaries/longman/_style.scss
@@ -1,11 +1,12 @@
 .dictLongman-Speaker {
   // cover the original bulet point
   position: absolute;
-  left: 0.8em;
+  top: 0.2em;
+  left: 0.6em;
   background: white;
 
   margin: 0;
-  padding: 0;
+  padding: 0 1px;
   border: none;
   color: inherit;
   pointer-events: auto;
@@ -14,6 +15,12 @@
   &:hover {
     outline: none;
   }
+
+  svg {
+    fill: #555;
+    width: 1em;
+    height: 1em;
+  }
 }
 
 .dictLongman-Wordfams {
@@ -99,10 +106,13 @@
 }
 
 .dictLongman-Entry {
+  font-family: arial, helvetica, sans-serif;
+
   .SubEntry,
   .EXAMPLE,
   .Sense,
   .newline,
+  .ColloExa,
   .GramExa {
     display: block;
   }
@@ -119,6 +129,7 @@
   }
 
   .POS,
+  .SYN,
   .sensenum,
   .GRAM,
   .EXPR,
@@ -174,6 +185,7 @@
     }
   }
 
+  .SYN .synopp,
   .SIGNPOST {
     color: #fff;
     font-size: 79%;
@@ -221,6 +233,31 @@
       color: #999;
     }
   }
+
+  .ldoceEntry .synopp, .ldoceEntry .FREQ,
+  .ldoceEntry .AC {
+    display: inline-block;
+    font-style: normal;
+    font-weight: bold;
+    text-transform: uppercase;
+    border-radius: 5px;
+    border: solid 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  .COLLO {
+    font-weight: bold;
+    margin-left: 10px;
+  }
+
+  .neutral {
+    color: #333;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    background: none;
+  }
 }
 
 .dictLongman-Box {
@@ -243,13 +280,15 @@
   .CROSS,
   .dont_say,
   .BADEXA {
-    padding: 0.16em 0.25em;
-    color: #fff;
-    background: #C0392B;
+    color: #f9690e;
   }
 
   .CROSS {
     padding-left: 0.4em;
+
+    .neutral {
+      color: #f9690e;
+    }
   }
 
   .BADEXA {

diff --git a/src/components/dictionaries/longman/engine.ts b/src/components/dictionaries/longman/engine.ts
@@ -94,7 +94,14 @@ function handleDOMLex (
       const mp3 = $speaker.dataset.srcMp3
       if (mp3) {
         $speaker.outerHTML =
-          `<button data-src-mp3="${mp3}" title="${$speaker.title}" class="dictLongman-Speaker">🔊</button>`
+          `<button data-src-mp3="${mp3}" title="${$speaker.title}" class="dictLongman-Speaker">
+            <svg width="1.2em" height="1.2em" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14.35 20.237H5.77c-1.2 0-2.17.97-2.17 2.17v13.188c0 1.196.97 2.168 2.17 2.168h8.58c.387 0 .766.103 1.1.3l13.748 12.8c1.445.85 3.268-.192 3.268-1.87V9.006c0-1.677-1.823-2.72-3.268-1.87l-13.747 12.8c-.334.196-.713.3-1.1.3z"/>
+              <path d="M36.772 39.98c-.31 0-.62-.118-.856-.355-.476-.475-.476-1.243 0-1.716 5.212-5.216 5.212-13.702 0-18.916-.476-.473-.476-1.24 0-1.716.473-.474 1.24-.474 1.715 0 6.162 6.16 6.162 16.185 0 22.347-.234.237-.546.356-.858.356z"/>
+              <path d="M41.07 44.886c-.312 0-.62-.118-.86-.356-.473-.475-.473-1.24 0-1.715 7.573-7.57 7.573-19.89 0-27.462-.473-.474-.473-1.24 0-1.716.478-.473 1.243-.473 1.717 0 8.517 8.52 8.517 22.377 0 30.893-.238.238-.547.356-.857.356z"/>
+              <path d="M44.632 50.903c-.312 0-.622-.118-.858-.356-.475-.474-.475-1.24 0-1.716 5.287-5.283 8.198-12.307 8.198-19.77 0-7.466-2.91-14.49-8.198-19.775-.475-.474-.475-1.24 0-1.715.475-.474 1.24-.474 1.717 0 5.745 5.744 8.91 13.375 8.91 21.49 0 8.112-3.165 15.744-8.91 21.487-.237.238-.547.356-.858.356z"/>
+            </svg>
+          </button>`
       }
     }
   )