remove some custom css

mainly in navbars, where we were doing custom
things that bootstrap already did with classes.

This did require the removal of multiple class LESS inheritance for
navbar buttons, because it doesn't work properly. Seems like a LESS bug, but I'm not sure.

IPython/html/static/base/js/notificationwidget.js

@@ -33,7 +33,10 b' define(['
      * @method style
      */
     NotificationWidget.prototype.style = function () {
-        this.element.addClass('notification_widget');
+        // use explicit bootstrap classes here,
+        // because multiple inheritance in LESS doesn't work
+        // for this particular combination
+        this.element.addClass('notification_widget btn btn-xs navbar-btn');
     };
 
     /**

IPython/html/static/base/less/page.less

@@ -20,20 +20,15 b' body {'
 div#header {
     /* Initially hidden to prevent FLOUC */
     display: none;
-    margin-bottom: -6px;
-    position: fixed;
-    top: 0;
-    width: 100%;
     background-color: @body-bg;
-    min-height: 31px;
 
     /* Display over codemirror */
     z-index: 100;
 
     #header-container {
-        margin-bottom: 0px;
         padding-left: 30px;
         padding-bottom: 5px;
+        padding-top: 5px;
         .border-box-sizing();
     }
 
@@ -51,6 +46,8 b' div#header {'
 
 #ipython_notebook {
     padding-left: 0px;
+    padding-top: (@navbar-height - @logo_height) / 2;
+    padding-bottom: (@navbar-height - @logo_height) / 2;
 }
 
 #noscript {
@@ -65,7 +62,7 b' div#header {'
 
 #ipython_notebook img {
     font-family: Verdana, "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-    height: 24px;
+    height: @logo_height;
     text-decoration:none;
     color: black;
 }
@@ -85,9 +82,6 b' div#header {'
 input.ui-button {
     padding: 0.3em 0.9em;
 }
-.navbar span {
-  margin-top: 3px;
-}
 
 span#login_widget {
     float: right;
@@ -96,9 +90,7 b' span#login_widget {'
 span#login_widget > .button,
 #logout
 {
-    .btn();
     .btn-default();
-    .btn-sm();
 }
 
 .nav-header {

IPython/html/static/base/less/variables.less

@@ -4,11 +4,12 b''
 @text-color: @black;
 @font-size-base: 13px;
 @font-family-monospace: monospace;  // to allow user to customize their fonts
-@navbar-height: 36px;
+@navbar-height: 30px;
 @breadcrumb-color: darken(@border_color, 30%);
 @blockquote-font-size: inherit;
 @modal-inner-padding: 15px;
 @grid-float-breakpoint: 540px;
+@logo_height: 24px;
 
 // Disable modal slide-in from top animation.
 .modal {

IPython/html/static/notebook/less/kernelselector.less

@@ -3,9 +3,7 b''
     float:right;
 
     & > button {
-        .btn();
         .btn-default();
-        .btn-sm();
         
         & > span.caret {
             margin-top:0px;

IPython/html/static/notebook/less/menubar.less

@@ -1,13 +1,10 b''
 #menubar {
-  margin-top: 0px;
-  margin-bottom: -24px;
-  position: relative;
   .border-box-sizing();
 
   .navbar {
     border-top: 1px;
     border-radius: 0px 0px @border-radius-base @border-radius-base;
-    margin-bottom: 23px;
+    margin-bottom: 6px;
   }
   
   .navbar-toggle {
@@ -17,19 +14,6 b''
     clear: left;
   }
   
-  li.dropdown {
-    line-height: 12px;
-
-    a {
-      padding-top: 6px;
-      padding-bottom: 5px;
-    }
-  }
-
-  ul.navbar-right {
-    padding-top: 2px;
-    margin-bottom: 0px;
-  }
 }
 
 .nav-wrapper {
@@ -49,10 +33,6 b' ul#help_menu li a{'
     }
 }
 
-#menus {
-  min-height: 30px;
-}
-
 // Make sub menus work in BS3.
 // Credit: http://www.bootply.com/86684
 .dropdown-submenu{position:relative;}

IPython/html/static/notebook/less/notificationarea.less

@@ -1,13 +1,12 b''
 #notification_area {
     .pull-right();
-    
     z-index: 10;
 }
 
 .indicator_area {
     color: @navbar-default-link-color;
-    padding: 4px 3px;
-    margin: 0px;
+    margin-left: 5px;
+    margin-right: 5px;
     width: 11px;
     z-index: 10;
     text-align: center;
@@ -16,15 +15,11 b''
 #kernel_indicator {
     .pull-right();
     .indicator_area();
-
-    margin-right: 12px;
 }
 
 #modal_indicator {
     .pull-right();
     .indicator_area();
