Updated Bulma!

13 files changed, 157 insertions, 86 deletions

diff --git a/public/css/_sass/components/breadcrumb.sass b/public/css/_sass/components/breadcrumb.sass
index bcbd15b..3d7f4eb 100644
--- a/public/css/_sass/components/breadcrumb.sass
+++ b/public/css/_sass/components/breadcrumb.sass
@@ -5,7 +5,7 @@ $breadcrumb-item-active-color: $text-strong !default
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $grey-light !default
+$breadcrumb-item-separator-color: $border-hover !default
 
 .breadcrumb
   @extend %block
diff --git a/public/css/_sass/components/card.sass b/public/css/_sass/components/card.sass
index ff12395..3cdf000 100644
--- a/public/css/_sass/components/card.sass
+++ b/public/css/_sass/components/card.sass
@@ -1,16 +1,21 @@
 $card-color: $text !default
-$card-background-color: $white !default
-$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$card-background-color: $scheme-main !default
+$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 
 $card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
-$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-padding: 0.75rem 1rem !default
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
 $card-header-weight: $weight-bold !default
 
 $card-content-background-color: transparent !default
+$card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border !default
+$card-footer-border-top: 1px solid $border-light !default
+$card-footer-padding: 0.75rem !default
+
+$card-media-margin: $block-spacing !default
 
 .card
   background-color: $card-background-color
@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
   display: flex
   flex-grow: 1
   font-weight: $card-header-weight
-  padding: 0.75rem
+  padding: $card-header-padding
   &.is-centered
     justify-content: center
 
@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: 0.75rem
+  padding: $card-header-padding
 
 .card-image
   display: block
@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
 
 .card-content
   background-color: $card-content-background-color
-  padding: 1.5rem
+  padding: $card-content-padding
 
 .card-footer
   background-color: $card-footer-background-color
@@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: 0.75rem
+  padding: $card-footer-padding
   &:not(:last-child)
     border-right: $card-footer-border-top
 
@@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
 
 .card
   .media:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $card-media-margin
diff --git a/public/css/_sass/components/dropdown.sass b/public/css/_sass/components/dropdown.sass
index aad663a..d62a6d8 100644
--- a/public/css/_sass/components/dropdown.sass
+++ b/public/css/_sass/components/dropdown.sass
@@ -1,17 +1,21 @@
-$dropdown-content-background-color: $white !default
+$dropdown-menu-min-width: 12rem !default
+
+$dropdown-content-background-color: $scheme-main !default
 $dropdown-content-arrow: $link !default
 $dropdown-content-offset: 4px !default
+$dropdown-content-padding-bottom: 0.5rem !default
+$dropdown-content-padding-top: 0.5rem !default
 $dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $grey-dark !default
-$dropdown-item-hover-color: $black !default
+$dropdown-item-color: $text !default
+$dropdown-item-hover-color: $scheme-invert !default
 $dropdown-item-hover-background-color: $background !default
 $dropdown-item-active-color: $link-invert !default
 $dropdown-item-active-background-color: $link !default
 
-$dropdown-divider-background-color: $border !default
+$dropdown-divider-background-color: $border-light !default
 
 .dropdown
   display: inline-flex
@@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
 .dropdown-menu
   display: none
   left: 0
-  min-width: 12rem
+  min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
   top: 100%
@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
   background-color: $dropdown-content-background-color
   border-radius: $dropdown-content-radius
   box-shadow: $dropdown-content-shadow
-  padding-bottom: 0.5rem
-  padding-top: 0.5rem
+  padding-bottom: $dropdown-content-padding-bottom
+  padding-top: $dropdown-content-padding-top
 
 .dropdown-item
   color: $dropdown-item-color
diff --git a/public/css/_sass/components/level.sass b/public/css/_sass/components/level.sass
index a3b7716..608f291 100644
--- a/public/css/_sass/components/level.sass
+++ b/public/css/_sass/components/level.sass
@@ -1,3 +1,5 @@
+$level-item-spacing: ($block-spacing / 2) !default
+
 .level
   @extend %block
   align-items: center
