Merge pull request #253 from toasted-nutbread/style-editor

Popup style preview + themes

1 files changed, 42 insertions, 54 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 8a4cf4a7..7ebad090 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -30,9 +30,31 @@
  * General
  */
 
+html.yomichan-float:not([data-yomichan-theme]),
+html.yomichan-float:not([data-yomichan-theme]) body {
+    background-color: transparent;
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
 hr {
     padding: 0px;
     margin: 0px;
+    border: 0;
+    border-top-width: 1px;
+    border-top-style: solid;
+}
+
+ol, ul {
+    margin-top: 0;
+    margin-bottom: 10px;
 }
 
 #spinner {
@@ -60,40 +82,10 @@ hr {
     padding-bottom: 10px;
 }
 
-.tag-default {
-    background-color: #8a8a91;
-}
-
-.tag-name {
-    background-color: #5cb85c;
-}
-
-.tag-expression {
-    background-color: #f0ad4e;
-}
-
-.tag-popular {
-    background-color: #0275d8;
-}
-
-.tag-frequent {
-    background-color: #5bc0de;
-}
-
-.tag-archaism {
-    background-color: #d9534f;
-}
-
-.tag-dictionary {
-    background-color: #aa66cc;
-}
-
-.tag-frequency {
-    background-color: #5cb85c;
-}
-
-.tag-partOfSpeech {
-    background-color: #565656;
+html:root.yomichan-float .entry,
+html:root.yomichan-float .note {
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .actions .disabled {
@@ -103,6 +95,7 @@ hr {
 
 .actions .disabled img {
     -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
     opacity: 0.25;
 }
 
@@ -111,7 +104,7 @@ hr {
 }
 
 .actions {
-    display: inline-block;
+    display: block;
     float: right;
 }
 
@@ -127,19 +120,11 @@ hr {
 }
 
 .expression .kanji-link {
-    border-bottom: 1px #777 dashed;
-    color: #333;
+    border-bottom-width: 1px;
+    border-bottom-style: dashed;
     text-decoration: none;
 }
 
-.expression-popular, .expression-popular .kanji-link {
-    color: #0275d8;
-}
-
-.expression-rare, .expression-rare .kanji-link {
-    color: #999;
-}
-
 .expression .peek-wrapper {
     font-size: 14px;
     white-space: nowrap;
@@ -173,7 +158,6 @@ hr {
 }
 
 .reasons {
-    color: #777;
     display: inline-block;
 }
 
@@ -199,14 +183,6 @@ hr {
     content: " | ";
 }
 
-.glossary li {
-    color: #777;
-}
-
-.glossary-item {
-    color: #000;
-}
-
 div.glossary-item.compact-glossary {
     display: inline;
 }
@@ -234,3 +210,15 @@ div.glossary-item.compact-glossary {
 .entry:not(.entry-current) .current {
     display: none;
 }
+
+.label {
+    display: inline;
+    padding: 0.2em 0.6em 0.3em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+}