MozReview: Move new skin to its own files (
Bug 1056377). r?smacleod
MozReview-Commit-ID: De9w7cZgb9n
--- 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);
-}