MozReview: Move new skin to its own files (Bug 1056377). r?smacleod draft
authorDavid Walsh <dwalsh@mozilla.com>
Fri, 01 Jul 2016 13:05:59 -0500
changeset 8717 fa5eaa72584a6fcfd0c2a0979aca477088461ae3
parent 8604 efcdc8ed0c729a1ff1488873761c6082e5407727
push id974
push userbmo:dwalsh@mozilla.com
push dateFri, 01 Jul 2016 18:08:24 +0000
reviewerssmacleod
bugs1056377
MozReview: Move new skin to its own files (Bug 1056377). r?smacleod MozReview-Commit-ID: De9w7cZgb9n
pylib/mozreview/mozreview/extension.py
pylib/mozreview/mozreview/static/mozreview/css/common.less
pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-review.less
pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-vars.less
pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme.less
pylib/mozreview/mozreview/static/mozreview/css/shims.less
--- a/pylib/mozreview/mozreview/extension.py
+++ b/pylib/mozreview/mozreview/extension.py
@@ -125,21 +125,23 @@ class MozReviewExtension(Extension):
 
     js_extensions = [
         MRReviewFlagExtension,
         ParentJSExtension,
     ]
 
     css_bundles = {
         'default': {
-            'source_filenames': ['mozreview/css/common.less'],
+            'source_filenames': ['mozreview/css/mozilla-theme.css',
+                                 'mozreview/css/shims.less'],
         },
         'review': {
             'source_filenames': ['mozreview/css/review.less',
-                                 'mozreview/css/commits.less'],
+                                 'mozreview/css/commits.less',
+                                 'mozreview/css/mozilla-theme-review.less'],
         },
         'viewdiff': {
             'source_filenames': ['mozreview/css/viewdiff.less'],
         },
         'admin': {
             'source_filenames': ['mozreview/css/admin.less'],
         },
     }