-    
-    margin-right: 5px;
 }
 
 .edit_mode_icon:before {

IPython/html/static/notebook/less/notificationwidget.less

@@ -1,19 +1,8 b''
 .notification_widget {
     color: @navbar-default-link-color;
-    padding: 1px 12px;
-    margin: 2px 4px;
     z-index: 10;
-    border-radius: @border-radius-base;
     background: @notification_widget_bg;
-    .pull-right();
-    .border-box-sizing();
-    .btn();
     .btn-default();
-    .btn-xs();
-
-    &.span {
-        padding-right:2px;
-    }
 }
 
 .notification_widget.warning {

IPython/html/static/notebook/less/savewidget.less

@@ -1,6 +1,5 b''
 span#save_widget {
-    padding: 0px 5px;
-    margin-top: 12px;
+    margin-top: 6px;
 }
 
 span#checkpoint_status, span#autosave_status {

IPython/html/static/style/ipython.min.css

@@ -495,7 +495,7 b' div.input {'
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
-  color: #000080;
+  color: navy;
   border-top: 1px solid transparent;
 }
 div.input_area > div.highlight {
@@ -767,7 +767,7 b' div.out_prompt_overlay:hover {'
   background: rgba(240, 240, 240, 0.5);
 }
 div.output_prompt {
-  color: #8b0000;
+  color: darkred;
 }
 /* This class is the outer container of all output sections. */
 div.output_area {
@@ -840,7 +840,7 b' div.output_area pre {'
   padding: 0;
   border: 0;
   vertical-align: baseline;
-  color: #000000;
+  color: black;
   background-color: transparent;
   border-radius: 0;
 }
@@ -1033,8 +1033,8 b' div.output_unrecognized a:hover {'
   margin-top: 1em;
 }
 .rendered_html hr {
-  color: #000000;
-  background-color: #000000;
+  color: black;
+  background-color: black;
 }
 .rendered_html pre {
   margin: 1em 2em;
@@ -1053,13 +1053,13 b' div.output_unrecognized a:hover {'
 .rendered_html table {
   margin-left: auto;
   margin-right: auto;
-  border: 1px solid #000000;
+  border: 1px solid black;
   border-collapse: collapse;
 }
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
-  border: 1px solid #000000;
+  border: 1px solid black;
   border-collapse: collapse;
   margin: 1em 2em;
 }
@@ -1559,4 +1559,4 b' h6:hover .anchor-link {'
   left: 0px !important;
   margin-left: 0px !important;
 }
-/*# sourceMappingURL=../style/ipython.min.css.map */
  No newline at end of file
+/*# sourceMappingURL=ipython.min.css.map */
  No newline at end of file

IPython/html/static/style/style.min.css

@@ -3636,7 +3636,7 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
 }
 .navbar {
   position: relative;
-  min-height: 36px;
+  min-height: 30px;
   margin-bottom: 18px;
   border: 1px solid transparent;
 }
