bootstrap styling

template/index.html

@@ -91,9 +91,8 @@
                 </div>
             </div>
         </div>
-        <b-modal id="settings-modal" hide-footer lazy header-class="settings-header">
-            <template v-slot:modal-header="{ close }">
-                <ul class="nav nav-tabs card-header-tabs mx-0 px-3">
+        <b-modal id="settings-modal" hide-header hide-footer lazy>
+                <ul class="nav nav-tabs mx-n3 px-3 mb-3 mt-n3 pt-2 bg-light rounded-top">
                     <li class="nav-item">
                         <a class="nav-link" href="#" :class="{active: settings=='create'}" @click.prevent="settings='create'">New Feed</a>
                     </li>
@@ -104,7 +103,6 @@
                         <a class="nav-link" href="#" :class="{active: settings=='import'}" @click.prevent="settings='import'">Import/Export</a>
                     </li>
                 </ul>
-            </template>
             <div v-if="settings=='create'">
                 <label for="feed-url">URL</label>
                 <input id="feed-url" type="text" class="form-control">

template/static/stylesheets/app.css

@@ -1,3 +1,7 @@
+:root {
+  --color-primary: #007bff;
+}
+
 [v-cloak] {
   display: none !important;
 }
@@ -10,9 +14,18 @@ body {
   transition: none;
 }
 
+select.form-control {
+  -webkit-appearance: none;
+}
+
+select.form-control:not([multiple]):not([size]) {
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.6rem .6rem;
+  padding-right: 1.2rem;
+}
+
 .form-control:focus {
-  border-color: #80bdff !important;
-  box-shadow: inset 0 0 0 2px #80bdff !important;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(0,123,255,.25), inset 0 1px 1px rgba(16,22,26,.2);
 }
 
 .btn:focus {
@@ -67,7 +80,7 @@ body {
 }
 
 .feed-item:active, .nav-select input:checked + .menu-item {
-  background-color: #007bff;
+  background-color: var(--color-primary);
   color: white;
 }
 
@@ -88,8 +101,7 @@ body {
   padding-right: 0;
 }
 
-.settings-dropdown .dropdown-menu {
-  width: 200px;
+.dropdown-menu {
   box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.07);
 }
 
@@ -106,10 +118,27 @@ body {
   color: #dc3545!important;
 }
 
-.settings-header {
-  padding: .75rem 0 !important;
-}
-
 .modal-backdrop {
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+.nav-tabs .nav-link {
+  padding: .5rem 0;
+}
+
+.nav-tabs .nav-item + .nav-item {
+  margin-left: 1rem;
+}
+
+.nav-tabs .nav-link {
+  border: 0;
+  border-bottom: 3px solid transparent;
+  color: inherit;
+}
+
+.nav-tabs .nav-link.active {
+  color: inherit;
+  border-radius: 0 !important;
+  border-color: var(--color-primary);
+  background-color: transparent;
+}