1 files changed, 41 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 31dbf1da73c..37ad6a717d9 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1229,6 +1229,10 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
     background-color: $white-light;
     border-left: 1px solid $white-dark;
   }
+
+  .ide-right-sidebar-clientside {
+    padding: 0;
+  }
 }
 
 .ide-pipeline {
@@ -1412,3 +1416,40 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   color: $white-normal;
   background-color: $blue-500;
 }
+
+.ide-preview-header {
+  padding: 0 $grid-size;
+  border-bottom: 1px solid $white-dark;
+  background-color: $gray-light;
+  min-height: 44px;
+}
+
+.ide-navigator-btn {
+  height: 24px;
+  min-width: 24px;
+  max-width: 24px;
+  padding: 0;
+  margin: 0 ($grid-size / 2);
+  color: $gl-gray-light;
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.ide-navigator-location {
+  padding-top: ($grid-size / 2);
+  padding-bottom: ($grid-size / 2);
+
+  &:focus {
+    outline: 0;
+    box-shadow: none;
+    border-color: $theme-gray-200;
+  }
+}
+
+.ide-preview-loading-icon {
+  right: $grid-size;
+  top: 50%;
+  transform: translateY(-50%);
+}