a few changes in the popup look based on #38

_locales/en/messages.json

@@ -266,7 +266,7 @@
     "description": "Text displayed when no styles are installed for the current site"
   },
   "openManage": {
-    "message": "Manage installed styles",
+    "message": "Manage",
     "description": "Link to open the manage page."
   },
   "openOptionsManage": {
@@ -274,7 +274,7 @@
     "description": "Go to Options UI"
   },
   "openOptionsPopup": {
-    "message": "Options UI",
+    "message": "Options",
     "description": "Go to Options UI"
   },
   "openOptionsShortcuts": {

popup.css

@@ -1,13 +1,13 @@
 body {
-  width: 200px;
-  font-size: 13px;
+  width: 240px;
+  font-size: 12px;
   font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
 }
 input[type=checkbox] {
   outline: none;
 }
 #disable-all-wrapper {
-  padding: 0.2em 0 0.7em;	
+  padding: 0.7em 0 0.7em;
 }
 #disable-all-wrapper .main-controls {
   padding-top: 0.1em;
@@ -27,9 +27,6 @@ input[type=checkbox] {
   margin-bottom: 2px;
   display: block;
 }
-.actions {
-  font-size: x-small;
-}
 a, a:visited {
   color: black;
 }
@@ -49,14 +46,11 @@ a, a:visited {
 
 .entry {
   padding: 0.5em 0;
-  border-bottom: 1px solid black;
 }
 .entry:first-child {
   padding-top: 0;
 }
-.entry:last-child {
-  border-bottom: none;
-}
+
 body > DIV {
   border-bottom: 1px solid black;
   padding-bottom: 2px;
@@ -68,7 +62,7 @@ body.blocked > DIV {
 #installed {
   margin-top: 0.5em;
 }
-#installed.disabled .style-name {
+#installed .disabled .style-name {
   text-decoration: line-through;
 }
 #installed .actions a {
@@ -141,3 +135,54 @@ body:not(.blocked) #unavailable {
   color: inherit;
   text-decoration: underline;
 }
+
+  /* action buttons */
+#popup-options {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding: 1.2em 0;
+}
+#popup-options button {
+  margin: 0 2px;
+  width: 33%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+  /* margins */
+body {
+  margin: 0;
+}
+body>div:not(#installed) {
+  margin-left:0.75em;
+  margin-right:0.75em;
+}
+#unavailable {
+  margin-top: 0.75em;
+}
+#installed .entry {
+}
+  /* entries */
+#installed .entry {
+  display: flex;
+  align-items: center;
+  padding: 5px 0.75em;
+}
+#installed .entry:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+#installed .main-controls {
+  display: flex;
+  flex: 1;
+  width: calc(100% - 20px);
+  align-items: center;
+}
+#installed .main-controls label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 5px;
+}

popup.html

@@ -45,21 +45,21 @@
         </div>
         <div class="left-gutter"></div>
         <div class="main-controls">
-            <div id="manage-styles">
-                <button id="popup-manage-button" i18n-text="openManage"></button>
-            </div>
-            <div id="popup-options">
-                <button id="popup-options-button" i18n-text="openOptionsPopup">
-                    <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
-            </div>
             <div id="find-styles">
                 <a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
             </div>
-            <div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span>
+            <div id="write-style">
+                <span id="write-style-for" i18n-text="writeStyleFor"><br></span>
             </div>
         </div>
+    <!-- Actions -->
+    <div id="popup-options">
+        <button id="popup-manage-button" i18n-text="openManage"></button>
+        <button id="popup-options-button" i18n-text="openOptionsPopup">
+        <button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
+    </div>
     </div>
     <script src="popup.js"></script>
 </body>
 
-</html>
+</html>