@@ -3733,10 +3733,10 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
 }
 .navbar-brand {
   float: left;
-  padding: 9px 15px;
+  padding: 6px 15px;
   font-size: 17px;
   line-height: 18px;
-  height: 36px;
+  height: 30px;
 }
 .navbar-brand:hover,
 .navbar-brand:focus {
@@ -3753,8 +3753,8 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
   float: right;
   margin-right: 15px;
   padding: 9px 10px;
-  margin-top: 1px;
-  margin-bottom: 1px;
+  margin-top: -2px;
+  margin-bottom: -2px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
@@ -3778,7 +3778,7 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
   }
 }
 .navbar-nav {
-  margin: 4.5px -15px;
+  margin: 3px -15px;
 }
 .navbar-nav > li > a {
   padding-top: 10px;
@@ -3816,8 +3816,8 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
     float: left;
   }
   .navbar-nav > li > a {
-    padding-top: 9px;
-    padding-bottom: 9px;
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
   .navbar-nav.navbar-right:last-child {
     margin-right: -15px;
@@ -3841,8 +3841,8 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 2px;
-  margin-bottom: 2px;
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 @media (min-width: 768px) {
   .navbar-form .form-group {
@@ -3909,20 +3909,20 b' select[multiple].input-group-sm > .input-group-btn > .btn {'
   border-bottom-left-radius: 0;
 }
 .navbar-btn {
-  margin-top: 2px;
-  margin-bottom: 2px;
+  margin-top: -1px;
+  margin-bottom: -1px;
 }
 .navbar-btn.btn-sm {
-  margin-top: 3px;
-  margin-bottom: 3px;
+  margin-top: 0px;
+  margin-bottom: 0px;
 }
 .navbar-btn.btn-xs {
-  margin-top: 7px;
-  margin-bottom: 7px;
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 .navbar-text {
-  margin-top: 9px;
-  margin-bottom: 9px;
+  margin-top: 6px;
+  margin-bottom: 6px;
 }
 @media (min-width: 540px) {
   .navbar-text {
@@ -7751,19 +7751,17 b' body {'
 div#header {
   /* Initially hidden to prevent FLOUC */
   display: none;
-  margin-bottom: -6px;
-  position: fixed;
-  top: 0;
-  width: 100%;
   background-color: #ffffff;
-  min-height: 31px;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
   /* Display over codemirror */
   z-index: 100;
 }
 div#header #header-container {
-  margin-bottom: 0px;
   padding-left: 30px;
   padding-bottom: 5px;
+  padding-top: 5px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -7779,6 +7777,8 b' div#header .header-bar {'
 }
 #ipython_notebook {
   padding-left: 0px;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 #noscript {
   width: auto;
@@ -7810,77 +7810,14 b' div#header .header-bar {'
 input.ui-button {
   padding: 0.3em 0.9em;
 }
-.navbar span {
-  margin-top: 3px;
-}
 span#login_widget {
   float: right;
 }
 span#login_widget > .button,
 #logout {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-span#login_widget > .button:focus,
-#logout:focus,
-span#login_widget > .button:active:focus,
-#logout:active:focus,
-span#login_widget > .button.active:focus,
-#logout.active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-span#login_widget > .button:hover,
-#logout:hover,
-span#login_widget > .button:focus,
-#logout:focus {
-  color: #333333;
-  text-decoration: none;
-}
-span#login_widget > .button:active,
-#logout:active,
-span#login_widget > .button.active,
-#logout.active {
-  outline: 0;
-  background-image: none;
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}
-span#login_widget > .button.disabled,
-#logout.disabled,
-span#login_widget > .button[disabled],
-#logout[disabled],
-fieldset[disabled] span#login_widget > .button,
-fieldset[disabled] #logout {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-  box-shadow: none;
 }
 span#login_widget > .button:hover,
 #logout:hover,
@@ -8401,7 +8338,7 b' div.input {'
 }
 /* input_area and input_prompt must match in top border and margin for alignment */
 div.input_prompt {
-  color: #000080;
+  color: navy;
   border-top: 1px solid transparent;
 }
 div.input_area > div.highlight {
@@ -8673,7 +8610,7 b' div.out_prompt_overlay:hover {'
   background: rgba(240, 240, 240, 0.5);
 }
 div.output_prompt {
-  color: #8b0000;
+  color: darkred;
 }
 /* This class is the outer container of all output sections. */
 div.output_area {
@@ -8746,7 +8683,7 b' div.output_area pre {'
   padding: 0;
   border: 0;
   vertical-align: baseline;
-  color: #000000;
+  color: black;
   background-color: transparent;
   border-radius: 0;
 }
