fix: make the options page responsive and improve dark theme

Additionally, keep only one link to the full changelog instead of two

src/_locales/en/messages.json

@@ -66,19 +66,16 @@
     "message": "Quick bookmarking"
   },
   "options_about": {
-    "message": "About the add-on"
+    "message": "About"
   },
   "options_release_open_changelog": {
     "message": "Show the release notes when the add-on is updated"
   },
   "options_release_changelog_github": {
     "message": "The release notes of the add-on are now accessible on GitHub."
   },
-  "options_release_latest_changelog": {
-    "message": "Access the latest release notes"
-  },
   "options_release_full_changelog": {
-    "message": "Access the full changelog"
+    "message": "Access the changelog"
   },
   "options_ff_built_in_note": {
     "message": "Those settings only apply to the built-in bookmarking system of Firefox. They allow you to select in which folder (and in which position of this folder) the new bookmarks will be added. It only affects bookmarks added through the built-in Firefox bookmark icon or shortcut (Ctrl+D), through the context menu or via the bookmarks menu."

src/_locales/fr/messages.json

@@ -74,11 +74,8 @@
   "options_release_changelog_github": {
     "message": "Les notes de versions sont maintenant consultables sur GitHub."
   },
-  "options_release_latest_changelog": {
-    "message": "Accéder aux dernières notes de versions"
-  },
   "options_release_full_changelog": {
-    "message": "Accéder à l’ensemble des notes de versions"
+    "message": "Accéder aux notes de versions"
   },
   "options_ff_built_in_note": {
     "message": "Ces paramètres ne s’appliquent qu’au système de marquage interne à Firefox. Ils vous permettent de sélectionner à quel endroit (et à quelle position) les nouveaux marque-pages sont ajoutés. Cela n’affecte que les marque-pages créés via l’icône de marquage ou le raccourci (Ctrl+D) intégrés de Firefox, via le menu contextuel ou via le menu des marque-pages."

src/_locales/hu/messages.json

@@ -66,19 +66,16 @@
     "message": "Gyors könyvjelzõzés"
   },
   "options_about": {
-    "message": "A kiegészítõ névjegye"
+    "message": "About"
   },
   "options_release_open_changelog": {
     "message": "Show the release notes when the add-on is updated"
   },
   "options_release_changelog_github": {
     "message": "The release notes of the add-on are now accessible on GitHub."
   },
-  "options_release_latest_changelog": {
-    "message": "Access the latest release notes"
-  },
   "options_release_full_changelog": {
-    "message": "Access the full changelog"
+    "message": "Access the changelog"
   },
   "options_ff_built_in_note": {
     "message": "Those settings only apply to the built-in bookmarking system of Firefox. They allow you to select in which folder (and in which position of this folder) the new bookmarks will be added. It only affects bookmarks added through the built-in Firefox bookmark icon or shortcut (Ctrl+D), through the context menu or via the bookmarks menu."

src/_locales/ru/messages.json

@@ -66,19 +66,16 @@
     "message": "Быстрые закладки"
   },
   "options_about": {
-    "message": "Об этом расширении"
+    "message": "About"
   },
   "options_release_open_changelog": {
     "message": "Показывать примечания к релизам при каждом обновлении расширения"
   },
   "options_release_changelog_github": {
     "message": "The release notes of the add-on are now accessible on GitHub."
   },
-  "options_release_latest_changelog": {
-    "message": "Access the latest release notes"
-  },
   "options_release_full_changelog": {
-    "message": "Access the full changelog"
+    "message": "Access the changelog"
   },
   "options_ff_built_in_note": {
     "message": "Эти настройки применяются только к встроенной (в Firefox) системе закладок. Они позволяют выбрать папку (и позицию внутри неё) куда будут добавляться новые закладки. Это затронет только закладки, добавляемые через встроенные в Firefox элементы управления: иконку закладок, горячие клавиши (Ctrl+D), кнопка и пункты в контекстных меню или меню закладок."

src/options/css/custom.css

@@ -1,33 +1,46 @@
+/* ======================== */
+/* THEMES                   */
+/* ======================== */
+
 :root {
     --primary-color: #3273dc;
     --font-color: #4a4a4a;
     --font-color-focus: #363636;
+    --font-color-navbar: #4a4a4a;
     --bg-color: #fff;
     --bg-color-alternate: #f5f5f5;
     --bg-color-notification: var(--bg-color-alternate);
     --bg-color-notification-global:  var(--bg-color-alternate);
     --bg-color-box: var(--bg-color);
+    --bg-color-box-shadow: rgba(10,10,10,.1);
+    --bg-color-navbar-active: #e8e8e8;
     --article-border-color: #dbdbdb;
 }
 
 [data-theme="dark"] {
     --primary-color: #209cee;
     --font-color: #fff;
     --font-color-focus: #f3f3f3;
+    --font-color-navbar: #2d2d2d;
     --bg-color: #2d2d2d;
     --bg-color-alternate: #4a4a4a;
     --bg-color-notification: var(--bg-color-alternate);
     --bg-color-notification-global: var(--bg-color-alternate);
     --bg-color-box: var(--bg-alternate);
+    --bg-color-box-shadow: rgba(240,240,240,.1);
+    --bg-color-navbar-active: #e8e8e8;
     --article-border-color: #dbdbdb;
 }
 
+/* ======================== */
+/* MAIN ELEMENTS            */
+/* ======================== */
+
 html {
     background-color: var(--bg-color);
 }
 
 body {
-    padding: 2rem;
     font-family: "Open Sans", sans-serif;
     color: var(--font-color);
 }
@@ -48,6 +61,64 @@ a:hover {
     color: var(--font-color);
 }
 
+#navbar-title {
+    font-weight: 400;
+    font-size: 2rem;
+}
+
+.navbar.is-light {
+	background-color: var(--bg-color-alternate);
+}
+
+.navbar.has-shadow {
+	box-shadow: 0 2px 0 0 var(--bg-color-alternate);
+}
+
+.navbar-menu {
+    background-color: var(--bg-color-alternate);
+}
+
+.navbar.is-light .navbar-burger {
+    color: var(--font-color);
+}
+
+.navbar.is-light .navbar-burger:hover {
+    background-color: var(--bg-color-navbar-active);
+    color: var(--font-color-navbar);
+}
+
+
+a.navbar-item span,
+a.navbar-item.is-active span svg {
+    fill: var(--font-color);
+    color: var(--font-color);
+}
+
+a.navbar-item.is-active span,
+a.navbar-item.is-active span svg,
+a.navbar-item:hover,
+a.navbar-item:hover p,
+a.navbar-item:hover span,
+a.navbar-item:hover span svg {
+    fill: var(--font-color-navbar);
+    color: var(--font-color-navbar);
+}
+
+.navbar.is-light .navbar-brand .navbar-link.is-active,
+.navbar.is-light .navbar-brand .navbar-link:hover,
+.navbar.is-light .navbar-brand > a.navbar-item.is-active,
+.navbar.is-light .navbar-brand > a.navbar-item:hover {
+	background-color: var(--bg-color-navbar-active);
+	color: var(--font-color);
+}
+
+.navbar-link.is-active,
+.navbar-link:hover,
+a.navbar-item.is-active,
+a.navbar-item:hover {
+	background-color: var(--bg-color-navbar-active);
+}
+
 .notification {
     background-color: var(--bg-color-notification);
 }
@@ -65,17 +136,18 @@ a:hover {
     color: var(--font-color);
 }
 
-#tab_container .container_item {
+#tab_container .container-item {
     display: none;
 }
 
