style fixes

3 files changed, 86 insertions, 136 deletions

diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css
index 29871daf..5289392a 100644
--- a/ext/fg/css/client.css
+++ b/ext/fg/css/client.css
@@ -16,15 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+
 iframe#yomichan-popup {
-    all:              initial;
+    all: initial;
     background-color: #fff;
-    border:           1px solid #999;
-    box-shadow:       0 0 10px rgba(0, 0, 0, .5);
-    height:           250px;
-    position:         fixed;
-    resize:           both;
-    visibility:       hidden;
-    width:            400px;
-    z-index:          2147483647;
+    border: 1px solid #999;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
+    height: 250px;
+    position: fixed;
+    resize: both;
+    visibility: hidden;
+    width: 400px;
+    z-index: 2147483647;
 }
diff --git a/ext/fg/css/frame.css b/ext/fg/css/frame.css
index 27aaadb6..9697ba2e 100644
--- a/ext/fg/css/frame.css
+++ b/ext/fg/css/frame.css
@@ -3,7 +3,7 @@
  * Author: Alex Yatskov <alex@foosoft.net>
  *
  * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
+ * it under the entrys of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
  *
@@ -16,41 +16,47 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* common styles */
+
+/*
+ * Fonts
+ */
 
 @font-face {
     font-family: kanji-stroke-orders;
-    src:         url('../ttf/kanji-stroke-orders.ttf');
+    src: url('../ttf/kanji-stroke-orders.ttf');
 }
+
 @font-face {
     font-family: vl-gothic-regular;
-    src:         url('../ttf/vl-gothic-regular.ttf');
+    src: url('../ttf/vl-gothic-regular.ttf');
 }
 
-body {
-    background-color: #fff;
-    color:            #333;
-    font-family:      helvetica neue, helvetica, arial, sans-serif;
-    font-size:        14px;
-    line-height:      1.42857143;
-    overflow-y:       auto;
-    padding:          5px;
+
+/*
+ * General
+ */
+
+hr {
+    margin-top: 0.8em;
+    margin-bottom: 0.8em;
 }
 
-.tag {
-    border-radius:  0.25em;
-    color:          #fff;
-    cursor:         default;
-    display:        inline;
-    font-size:      75%;
-    font-weight:    700;
-    line-height:    1;
-    padding:        0.2em 0.6em 0.3em;
-    text-align:     center;
-    vertical-align: baseline;
-    white-space:    nowrap;
+.spinner {
+    bottom: 5px;
+    display: none;
+    position: fixed;
+    right: 5px;
+}
+
+#orphan {
+    display: none;
 }
 
+
+/*
+ * Entries
+ */
+
 .tag-default {
     background-color: #8a8a91;
 }
@@ -79,126 +85,64 @@ body {
     background-color: #aa66cc;
 }
 
-.action-bar {
-    float: right;
-}
-
-.action-bar:after {
-    clear:   both;
-    content: '';
-    display: block;
-}
-
-.action-bar .disabled {
+.actions .disabled {
     pointer-events: none;
-    cursor:         default;
+    cursor: default;
 }
 
-.action-bar .disabled img {
+.actions .disabled img {
     -webkit-filter: grayscale(100%);
-    opacity:        0.25;
+    opacity: 0.25;
 }
 
-.action-bar .pending {
+.actions .pending {
     visibility: hidden;
 }
 
-.spinner {
-    bottom:   5px;
-    display:  none;
-    position: fixed;
-    right:    5px;
-}
-
-hr {
-  background-color: #fff;
-  border:           none;
-  border-top:       1px dotted #ccc;
-  margin-top:       0.8em;
-  margin-bottom:    0.8em;
-  height:           1px;
+.actions {
+    display: inline-block;
+    float: right;
 }
 
-#orphan {
-    display: none;
+.actions:after {
+    clear: both;
+    content: '';
+    display: block;
 }
 
-/* term styles */
-
-.term-expression {
-    display:     inline-block;
+.expression {
+    display: inline-block;
     font-family: vl-gothic-regular;
-    font-size:   24px;
+    font-size: 24px;
 }
 
-.term-expression a {
-    border-bottom:   1px #777 dashed;
-    color:           #333;
+.expression a {
+    border-bottom: 1px #777 dashed;
+    color: #333;
     text-decoration: none;
 }
 
-.term-reasons {
-    color:   #777;
+.reasons {
+    color: #777;
     display: inline-block;
 }
 
-.term-glossary ol, .term-glossary ul {
+.glossary ol, .glossary ul {
     padding-left: 1.4em;
 }
 
-.term-glossary li {
+.glossary li {
     color: #777;
 }
 
-.term-glossary-group {
-    margin-top:    0.4em;
-    margin-bottom: 0.4em;
-}
-
-.term-glossary-item {
-    color:       #000;
-    font-family: vl-gothic-regular;
-}
-
-/* kanji styles */
-
-.kanji-glyph {
-    font-family:    kanji-stroke-orders;
-    font-size:      120px;
-    line-height:    120px;
-    padding:        0.01em;
-    vertical-align: top;
-}
-
-.kanji-reading table {
-    padding: 0.3em, 0.3em;
+.glossary-item {
+    color: #000;
 }
 
-.kanji-reading th {
-    color:          #777;
-    font-weight:    bold;
-    text-align:     right;
+.glyph {
+    font-family: kanji-stroke-orders;
+    font-size: 120px;
+    line-height: 120px;
+    padding: 0.01em;
     vertical-align: top;
 }
-
-.kanji-reading td {
-    font-family: vl-gothic-regular;
-}
-
-.kanji-glossary ol {
-    padding-left: 1.4em;
-}
-
-.kanji-glossary li {
-    color: #777;
-}
-
-.kanji-glossary-group {
-    padding-bottom: 0.7em;
-    padding-top:    0.7em;
-}
-
-.kanji-glossary-item {
-    color:       #000;
-    font-family: vl-gothic-regular;
-}
diff --git a/ext/fg/frame.html b/ext/fg/frame.html
index bf7f0f7b..14fd63c1 100644
--- a/ext/fg/frame.html
+++ b/ext/fg/frame.html
@@ -3,22 +3,27 @@
     <head>
         <meta charset="UTF-8">
         <title></title>
+        <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
         <link rel="stylesheet" href="css/frame.css">
     </head>
     <body>
-        <div class="spinner">
-            <img src="img/spinner.gif">
-        </div>
+        <div class="container-fluid">
+            <div class="spinner">
+                <img src="img/spinner.gif">
+            </div>
 
-        <div id="content"></div>
-        <div id="orphan">
-            <h1>Yomichan Updated!</h1>
-            <p>The Yomichan extension has been updated to a new version! In order to continue viewing definitions on this page you must reload this tab or restart your browser.</p>
-        </div>
+            <div id="content"></div>
 
-        <script src="../lib/jquery-3.1.1.min.js"></script>
-        <script src="../lib/wanakana.min.js"></script>
-        <script src="js/util.js"></script>
-        <script src="js/frame.js"></script>
+            <div id="orphan">
+                <h1>Yomichan Updated!</h1>
+                <p>The Yomichan extension has been updated to a new version! In order to continue viewing definitions on this page you must reload this tab or restart your browser.</p>
+            </div>
+
+            <script src="../lib/jquery-3.1.1.min.js"></script>
+            <script src="../lib/wanakana.min.js"></script>
+            <script src="js/util.js"></script>
+            <script src="js/frame.js"></script>
+        </div>
     </body>
 </html>