@@ -8939,8 +8876,8 b' div.output_unrecognized a:hover {'
   margin-top: 1em;
 }
 .rendered_html hr {
-  color: #000000;
-  background-color: #000000;
+  color: black;
+  background-color: black;
 }
 .rendered_html pre {
   margin: 1em 2em;
@@ -8959,13 +8896,13 b' div.output_unrecognized a:hover {'
 .rendered_html table {
   margin-left: auto;
   margin-right: auto;
-  border: 1px solid #000000;
+  border: 1px solid black;
   border-collapse: collapse;
 }
 .rendered_html tr,
 .rendered_html th,
 .rendered_html td {
-  border: 1px solid #000000;
+  border: 1px solid black;
   border-collapse: collapse;
   margin: 1em 2em;
 }
@@ -9700,59 +9637,9 b' select[multiple].celltoolbar select {'
   float: right;
 }
 #kernel_selector_widget > button {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
-  padding: 5px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-#kernel_selector_widget > button:focus,
-#kernel_selector_widget > button:active:focus,
-#kernel_selector_widget > button.active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-#kernel_selector_widget > button:hover,
-#kernel_selector_widget > button:focus {
-  color: #333333;
-  text-decoration: none;
-}
-#kernel_selector_widget > button:active,
-#kernel_selector_widget > button.active {
-  outline: 0;
-  background-image: none;
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}
-#kernel_selector_widget > button.disabled,
-#kernel_selector_widget > button[disabled],
-fieldset[disabled] #kernel_selector_widget > button {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-  box-shadow: none;
 }
 #kernel_selector_widget > button:hover,
 #kernel_selector_widget > button:focus,
@@ -9795,8 +9682,6 b' fieldset[disabled] #kernel_selector_widget > button.active {'
 }
 #menubar {
   margin-top: 0px;
-  margin-bottom: -24px;
-  position: relative;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -9804,7 +9689,7 b' fieldset[disabled] #kernel_selector_widget > button.active {'
 #menubar .navbar {
   border-top: 1px;
   border-radius: 0px 0px 4px 4px;
-  margin-bottom: 23px;
+  margin-bottom: 6px;
 }
 #menubar .navbar-toggle {
   float: left;
@@ -9812,17 +9697,6 b' fieldset[disabled] #kernel_selector_widget > button.active {'
 #menubar .navbar-collapse {
   clear: left;
 }
-#menubar li.dropdown {
-  line-height: 12px;
-}
-#menubar li.dropdown a {
-  padding-top: 6px;
-  padding-bottom: 5px;
-}
-#menubar ul.navbar-right {
-  padding-top: 2px;
-  margin-bottom: 0px;
-}
 .nav-wrapper {
   border-bottom: 1px solid #e7e7e7;
 }
@@ -9836,9 +9710,6 b' ul#help_menu li a {'
 ul#help_menu li a i {
   margin-right: -1.2em;
 }
-#menus {
-  min-height: 30px;
-}
 .dropdown-submenu {
   position: relative;
 }
@@ -9887,8 +9758,8 b' ul#help_menu li a i {'
 }
 .indicator_area {
   color: #777777;
-  padding: 4px 3px;
-  margin: 0px;
+  margin-left: 5px;
+  margin-right: 5px;
   width: 11px;
   z-index: 10;
   text-align: center;
@@ -9897,23 +9768,21 b' ul#help_menu li a i {'
   float: right !important;
   float: right;
   color: #777777;
-  padding: 4px 3px;
-  margin: 0px;
+  margin-left: 5px;
+  margin-right: 5px;
   width: 11px;
   z-index: 10;
   text-align: center;
-  margin-right: 12px;
 }
 #modal_indicator {
   float: right !important;
   float: right;
   color: #777777;