new file mode 100644
--- /dev/null
+++ b/pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-review.less
@@ -0,0 +1,238 @@
+@import (reference) 'mozilla-theme-vars.less';
+
+/* General Review Request Theme Changes */
+.review-request {
+  .main {
+    background: #fff;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .content .field-container > pre {
+    border: 1px dashed #999;
+  }
+}
+
+.reviewable-page #mozreview-child-requests > thead > tr > .status,
+.reviewable-page #mozreview-child-requests > tbody > tr > .status {
+  min-width: 50px;
+}
+
+/* Review Actions Bar */
+.actions-container, .actions.page-tabs {
+  background: @moz-blue-dark;
+  border: 0;
+}
+
+.actions-container {
+  .border-radius(0);
+}
+
+.review-request-header,
+.actions.page-tabs li {
+  border-bottom: 0;
+}
+
+.actions.page-tabs li.active {
+  border: 0;
+}
+
+.actions.page-tabs {
+  .border-radius(0);
+}
+
+.actions-left li:hover,
+.actions li:hover,
+.actions .menu,
+.actions .menu li,
+.actions-right-container > li > .actions-right,
+.actions-right-container > li > .actions-right li {
+  background-color: @moz-blue-dark;
+}
+
+.actions-left .rb-icon.star {
+  margin: 8px 5px;
+}
+
+.actions-right-container > li > .actions-right {
+  border: 0;
+}
+
+.actions .menu li:hover,
+.actions-right-container > li > .actions-right li:hover {
+  background: @moz-blue-light;
+}
+
+.actions .menu {
+  border: 0;
+}
+
+/* Review Banners */
+.banner {
+  border-bottom: 0;
+}
+
+/* Review Comments */
+.box, .box-inner {
+  .border-radius(0);
+}
+
+#reviews {
+  .review .box-inner {
+    border: 1px @moz-blue-dark solid;
+  }
+
+  .box:before {
+    border-right-color: @moz-blue-dark;
+  }
+}
+
+/* Diff Tables and Data Grids */
+#page-container {
+  #page_sidebar {
+    .page-sidebar-items {
+      li.has-url {
+        &:hover {
+          .page-sidebar-row {
+            .border-radius(0);
+            background: rgba(255, 255, 255, 0.6);
+            border-color: transparent !important;
+          }
+        }
+      }
+
+      li.active {
+        .page-sidebar-row {
+          .border-radius(0);
+          border: 0 !important;
+        }
+      }
+
+      li.active.has-url {
+        &:hover {
+          .page-sidebar-row {
+            border: 0 !important;
+          }
+        }
+      }
+
+      li {
+        .page-sidebar-row {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .datagrid-header {
+    background: @moz-blue-dark;
+  }
+}
+body.datagrid-page {
+  #page-container {
+    .datagrid-main {
+      .border-radius(0);
+      border: 0 !important;
+    }
+
+    .datagrid-head {
+      .border-radius(0);
+      border-bottom: 0;
+    }
+
+    .datagrid-body {
+      .datagrid-headers {
+        .border-radius(0);
+        border-bottom: 0;
+      }
+    }
+
+    .datagrid-header {
+      &:first-child {
+        border-top-left-radius: 0;
+      }
+      &:last-child {
+        border-top-right-radius: 0;
+      }
+    }
+
+    .datagrid {
+      tbody {
+        td {
+          padding: 10px;
+        }
+        th {
+          padding: 10px;
+        }
+        tr {
+          &:hover {
+            background: @moz-blue-light;
+          }
+        }
+      }
+    }
+
+    .datagrid-wrapper {
+      .datagrid-titlebox {
+        margin-left: 0;
+      }
+    }
+
+    .datagrid-title-tabs .datagrid-tab {
+      border: 0;
+
+      &.active {
+        background: #d4dde4;
+      }
+
+      &:first-child {
+        border-top-left-radius: 0;
+      }
+
+      &:last-child {
+        border-top-right-radius: 0;
+      }
+    }
+  }
+}
+
+.datagrid-header-drag.datagrid-header {
+  background: @moz-blue-dark;
+}
+
+.datagrid tr.datagrid-empty-row {
+  visibility: hidden;
+}
+
+.datagrid-titlebox ul li a, a.markdown-info {
+  color: #777;
+}
+
+.datagrid-header {
+  padding: 10px;
+}
+
+#view_controls {
+  font-size: 12px;
+}
+
+.review-request #review_request_details {
+	border-left: 1px solid @moz-blue-light;
+	padding: 0 20px;
+}
+
+/* Diffs in Reviews */
+#diffs .diff-box {
+  .border-radius(0);
+  border: 0;
+}
+
+.sidebyside thead {
+  .filename-row th {
+    background: @moz-blue-dark;
+  }
+
+  .revision-row th .rb-icon {
+    vertical-align: sub;
+  }
+}
new file mode 100644
--- /dev/null
+++ b/pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme-vars.less
@@ -0,0 +1,9 @@
+/* Used throughout design */
+@moz-blue-dark: #d4dde4;
+@moz-blue-light: #eaeff2;
+
+.border-radius(...) {
+  -moz-border-radius: @arguments;
+  -webkit-border-radius: @arguments;
+  border-radius: @arguments;
+}
new file mode 100644
--- /dev/null
+++ b/pylib/mozreview/mozreview/static/mozreview/css/mozilla-theme.less
@@ -0,0 +1,145 @@
+@import (reference) 'mozilla-theme-vars.less';
+
+/* General Theme Updates */
+body {
+  background: @moz-blue-light;
+  font-size: 13px;
+  padding-top: 8px;
+}
+
+/* Logo and Title */
+#headerbar {
+  height: 18px;
+
+  #title a {
+    font-weight: bold;
+    font-size: 100%;
+  }
+
+  #rbinfo > a {
+      display: block;
+      width: 60px;
+      height: 60px;
+      background: url("../logo.svg") 3px -6px no-repeat;
+      background-size: cover;
+      position: absolute;
+      top: 0;
+      left: 8px;
+      z-index: 50;
+
+      img {
+          display: none;
+      }
+  }
+}
+
+@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
+  #headerbar {
+    #rbinfo a {
+      display: none;
+    }
+
+    #nav_toggle {
+      top: -10px;
+    }
+
+    #search {
+      position: absolute;
+      top: -10px;
+      right: 0;
+      left: 60px;
+    }
+  }
+
+  #navbar-container {
+    display: none;
+  }
+
+  #headerbar, .reviewable-page #headerbar {
+    border-bottom-color: @moz-blue-dark;
+  }
+}
+
+/* Account Navigation */
+#accountnav li {
+  /* background colors on hover; set twice for reviewable-page :( */
+  &:hover,
+  &:hover > a,
+  ul,
+  ul:hover,
+  .reviewable-page &:hover,
+  .reviewable-page & ul {
+    background: #fff;
+    border-color: #fff;
+  }
+
+  ul {
+    .border-radius(0);
+    min-width: 150px;
+    border-color: @moz-blue-dark;
+  }
+
+  &:hover ul,
+  .reviewable-page &:hover ul {
+    margin-top: -1px;
+    border-color:@moz-blue-light;
+  }
+
+  .reviewable-page &:hover ul li:hover a,
+  &:hover ul li:hover a {
+    background: @moz-blue-dark;
+  }
+}
+
+/* Main Navigation */
+#navbar {
+  border-bottom: 0;
+}
+
+#navbar-container {
+  padding-bottom: 10px;
+}
+
+#topbar,
+#navbar-container,
+.reviewable-page #topbar,
+.reviewable-page #navbar-container {
+  background: inherit !important;
+}
+
+.reviewable-page #navbar-container,
+#navbar-container {
+  border-bottom: 1px solid @moz-blue-dark;
+}
+
+/* Search Bar */
+#headerbar #search input,
+.reviewable-page #headerbar #search input {
+  .border-radius(0);
+  padding: 3px 6px;
+  border-color: #bbb;
+}
+
+/* Dialogs */
+.modalbox-inner, .modalbox-title, .modalbox {
+  background-image: none;
+  .border-radius(0);
+}
+
+.modalbox-title {
+  background: @moz-blue-dark;
+  border-bottom-color: #888a85;
+}
+
+.modalbox-inner {
+  background: @moz-blue-light;
+}
+
+.modalbox-bg {
+  background: rgba(255, 255, 255, 0.6) !important; /* overriding JS */
+}
+
+/* Comment Dialogs */
+.comment-dlg {
+  .border-radius(0);
+}
rename from pylib/mozreview/mozreview/static/mozreview/css/common.less
rename to pylib/mozreview/mozreview/static/mozreview/css/shims.less
--- a/pylib/mozreview/mozreview/static/mozreview/css/common.less
+++ b/pylib/mozreview/mozreview/static/mozreview/css/shims.less
@@ -1,399 +1,7 @@
 #accountnav li {
   visibility: hidden;
 }
 
 #navbar a[href="/r/new/"] {
   display: none;
 }
