Fix table captions style

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>

6 files changed, 27 insertions, 0 deletions

diff --git a/themes/metro/scss/_tables.scss b/themes/metro/scss/_tables.scss
index 3fccfa177f..54cbf43fb8 100644
--- a/themes/metro/scss/_tables.scss
+++ b/themes/metro/scss/_tables.scss
@@ -1,4 +1,6 @@
 .table {
+  caption-side: top;
+
   td {
     touch-action: manipulation;
     vertical-align: middle;
@@ -14,6 +16,13 @@
       color: $th-color;
     }
   }
+
+  caption {
+    font-family: $font-family-bold;
+    background-color: $th-background;
+    font-weight: normal;
+    text-align: center;
+  }
 }
 
 @media only screen and (min-width: 768px) {
diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
index d456bf442d..2aa15c2061 100644
--- a/themes/metro/scss/_variables.scss
+++ b/themes/metro/scss/_variables.scss
@@ -194,6 +194,7 @@ $table-striped-order: even;
 $table-hover-color: $th-pointer-color;
 $table-hover-bg: $browse-marker-background;
 $table-border-width: 0;
+$table-caption-color: $table-head-color;
 
 // Buttons
 
diff --git a/themes/original/scss/_tables.scss b/themes/original/scss/_tables.scss
index 6273a3e345..a29155cdc5 100644
--- a/themes/original/scss/_tables.scss
+++ b/themes/original/scss/_tables.scss
@@ -1,5 +1,6 @@
 .table {
   border-collapse: separate;
+  caption-side: top;
 
   td {
     touch-action: manipulation;
@@ -13,6 +14,12 @@
   thead th {
     border-bottom: 0;
   }
+
+  caption {
+    background-color: $table-head-bg;
+    font-weight: bold;
+    text-align: center;
+  }
 }
 
 .table-striped {
diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
index 4b40f74abf..95770053d5 100644
--- a/themes/original/scss/_variables.scss
+++ b/themes/original/scss/_variables.scss
@@ -93,6 +93,7 @@ $table-hover-bg: $browse-pointer-background;
 $table-hover-color: $browse-pointer-color;
 $table-head-color: $th-color;
 $table-head-bg: $th-background;
+$table-caption-color: $table-head-color;
 
 // Dropdowns
 
diff --git a/themes/pmahomme/scss/_tables.scss b/themes/pmahomme/scss/_tables.scss
index 88fde3a692..119be5ed1e 100644
--- a/themes/pmahomme/scss/_tables.scss
+++ b/themes/pmahomme/scss/_tables.scss
@@ -1,4 +1,6 @@
 .table {
+  caption-side: top;
+
   th,
   td {
     text-shadow: 0 1px 0 #fff;
@@ -18,6 +20,12 @@
     border-right: 1px solid #fff;
     background-image: linear-gradient(#fff, #ccc);
   }
+
+  caption {
+    background-color: $th-background;
+    font-weight: bold;
+    text-align: center;
+  }
 }
 
 .table-hover {
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
index 8a881157e6..79fb66e210 100644
--- a/themes/pmahomme/scss/_variables.scss
+++ b/themes/pmahomme/scss/_variables.scss
@@ -88,6 +88,7 @@ $table-striped-bg: #dfdfdf;
 $table-hover-color: $browse-pointer-color;
 $table-border-color: #fff;
 $table-border-width: 0;
+$table-caption-color: $table-head-color;
 
 // Buttons