1 files changed, 81 insertions, 0 deletions
diff --git a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
index e44e0e0f2c..2cf453fd5b 100644
--- a/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
+++ b/plugins/CoreHome/angularjs/period-selector/period-selector.directive.less
@@ -1,10 +1,91 @@
 [piwik-period-selector] {
   display: inline-block;
 
+  &.compare-dropdown-open {
+    label[for=comparePeriodEndDate] {
+      visibility: hidden;
+    }
+
+    #comparePeriodEndDate .input-field {
+      position: static; // needed when dropdown is open, since dropdown content is position: absolute, and this is position: relative, which causes it to show up in the background of the dropdown
+    }
+  }
+
   // overrides theme CSS that always hides .loadingPiwik. since we use an ng-if to make
   // sure it's only shown when we're actually loading a new page, it's not necessary to
   // forcefully hide it.
   .loadingPiwik {
     display: inline-block !important;
   }
+
+  .compare-checkbox {
+    margin-bottom: 20px;
+  }
+
+  .compare-date-range {
+    padding-top: 20px;
+  }
+
+  #comparePeriodToDropdown {
+    height: 30px;
+    display: inline-block;
+    width: 60%;
+    transform: scale(.8);
+    margin-left: -5%;
+    margin-right: -5%;
+
+    .form-group {
+      margin: 0;
+    }
+
+    .input-field {
+      margin-top: 0;
+    }
+
+    .select-dropdown {
+      margin-bottom: 0;
+    }
+
+    .dropdown-content {
+      overflow-y: visible;
+    }
+  }
+
+  div#comparePeriodStartDate, div#comparePeriodEndDate {
+    display: inline-block;
+    width: calc(~"50% - 20px");
+
+    .form-group {
+      margin: 0;
+    }
+
+    .input-field {
+      margin-top: 0;
+      padding: 0;
+    }
+
+    .select-dropdown {
+      margin-bottom: 0;
+    }
+  }
+
+  .compare-dates-separator {
+    height: 1px;
+    margin-left: 8px;
+    margin-right: 8px;
+    background-color: @color-silver-l14;
+    width: 16px;
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 30px;
+  }
+
+  label[for=comparePeriodTo] {
+    transform: scale(.9);
+  }
+
+  .apply-button-container {
+    text-align: right;
+  }
+
 }