@@ -18,7 +20,7 @@
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        margin-right: 0.75rem
+        margin-right: $level-item-spacing
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -41,7 +43,7 @@
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $level-item-spacing
 
 .level-left,
 .level-right
@@ -55,7 +57,7 @@
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: 0.75rem
+        margin-right: $level-item-spacing
 
 .level-left
   align-items: center
diff --git a/public/css/_sass/components/list.sass b/public/css/_sass/components/list.sass
index eccd034..bc99428 100644
--- a/public/css/_sass/components/list.sass
+++ b/public/css/_sass/components/list.sass
@@ -1,5 +1,5 @@
-$list-background-color: $white !default
-$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$list-background-color: $scheme-main !default
+$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
 $list-radius: $radius !default
 
 $list-item-border: 1px solid $border !default
@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
     border-top-left-radius: $list-radius
     border-top-right-radius: $list-radius
   &:last-child
-    border-top-left-radius: $list-radius
-    border-top-right-radius: $list-radius
+    border-bottom-left-radius: $list-radius
+    border-bottom-right-radius: $list-radius
   &:not(:last-child)
     border-bottom: $list-item-border
   &.is-active
@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
 
 a.list-item
   background-color: $list-item-hover-background-color
-  cursor: pointer
\ No newline at end of file
+  cursor: pointer
diff --git a/public/css/_sass/components/media.sass b/public/css/_sass/components/media.sass
index e8542d8..65939fc 100644
--- a/public/css/_sass/components/media.sass
+++ b/public/css/_sass/components/media.sass
@@ -1,3 +1,5 @@
+$media-border-color: rgba($border, 0.5) !default
+
 .media
   align-items: flex-start
   display: flex
@@ -5,7 +7,7 @@
   .content:not(:last-child)
     margin-bottom: 0.75rem
   .media
-    border-top: 1px solid rgba($border, 0.5)
+    border-top: 1px solid $media-border-color
     display: flex
     padding-top: 0.75rem
     .content:not(:last-child),
@@ -16,7 +18,7 @@
       & + .media
         margin-top: 0.5rem
   & + .media
-    border-top: 1px solid rgba($border, 0.5)
+    border-top: 1px solid $media-border-color
     margin-top: 1rem
     padding-top: 1rem
   // Sizes
diff --git a/public/css/_sass/components/menu.sass b/public/css/_sass/components/menu.sass
index 727df36..3de7e18 100644
--- a/public/css/_sass/components/menu.sass
+++ b/public/css/_sass/components/menu.sass
@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
 $menu-item-active-background-color: $link !default
 
 $menu-list-border-left: 1px solid $border !default
+$menu-list-line-height: 1.25 !default
+$menu-list-link-padding: 0.5em 0.75em !default
+$menu-nested-list-margin: 0.75em !default
+$menu-nested-list-padding-left: 0.75em !default
 
 $menu-label-color: $text-light !default
+$menu-label-font-size: 0.75em !default
+$menu-label-letter-spacing: 0.1em !default
+$menu-label-spacing: 1em !default
 
 .menu
   font-size: $size-normal
@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
     font-size: $size-large
 
 .menu-list
-  line-height: 1.25
+  line-height: $menu-list-line-height
   a
     border-radius: $menu-item-radius
     color: $menu-item-color
     display: block
-    padding: 0.5em 0.75em
+    padding: $menu-list-link-padding
     &:hover
       background-color: $menu-item-hover-background-color
       color: $menu-item-hover-color
@@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
   li
     ul
       border-left: $menu-list-border-left
-      margin: 0.75em
-      padding-left: 0.75em
+      margin: $menu-nested-list-margin
+      padding-left: $menu-nested-list-padding-left
 
 .menu-label
   color: $menu-label-color
-  font-size: 0.75em
-  letter-spacing: 0.1em
+  font-size: $menu-label-font-size
+  letter-spacing: $menu-label-letter-spacing
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 1em
+    margin-top: $menu-label-spacing
   &:not(:last-child)
