Use view-background-color throughout the app

Change-Id: Ib74162411afde7cdb2121f5e7b78e81a97341bfd
2018-04-16 11:42:56 +02:00
parent 56628163af
commit c4f41031b9
17 changed files with 20 additions and 19 deletions
--- a/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
+++ b/polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html
@@ -250,7 +250,7 @@ limitations under the License.
          display: block;
        }
        .row.selected {
-          background-color: #fff;
+          background-color: var(--view-background-color);
        }
        .stats {
          display: none;
--- a/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
+++ b/polygerrit-ui/app/elements/change/gr-included-in-dialog/gr-included-in-dialog.html
@@ -29,7 +29,7 @@ limitations under the License.
        padding: 4.5em 1em 1em 1em;
      }
      header {
-        background: #fff;
+        background: var(--view-background-color);
        border-bottom: 1px solid var(--border-color);
        left: 0;
        padding: 1em;
--- a/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
+++ b/polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.html
@@ -48,7 +48,7 @@ limitations under the License.
      }
      @keyframes fadeOut {
        0% { background-color: #fff9c4; }
-        100% { background-color: #fff; }
+        100% { background-color: var(--view-background-color); }
      }
      #messageControlsContainer {
        align-items: center;
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html
@@ -121,7 +121,7 @@ limitations under the License.
        text-decoration: none;
      }
      .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
      }
      @media screen and (max-width: 50em) {
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.html
@@ -28,7 +28,7 @@ limitations under the License.
        display: flex;
      }
      gr-autocomplete {
-        background-color: white;
+        background-color: var(--view-background-color);
        border: 1px solid var(--border-color);
        border-radius: 2px 0 0 2px;
        flex: 1;
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -57,7 +57,7 @@ limitations under the License.
        }
      }
      gr-fixed-panel {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        border-bottom: 1px solid var(--border-color);
        z-index: 1;
      }
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -87,7 +87,7 @@ limitations under the License.
      }
      .blank,
      .content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
      }
      .full-width {
        width: 100%;
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -64,9 +64,10 @@ limitations under the License.
  <template>
    <style include="shared-styles">
      :host {
+        background-color: var(--view-background-color);
        display: flex;
-        min-height: 100%;
        flex-direction: column;
+        min-height: 100%;
      }
      gr-fixed-panel {
        /**
--- a/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
+++ b/polygerrit-ui/app/elements/shared/gr-alert/gr-alert.html
@@ -33,7 +33,7 @@ limitations under the License.
        bottom: 1.25rem;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-        color: #fff;
+        color: var(--view-background-color);
        left: 1.25rem;
        padding: 1em 1.5em;
        position: fixed;
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete-dropdown/gr-autocomplete-dropdown.html
@@ -46,7 +46,7 @@ limitations under the License.
        background-color: #eee;
      }
      .dropdown-content {
-        background: #fff;
+        background: var(--view-background-color);
        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
      }
    </style>
--- a/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
+++ b/polygerrit-ui/app/elements/shared/gr-button/gr-button.html
@@ -27,7 +27,7 @@ limitations under the License.
    <style include="shared-styles">
      /* general styles for all buttons */
      :host {
-        --background-color: var(--gr-button-background, #fff);
+        --background-color: var(--gr-button-background, var(--view-background-color));
        --button-color: var(--gr-button-color, var(--color-link));
        display: inline-block;
        font-family: var(--font-family-bold);
@@ -66,7 +66,7 @@ limitations under the License.
      :host([primary][raised]),
      :host([secondary][raised]) {
        --background-color: var(--color-link);
-        --button-color: #fff;
+        --button-color: var(--view-background-color);
      }

      /* Keep below color definition for primary/secondary so that this takes
--- a/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown-list/gr-dropdown-list.html
@@ -43,7 +43,7 @@ limitations under the License.
        padding: 0;
      }
      .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
        max-height: 70vh;
        margin-top: 2em;
--- a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
+++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html
@@ -36,7 +36,7 @@ limitations under the License.
        width: 100%;
      }
      .dropdown-content {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
      }
      gr-button {
@@ -75,7 +75,7 @@ limitations under the License.
      }
      li .itemAction:not(.disabled):hover {
        background-color: #6B82D6;
-        color: #fff;
+        color: var(--view-background-color);
      }
      li:focus,
      li.selected {
--- a/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
+++ b/polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html
@@ -55,7 +55,7 @@ limitations under the License.
        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
      }
      .inputContainer {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        padding: .8em;
        @apply --input-style;
      }
--- a/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
+++ b/polygerrit-ui/app/elements/shared/gr-overlay/gr-overlay.html
@@ -23,7 +23,7 @@ limitations under the License.
  <template>
    <style include="shared-styles">
      :host {
-        background: #fff;
+        background: var(--view-background-color);
        box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
      }

--- a/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
+++ b/polygerrit-ui/app/elements/shared/gr-tooltip/gr-tooltip.html
@@ -27,7 +27,7 @@ limitations under the License.

        background-color: var(--tooltip-background-color, #333);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-        color: #fff;
+        color: var(--view-background-color);
        font-size: var(--font-size-small);
        position: absolute;
        z-index: 1000;
--- a/polygerrit-ui/app/styles/gr-page-nav-styles.html
+++ b/polygerrit-ui/app/styles/gr-page-nav-styles.html
@@ -49,7 +49,7 @@ limitations under the License.
        margin: .4em 0;
      }
      .navStyles .selected {
-        background-color: #fff;
+        background-color: var(--view-background-color);
        border-bottom: 1px dotted #808080;
        border-top: 1px dotted #808080;
        font-family: var(--font-family-bold);