gui: Improve layout of accordion titles

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3172

gui/default/assets/css/overrides.css

@@ -33,29 +33,6 @@ ul+h5 {
     display: block;
 }
 
-.panel-title {
-    position: relative;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-a.panel-heading:hover {
-    text-decoration: none;
-}
-
-identicon {
-    display: inline-block;
-    position: relative;
-    width: 1em;
-    height: 1em;
-    line-height: 1;
-    margin-right: 5px;
-}
-
-.identicon {
-    width: 1em;
-    height: 1em;
-}
-
 .checkbox {
     margin-top: 0px;
 }
@@ -73,13 +50,8 @@ identicon {
     word-wrap:break-word;
 }
 
-.panel-heading .fa, .modal-header .fa {
-    margin-right: 10px;
-}
-
-.panel-heading {
-    position: relative;
-    overflow: hidden;
+.modal-header .fa {
+    margin-right: 15px;
 }
 
 .text-monospace {
@@ -183,6 +155,44 @@ table.table-condensed td.no-overflow-ellipse {
     margin-left: 60px;
 }
 
+/**
+ * Accordion Title bars
+ */
+
+.panel-icon{
+    float:left;
+    margin-right: 15px;
+}
+
+.panel-heading {
+    display: block;
+    cursor: pointer;
+    position: relative;
+}
+
+.panel-heading .panel-title-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.panel-heading .panel-status {
+    margin-left:15px;
+}
+
+identicon {
+    display: inline-block;
+    position: relative;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+}
+
+.identicon {
+    width: 1em;
+    height: 1em;
+}
+
 /**
  * Progress bars with centered text
  */

gui/default/assets/css/theme.css

@@ -18,4 +18,8 @@
 .li-column {
     background-color: rgb(236, 240, 241);
     border-radius: 3px;
-}
+}
+
+.panel-heading:hover, .panel-heading:focus {
+    text-decoration: none;
+}