-    margin-bottom: 1em
+    margin-bottom: $menu-label-spacing
diff --git a/public/css/_sass/components/message.sass b/public/css/_sass/components/message.sass
index badac5d..89e4cc9 100644
--- a/public/css/_sass/components/message.sass
+++ b/public/css/_sass/components/message.sass
@@ -13,10 +13,11 @@ $message-body-color: $text !default
 $message-body-padding: 1.25em 1.5em !default
 $message-body-radius: $radius !default
 
-$message-body-pre-background-color: $white !default
+$message-body-pre-background-color: $scheme-main !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default
+$message-colors: $colors !default
 
 .message
   @extend %block
@@ -36,21 +37,33 @@ $message-header-body-border-width: 0 !default
   &.is-large
     font-size: $size-large
   // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
-    $color-luminance: colorLuminance($color)
-    $darken-percentage: $color-luminance * 70%
-    $desaturate-percentage: $color-luminance * 30%
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    $color-light: null
+    $color-dark: null
+
+    @if length($components) >= 3
+      $color-light: nth($components, 3)
+      @if length($components) >= 4
+        $color-dark: nth($components, 4)
+      @else
+        $color-luminance: colorLuminance($color)
+        $darken-percentage: $color-luminance * 70%
+        $desaturate-percentage: $color-luminance * 30%
+        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+    @else
+      $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+      $color-light: lighten($color, $color-lightning)
+
     &.is-#{$name}
-      background-color: lighten($color, $color-lightning)
+      background-color: $color-light
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+        color: $color-dark
 
 .message-header
   align-items: center
diff --git a/public/css/_sass/components/modal.sass b/public/css/_sass/components/modal.sass
index b6fb1a1..c3a5a0c 100644
--- a/public/css/_sass/components/modal.sass
+++ b/public/css/_sass/components/modal.sass
@@ -1,6 +1,6 @@
 $modal-z: 40 !default
 