-
-/*
-  Mozilla skin
-*/
-@moz-blue-dark: #d4dde4;
-@moz-blue-light: #eaeff2;
-
-.border-radius(...) {
-  -moz-border-radius: @arguments;
-  -webkit-border-radius: @arguments;
-  border-radius: @arguments;
-}
-
-body {
-  background: @moz-blue-light;
-  font-size: 13px;
-  padding-top: 8px;
-}
-
-/* Logo and Title */
-#headerbar {
-  height: 18px;
-
-  #title a {
-    font-weight: bold;
-    font-size: 100%;
-  }
-
-  #rbinfo > a {
-      display: block;
-      width: 60px;
-      height: 60px;
-      background: url("../logo.svg") 3px -6px no-repeat;
-      background-size: cover;
-      position: absolute;
-      top: 0;
-      left: 8px;
-      z-index: 50;
-
-      img {
-          display: none;
-      }
-  }
-}
-
-@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
-  #headerbar {
-    #rbinfo a {
-      display: none;
-    }
-
-    #nav_toggle {
-      top: -10px;
-    }
-
-    #search {
-      position: absolute;
-      top: -10px;
-      right: 0;
-      left: 60px;
-    }
-  }
-
-  #navbar-container {
-    display: none;
-  }
-
-  #headerbar, .reviewable-page #headerbar {
-    border-bottom-color: @moz-blue-dark;
-  }
-}
-
-/* Account Navigation */
-#accountnav li {
-  /* background colors on hover; set twice for reviewable-page :( */
-  &:hover,
-  &:hover > a,
-  ul,
-  ul:hover,
-  .reviewable-page &:hover,
-  .reviewable-page & ul {
-    background: #fff;
-    border-color: #fff;
-  }
-
-  ul {
-    .border-radius(0);
-    min-width: 150px;
-    border-color: @moz-blue-dark;
-  }
-
-  &:hover ul,
-  .reviewable-page &:hover ul {
-    margin-top: -1px;
-    border-color:@moz-blue-light;
-  }
-
-  .reviewable-page &:hover ul li:hover a,
-  &:hover ul li:hover a {
-    background: @moz-blue-dark;
-  }
-}
-
-/* Main Navigation */
-#navbar {
-  border-bottom: 0;
-}
-
-#navbar-container {
-  padding-bottom: 10px;
-}
-
-#topbar,
-#navbar-container,
-.reviewable-page #topbar,
-.reviewable-page #navbar-container {
-  background: inherit !important;
-}
-
-.reviewable-page #navbar-container,
-#navbar-container {
-  border-bottom: 1px solid @moz-blue-dark;
-}
-
-/* Search Bar */
-#headerbar #search input,
-.reviewable-page #headerbar #search input {
-  .border-radius(0);
-  padding: 3px 6px;
-  border-color: #bbb;
-}
-
-/* Review Requests */
-.review-request {
-  .main {
-    background: #fff;
-    border: 0;
-    border-radius: 0;
-  }
-
-  .content .field-container > pre {
-    border: 1px dashed #999;
-  }
-}
-
-.reviewable-page #mozreview-child-requests > thead > tr > .status,
-.reviewable-page #mozreview-child-requests > tbody > tr > .status {
-  min-width: 50px;
-}
-
-/* Review Actions Bar */
-.actions-container, .actions.page-tabs {
-  background: @moz-blue-dark;
-  border: 0;
-}
-
-.actions-container {
-  .border-radius(0);
-}
-
-.review-request-header,
-.actions.page-tabs li {
-  border-bottom: 0;
-}
-
-.actions.page-tabs li.active {
-  border: 0;
-}
-
-.actions.page-tabs {
-  .border-radius(0);
-}
-
-.actions-left li:hover,
-.actions li:hover,
-.actions .menu,
-.actions .menu li,
-.actions-right-container > li > .actions-right,
-.actions-right-container > li > .actions-right li {
-  background-color: @moz-blue-dark;
-}
-
-.actions-left .rb-icon.star {
-  margin: 8px 5px;
-}
-
-.actions-right-container > li > .actions-right {
-  border: 0;
-}
-
-.actions .menu li:hover,
-.actions-right-container > li > .actions-right li:hover {
-  background: @moz-blue-light;
-}
-
-.actions .menu {
-  border: 0;
-}
-
-/* Review Banners */
-.banner {
-  border-bottom: 0;
-}
-
-/* Review Comments */
-.box, .box-inner {
-  .border-radius(0);
-}
-
-#reviews {
-  .review .box-inner {
-    border: 1px @moz-blue-dark solid;
-  }
-
-  .box:before {
-    border-right-color: @moz-blue-dark;
-  }
-}
-
-/* Diff Tables and Data Grids */
-#page-container {
-  #page_sidebar {
-    .page-sidebar-items {
-      li.has-url {
-        &:hover {
-          .page-sidebar-row {
-            .border-radius(0);
-            background: rgba(255, 255, 255, 0.6);
-            border-color: transparent !important;
-          }
-        }
-      }
-
-      li.active {
-        .page-sidebar-row {
-          .border-radius(0);
-          border: 0 !important;
-        }
-      }
-
-      li.active.has-url {
-        &:hover {
-          .page-sidebar-row {
-            border: 0 !important;
-          }
-        }
-      }
-
-      li {
-        .page-sidebar-row {
-          font-size: 14px;
-        }
-      }
-    }
-  }
-
-  .datagrid-header {
-    background: @moz-blue-dark;
-  }
-}
-body.datagrid-page {
-  #page-container {
-    .datagrid-main {
-      .border-radius(0);
-      border: 0 !important;
-    }
-
-    .datagrid-head {
-      .border-radius(0);
-      border-bottom: 0;
-    }
-
-    .datagrid-body {
-      .datagrid-headers {
-        .border-radius(0);
-        border-bottom: 0;
-      }
-    }
-
-    .datagrid-header {
-      &:first-child {
-        border-top-left-radius: 0;
-      }
-      &:last-child {
-        border-top-right-radius: 0;
-      }
-    }
-
-    .datagrid {
-      tbody {
-        td {
-          padding: 10px;
-        }
-        th {
-          padding: 10px;
-        }
-        tr {
-          &:hover {
-            background: @moz-blue-light;
-          }
-        }
-      }
-    }
-
-    .datagrid-wrapper {
-      .datagrid-titlebox {
-        margin-left: 0;
-      }
-    }
-
-    .datagrid-title-tabs .datagrid-tab {
-      border: 0;
-
-      &.active {
-        background: #d4dde4;
-      }
-
-      &:first-child {
-        border-top-left-radius: 0;
-      }
-
-      &:last-child {
-        border-top-right-radius: 0;
-      }
-    }
-  }
-}
-
-.datagrid-header-drag.datagrid-header {
-  background: @moz-blue-dark;
-}
-
-.datagrid tr.datagrid-empty-row {
-  visibility: hidden;
-}
-
-.datagrid-titlebox ul li a, a.markdown-info {
-  color: #777;
-}
-
-.datagrid-header {
-  padding: 10px;
-}
-
-#view_controls {
-  font-size: 12px;
-}
-
-.review-request #review_request_details {
-	border-left: 1px solid @moz-blue-light;
-	padding: 0 20px;
-}
-
-/* Diffs in Reviews */
-#diffs .diff-box {
-  .border-radius(0);
-  border: 0;
-}
-
-.sidebyside thead {
-  .filename-row th {
-    background: @moz-blue-dark;
-  }
-
-  .revision-row th .rb-icon {
-    vertical-align: sub;
-  }
-}
-
-/* Dialogs */
-.modalbox-inner, .modalbox-title, .modalbox {
-  background-image: none;
-  .border-radius(0);
-}
-
-.modalbox-title {
-  background: @moz-blue-dark;
-  border-bottom-color: #888a85;
-}
-
-.modalbox-inner {
-  background: @moz-blue-light;
-}
-
-.modalbox-bg {
-  background: rgba(255, 255, 255, 0.6) !important; /* overriding JS */
-}
-
-/* Comment Dialogs */
-.comment-dlg {
-  .border-radius(0);
-}