fix button mode for #sync button + simplify css

Author: tophf

src/manage.html

@@ -228,7 +228,6 @@ <h1 i18n="styleManager"></h1>
             <i class=i-plus></i>
           </button>
         </a>
-
         <div id="update-all">
           <template data-id="updateAll">
             <button id="apply-all-updates" i18n="applyAllUpdates"></button>
@@ -237,8 +236,7 @@ <h1 i18n="styleManager"></h1>
           </template>
         </div>
 
-
-        <div id="backup" class="flex wrap center-items">
+        <div id="backup" class="flex wrap">
           <button id="sync-styles" class="icon flex center-items" i18n="title:optionsCustomizeSync">
             <img hidden>
             <i class=i-cloud></i>

src/manage/index.js

@@ -59,6 +59,7 @@ function initSyncButton(sync) {
     const img = el.$('img');
     const msg = drive ? syncUtil.getStatusText(val) : '';
     el.title = t('optionsCustomizeSync');
+    el.classList.toggle('icon', !hasFav);
     $toggleDataset(el, 'cloud', drive);
     elMsg.textContent = msg === syncUtil.pending || msg === syncUtil.connected ? '' : msg;
     img.hidden = !hasFav;

src/manage/manage.css

@@ -133,19 +133,15 @@ h1 {
       }
     }
   }
-  #backup {
-    $gap: $iconGapY;
-    margin: calc($pad/4) -$gap 0 0;
-    > * {
-      margin: 0 $gap $gap 0;
-    }
-    p {
-      word-break: break-word;
-      font-size: smaller;
-      user-select: text;
-      color: var(--accent-1);
-      margin-left: 4px;
-    }
+}
+#backup {
+  gap: $iconGapY;
+  p {
+    word-break: break-word;
+    font-size: smaller;
+    user-select: text;
+    color: var(--accent-1);
+    margin-left: 4px;
   }
 }
 #backup-hint {
@@ -167,9 +163,6 @@ h1 {
   white-space: normal;
   text-align: left;
 }
-#add-style {
-  margin-right: 1em;
-}
 #sync-styles {
   &[data-cloud] {
     &::before {
@@ -182,9 +175,6 @@ h1 {
       color: var(--accent-1);
     }
   }
-  i {
-    line-height: calc(14px * 1.2);
-  }
   img {
     width: 16px;
   }