-  padding: 4px 3px;
-  margin: 0px;
+  margin-left: 5px;
+  margin-right: 5px;
   width: 11px;
   z-index: 10;
   text-align: center;
-  margin-right: 5px;
 }
 .edit_mode_icon:before {
   display: inline-block;
@@ -10007,68 +9876,11 b' ul#help_menu li a i {'
 }
 .notification_widget {
   color: #777777;
-  padding: 1px 12px;
-  margin: 2px 4px;
   z-index: 10;
   background: rgba(240, 240, 240, 0.5);
-  float: right !important;
-  float: right;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
-  padding: 1px 5px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-.notification_widget:focus,
-.notification_widget:active:focus,
-.notification_widget.active:focus {
-  outline: thin dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.notification_widget:hover,
-.notification_widget:focus {
-  color: #333333;
-  text-decoration: none;
-}
-.notification_widget:active,
-.notification_widget.active {
-  outline: 0;
-  background-image: none;
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}
-.notification_widget.disabled,
-.notification_widget[disabled],
-fieldset[disabled] .notification_widget {
-  cursor: not-allowed;
-  pointer-events: none;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-  box-shadow: none;
 }
 .notification_widget:hover,
 .notification_widget:focus,
@@ -10106,9 +9918,6 b' fieldset[disabled] .notification_widget.active {'
   color: #ffffff;
   background-color: #333333;
 }
-.notification_widget.span {
-  padding-right: 2px;
-}
 .notification_widget.warning {
   color: #ffffff;
   background-color: #f0ad4e;
@@ -10351,8 +10160,7 b' div#pager .ui-resizable-handle {'
   flex: 1;
 }
 span#save_widget {
-  padding: 0px 5px;
-  margin-top: 12px;
+  margin-top: 6px;
 }
 span#checkpoint_status,
 span#autosave_status {
@@ -10583,4 +10391,4 b' span#autosave_status {'
 #terminado-container {
   margin: 8px;
 }
-/*# sourceMappingURL=../style/style.min.css.map */

  No newline at end of file
+/*# sourceMappingURL=style.min.css.map */

  No newline at end of file

IPython/html/templates/notebook.html

@@ -42,7 +42,7 b' class="notebook_app"'
 </span>
 
 <span id="kernel_selector_widget" class="pull-right dropdown">
-    <button class="dropdown-toggle" data-toggle="dropdown" type='button' id="current_kernel_spec">
+  <button class="dropdown-toggle btn btn-sm navbar-btn" data-toggle="dropdown" type='button' id="current_kernel_spec">
         <span class='kernel_name'>Kernel</span>
         <span class="caret"></span> 
     </button>
@@ -57,19 +57,17 b' class="notebook_app"'
 <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
-            <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+            <button type="button" class="btn btn-default navbar-btn navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
               <i class="fa fa-bars"></i>
               <span class="navbar-text">Menu</span>
             </button>
-            <ul class="nav navbar-nav navbar-right">
-              <li id="kernel_indicator">
+            <p id="kernel_indicator" class="navbar-text">
                 <i id="kernel_indicator_icon"></i>
-              </li>
-              <li id="modal_indicator">
+            </p>
+            <p id="modal_indicator" class="navbar-text">
                 <i id="modal_indicator_icon"></i>
-              </li>
-              <li id="notification_area"></li>
-            </ul>
+            </p>
+            <span id="notification_area"></span>
             <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                 <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>

IPython/html/templates/page.html

@@ -80,7 +80,7 b''
   </div>
 </noscript>
 
-<div id="header" class="navbar navbar-static-top">
+<div id="header" class="navbar navbar-fixed-top">
   <div id="header-container" class="container">
   <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree" alt='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
 
@@ -88,9 +88,9 b''
 
     <span id="login_widget">
       {% if logged_in %}
-        <button id="logout">Logout</button>
+        <button id="logout" class="btn btn-sm navbar-btn">Logout</button>
       {% elif login_available and not logged_in %}
-        <button id="login">Login</button>
+        <button id="login" class="btn btn-sm navbar-btn">Login</button>
       {% endif %}
     </span>