-#tab_container .container_item.is-active {
+#tab_container .container-item.is-active {
     display: block;
 }
 
 .box {
     background-color: var(--bg-color-box);
     color: var(--font-color);
+    box-shadow: 0 2px 3px var(--bg-color-box-shadow),0 0 0 1px var(--bg-color-box-shadow);
 }
 
 .field, article {
@@ -91,6 +163,10 @@ a:hover {
     margin-bottom: 2em;
 }
 
+hr {
+    background-color: var(--bg-color-alternate);;
+}
+
 .label {
     color: var(--font-color-focus);
 }
@@ -104,33 +180,6 @@ a:hover {
     opacity: 0.65;
 }
 
-.tabs.is-small-medium{
-    font-size: 1rem
-}
-
-.tabs a {
-    color: var(--font-color);
-}
-
-.tabs.is-boxed li.is-active a {
-    background-color: var(--bg-color);
-    color: var(--primary-color);
-}
-
-.tabs.is-boxed a {
-    color: var(--font-color);
-}
-
-.tabs.is-boxed a:hover {
-    background-color: var(--bg-color-alternate);
-    color: var(--font-color);
-}
-
-.tab-icon {
-    font-size: 1.4rem;
-    margin-right: 0.2em !important;
-}
-
 .release-info {
     margin-right: 0.8rem;
 }
@@ -166,15 +215,18 @@ a:hover {
     border-color: var(--font-color);
 }
 
-
 /* ======================== */
-/* ====== SVG icons ======= */
+/* SVG ICONS                */
 /* ======================== */
 
 .svg-icon-tab {
-    fill: var(--font-color);
-    width: 1.5rem;
-    height: 1.5rem;
+    display: inline-flex;
+    align-self: center;
+}
+
+.svg-icon-tab svg {
+    height:1.2rem;
+    width:1.2rem;
 }
 
 .svg-icon-link {
@@ -195,22 +247,36 @@ a:hover {
 }
 
 /* ======================== */
-/* ===== Theme switch ===== */
+/* THEME SWITCH             */
 /* ======================== */
 
-#theme-switch {
-    padding-left: 3.5rem;
-}
-
 .theme-switch-icon-left {
-    padding-right: 0.3rem;
-}
-
-.theme-switch-wrapper {
-    float:right;
-    clear:right;
+    padding-right: 0.25rem;
 }
 
 .theme-switch-wrapper .switch[type="checkbox"] + label {
     padding-top: 0.7rem;
 }
+
+/* ======================== */
+/* MEDIA QUERIES            */
+/* ======================== */
+
+@media only screen and (max-width: 420px) {
+    #navbar-title {
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+    .baseline svg {
+        top: .125em;
+        position: relative;
+    }
+
+    .svg-icon-tab svg,
+    .svg-icon-link,
+    .svg-icon-dropdown {
+        width: 1em;
+        height: 1rem;
+    }
+}