-$modal-background-background-color: rgba($black, 0.86) !default
+$modal-background-background-color: rgba($scheme-invert, 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -25,7 +25,7 @@ $modal-card-title-size: $size-4 !default
 $modal-card-foot-radius: $radius-large !default
 $modal-card-foot-border-top: 1px solid $border !default
 
-$modal-card-body-background-color: $white !default
+$modal-card-body-background-color: $scheme-main !default
 $modal-card-body-padding: 20px !default
 
 .modal
@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 10px
+      margin-right: 0.5em
 
 .modal-card-body
   +overflow-touch
diff --git a/public/css/_sass/components/navbar.sass b/public/css/_sass/components/navbar.sass
index dc90dd9..664558f 100644
--- a/public/css/_sass/components/navbar.sass
+++ b/public/css/_sass/components/navbar.sass
@@ -1,4 +1,4 @@
-$navbar-background-color: $white !default
+$navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
 $navbar-height: 3.25rem !default
@@ -7,10 +7,10 @@ $navbar-padding-horizontal: 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
-$navbar-item-color: $grey-dark !default
+$navbar-item-color: $text !default
 $navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $white-bis !default
-$navbar-item-active-color: $black !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
+$navbar-item-active-color: $scheme-invert !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
@@ -24,7 +24,7 @@ $navbar-tab-active-border-bottom-color: $link !default
 $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
-$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-background-color: $scheme-main !default
 $navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
@@ -32,9 +32,9 @@ $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
 
-$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-color: $scheme-invert !default
 $navbar-dropdown-item-hover-background-color: $background !default
 $navbar-dropdown-item-active-color: $link !default
 $navbar-dropdown-item-active-background-color: $background !default
@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
           color: $color-invert
         & > a.navbar-item,
         .navbar-link
+          &:focus,
           &:hover,
           &.is-active
             background-color: darken($color, 5%)
@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
             color: $color-invert
           & > a.navbar-item,
           .navbar-link
+            &:focus,
             &:hover,
             &.is-active
               background-color: darken($color, 5%)
@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
           .navbar-link
             &::after
               border-color: $color-invert
+        .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
           background-color: darken($color, 5%)
@@ -135,6 +138,7 @@ body
 
 .navbar-brand
   a.navbar-item
+    &:focus,
     &:hover
       background-color: transparent
 
@@ -167,6 +171,8 @@ body
 a.navbar-item,
 .navbar-link
   cursor: pointer
+  &:focus,
+  &:focus-within,
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
@@ -187,6 +193,7 @@ a.navbar-item,
     border-bottom: 1px solid transparent
     min-height: $navbar-height
     padding-bottom: calc(0.5rem - 1px)
+    &:focus,
     &:hover
       background-color: $navbar-tab-hover-background-color
       border-bottom-color: $navbar-tab-hover-border-bottom-color
@@ -238,7 +245,7 @@ a.navbar-item,
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px rgba($black, 0.1)
+    box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -250,7 +257,7 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -286,16 +293,20 @@ a.navbar-item,
     &.is-transparent
       a.navbar-item,
       .navbar-link
+        &:focus,
         &:hover,
         &.is-active
           background-color: transparent !important
       .navbar-item.has-dropdown
         &.is-active,
+        &.is-hoverable:focus,
+        &.is-hoverable:focus-within,
         &.is-hoverable:hover
           .navbar-link
             background-color: transparent !important
       .navbar-dropdown
         a.navbar-item
+          &:focus,
           &:hover
             background-color: $navbar-dropdown-item-hover-background-color
             color: $navbar-dropdown-item-hover-color
@@ -320,9 +331,11 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        box-shadow: 0 -8px 8px rgba($scheme-invert, 0.1)
         top: auto
     &.is-active,
+    &.is-hoverable:focus,
+    &.is-hoverable:focus-within,
     &.is-hoverable:hover
       .navbar-dropdown
         display: block
@@ -345,7 +358,7 @@ a.navbar-item,
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px rgba($black, 0.1)
+    box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
     left: 0
@@ -358,6 +371,7 @@ a.navbar-item,
       white-space: nowrap
     a.navbar-item
       padding-right: 3rem
+      &:focus,
       &:hover
         background-color: $navbar-dropdown-item-hover-background-color
         color: $navbar-dropdown-item-hover-color
@@ -395,7 +409,7 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px rgba($scheme-invert, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,
@@ -413,9 +427,10 @@ a.navbar-item,
   .navbar-link
     &.is-active
       color: $navbar-item-active-color
-    &.is-active:not(:hover)
+    &.is-active:not(:focus):not(:hover)
       background-color: $navbar-item-active-background-color
   .navbar-item.has-dropdown
+    &:focus,
     &:hover,
     &.is-active
       .navbar-link
diff --git a/public/css/_sass/components/pagination.sass b/public/css/_sass/components/pagination.sass
index 9b8fd03..822c2e8 100644
--- a/public/css/_sass/components/pagination.sass
+++ b/public/css/_sass/components/pagination.sass
@@ -1,8 +1,13 @@
-$pagination-color: $grey-darker !default
-$pagination-border-color: $grey-lighter !default
+$pagination-color: $text-strong !default
+$pagination-border-color: $border !default
 $pagination-margin: -0.25rem !default
 $pagination-min-width: $control-height !default
 
+$pagination-item-font-size: 1em !default
+$pagination-item-margin: 0.25rem !default
+$pagination-item-padding-left: 0.5em !default
+$pagination-item-padding-right: 0.5em !default
+
 $pagination-hover-color: $link-hover !default
 $pagination-hover-border-color: $link-hover-border !default
 
@@ -12,9 +17,9 @@ $pagination-focus-border-color: $link-focus-border !default
 $pagination-active-color: $link-active !default
 $pagination-active-border-color: $link-active-border !default
 
-$pagination-disabled-color: $grey !default
-$pagination-disabled-background-color: $grey-lighter !default
-$pagination-disabled-border-color: $grey-lighter !default
+$pagination-disabled-color: $text-light !default
+$pagination-disabled-background-color: $border !default
+$pagination-disabled-border-color: $border !default
 
 $pagination-current-color: $link-invert !default
 $pagination-current-background-color: $link !default
@@ -22,9 +27,10 @@ $pagination-current-border-color: $link !default
 
 $pagination-ellipsis-color: $grey-light !default
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination
+  @extend %block
   font-size: $size-normal
   margin: $pagination-margin
   // Sizes
@@ -56,11 +62,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-ellipsis
   @extend %control
   @extend %unselectable
-  font-size: 1em
-  padding-left: 0.5em
-  padding-right: 0.5em
+  font-size: $pagination-item-font-size
   justify-content: center
-  margin: 0.25rem
+  margin: $pagination-item-margin
+  padding-left: $pagination-item-padding-left
+  padding-right: $pagination-item-padding-right
   text-align: center
 
 .pagination-previous,
diff --git a/public/css/_sass/components/panel.sass b/public/css/_sass/components/panel.sass
index b9d339e..3c32be6 100644
--- a/public/css/_sass/components/panel.sass
+++ b/public/css/_sass/components/panel.sass
@@ -1,13 +1,17 @@
-$panel-item-border: 1px solid $border !default
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 
-$panel-heading-background-color: $background !default
+$panel-heading-background-color: $border-light !default
 $panel-heading-color: $text-strong !default
 $panel-heading-line-height: 1.25 !default
-$panel-heading-padding: 0.5em 0.75em !default
+$panel-heading-padding: 0.75em 1em !default
 $panel-heading-radius: $radius !default
 $panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-light !default
+$panel-heading-weight: $weight-bold !default
 
+$panel-tabs-font-size: 0.875em !default
 $panel-tab-border-bottom: 1px solid $border !default
 $panel-tab-active-border-bottom-color: $link-active-border !default
 $panel-tab-active-color: $link-active !default
@@ -24,22 +28,32 @@ $panel-block-active-icon-color: $link !default
 $panel-icon-color: $text-light !default
 
 .panel
+  border-radius: $panel-radius
+  box-shadow: $panel-shadow
   font-size: $size-normal
   &:not(:last-child)
-    margin-bottom: 1.5rem
+    margin-bottom: $panel-margin
+  // Colors
+  @each $name, $components in $message-colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    &.is-#{$name}
+      .panel-heading
+        background-color: $color
+        color: $color-invert
+      .panel-tabs a.is-active
+        border-bottom-color: $color
+      .panel-block.is-active .panel-icon
+        color: $color
 
-.panel-heading,
 .panel-tabs,
 .panel-block
-  border-bottom: $panel-item-border
-  border-left: $panel-item-border
-  border-right: $panel-item-border
-  &:first-child
-    border-top: $panel-item-border
+  &:not(:last-child)
+    border-bottom: $panel-item-border
 
 .panel-heading
   background-color: $panel-heading-background-color
-  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  border-radius: $panel-radius $panel-radius 0 0
   color: $panel-heading-color
   font-size: $panel-heading-size
   font-weight: $panel-heading-weight
@@ -49,7 +63,7 @@ $panel-icon-color: $text-light !default
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: 0.875em
+  font-size: $panel-tabs-font-size
   justify-content: center
   a
     border-bottom: $panel-tab-border-bottom
@@ -85,6 +99,9 @@ $panel-icon-color: $text-light !default
     color: $panel-block-active-color
     .panel-icon
       color: $panel-block-active-icon-color
+  &:last-child
+    border-bottom-left-radius: $panel-radius
+    border-bottom-right-radius: $panel-radius
 
 a.panel-block,
 label.panel-block
diff --git a/public/css/_sass/components/tabs.sass b/public/css/_sass/components/tabs.sass
index 21ed90a..8c28c25 100644
--- a/public/css/_sass/components/tabs.sass
+++ b/public/css/_sass/components/tabs.sass
@@ -12,7 +12,7 @@ $tabs-boxed-link-radius: $radius !default
 $tabs-boxed-link-hover-background-color: $background !default
 $tabs-boxed-link-hover-border-bottom-color: $border !default
 
-$tabs-boxed-link-active-background-color: $white !default
+$tabs-boxed-link-active-background-color: $scheme-main !default
 $tabs-boxed-link-active-border-color: $border !default
 $tabs-boxed-link-active-border-bottom-color: transparent !default