Name Days: Namespaced CSS

lib/DDG/Goodie/NameDays.pm

@@ -136,7 +136,7 @@ handle remainder => sub {
 
     # Add the header
     $html = '<span>' . $header . '</span>' .
-        '<div class="zci__content"><table class="name-days">' .
+        '<div class="zci--name_days"><table class="name-days">' .
         $html . '</table></div>';
 
     return $text, html => $html;

share/goodie/name_days/name_days.css

@@ -1,62 +1,58 @@
-.zci__body, .zero_click_answer {
-    color: #333;
-}
-
-.name-days-country {
+.zci--name_days .name-days-country {
     padding-right: 2em;
     white-space: nowrap;
     vertical-align: top;
     width: 25%;
 }
 
-.name-days-dates {
+.zci--name_days .name-days-dates {
     width: 75%;
 }
 
-.name-days-country-name, .name-days-tile {
+.zci--name_days .name-days-country-name, .zci--name_days .name-days-tile {
     line-height: 1.6;
 }
 
-.name-days-country-name {
+.zci--name_days .name-days-country-name {
     vertical-align: middle;
     padding-left: 0.4em;
 }
 
-.name-days-country .flag-sm {
+.zci--name_days .name-days-country .flag-sm {
     vertical-align: middle;
 }
 
-.name-days-country, .name-days-dates {
+.zci--name_days .name-days-country, .zci--name_days .name-days-dates {
     border-bottom: solid 1px #DDD;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
 }
 
-tr:last-of-type .name-days-country, tr:last-of-type .name-days-dates {
+tr:last-of-type .zci--name_days .name-days-country, tr:last-of-type .zci--name_days .name-days-dates {
     border-bottom: none;
 }
 
-.name-days-tile span {
+.zci--name_days .name-days-tile span {
     padding: 0 0.5em 0 0;
 }
 
-.name-days-tile {
+.zci--name_days .name-days-tile {
     display: inline-block;
     min-width: 33%;
 }
 
 @media (max-width: 600px) {
-    .name-days-tile {
+    .zci--name_days .name-days-tile {
         min-width: 50%;
     }
 }
 
 @media (max-width: 400px) {
-    .name-days-tile {
+    .zci--name_days .name-days-tile {
         width: 100%;
     }
 }
 
-table.name-days {
+.zci--name_days {
     max-width: 44em;
 }