diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss index 43397f7ce..f642c51c0 100644 --- a/stylesheets/_global.scss +++ b/stylesheets/_global.scss @@ -258,6 +258,7 @@ $new-contact-left-margin: 16px; // Still used for the contact search view .contact-details { + color: $color-gray-05; $left-margin: 12px; vertical-align: middle; @@ -287,7 +288,7 @@ $new-contact-left-margin: 16px; } .number { - color: $color-light-60; + color: $color-dark-30; font-size: $font-size-small; } diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss index 6a6212207..c497d9d06 100644 --- a/stylesheets/_index.scss +++ b/stylesheets/_index.scss @@ -19,14 +19,14 @@ } .gutter { - background-color: $color-gray-02; + background-color: $color-dark-85; ::-webkit-scrollbar-track { - background: $color-gray-02; + background: $color-dark-85; } ::-webkit-scrollbar-thumb { - border: 2px solid $color-gray-02; + border: 2px solid $color-dark-85; } display: flex; @@ -36,6 +36,21 @@ .tool-bar { margin-top: 8px; + color: $color-dark-05; + + .search-icon { + background-color: $color-light-35; + } + + input.search { + border: 1px solid $color-light-60; + color: $color-dark-05; + background-color: $color-gray-95; + + &:focus { + outline: solid 1px $blue; + } + } } .content { @@ -50,13 +65,14 @@ justify-content: center; align-items: center; height: 70px; - background: $color-light-35; + background: $color-loki-extra-dark-gray; img { max-width: 60%; max-height: 60%; } } } + .network-status-container { .network-status { background: url('../images/error_red.svg') no-repeat left 10px center; diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 0415cd4d6..de9f5611d 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1829,7 +1829,7 @@ cursor: pointer; &:hover { - background-color: $color-gray-05; + background-color: $color-dark-70; } } @@ -1849,7 +1849,7 @@ } .module-conversation-list-item--is-selected { - background-color: $color-gray-05; + background-color: $color-dark-70; } .module-conversation-list-item__avatar-container { @@ -1880,7 +1880,7 @@ line-height: 16px; border-radius: 8px; - box-shadow: 0px 0px 0px 1px $color-gray-02; + box-shadow: 0px 0px 0px 1px $color-dark-85; } .module-conversation-list-item__content { @@ -1911,7 +1911,7 @@ text-overflow: ellipsis; font-weight: 300; - color: $color-gray-90; + color: $color-gray-05; } .module-conversation-list-item__header__name--with-unread { @@ -1932,12 +1932,12 @@ text-transform: uppercase; - color: $color-gray-60; + color: $color-gray-25; } .module-conversation-list-item__header__date--has-unread { font-weight: 300; - color: $color-gray-90; + color: $color-gray-05; } .module-conversation-list-item__message { @@ -1955,7 +1955,7 @@ font-size: 13px; line-height: 18px; - color: $color-gray-60; + color: $color-gray-25; height: 1.3em; overflow: hidden; @@ -1965,7 +1965,7 @@ .module-conversation-list-item__message__text--has-unread { font-weight: 300; - color: $color-gray-90; + color: $color-gray-05; } .module-conversation-list-item__message__status-icon { @@ -1979,7 +1979,7 @@ } .module-conversation-list-item__message__status-icon--sending { - @include color-svg('../images/sending.svg', $color-gray-60); + @include color-svg('../images/sending.svg', $color-light-35); animation: module-conversation-list-item__message__status-icon--spinning 4s linear infinite; } @@ -2186,7 +2186,7 @@ line-height: 24px; font-weight: 300; margin-left: 32px; - color: $color-gray-90; + color: $color-dark-05; } // Third-party module: react-contextmenu diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss index 320d4af9f..67cbc4ba1 100644 --- a/stylesheets/_variables.scss +++ b/stylesheets/_variables.scss @@ -25,6 +25,11 @@ $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif; $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif; +// Loki colors +$color-loki-dark-gray: #323232; +$color-loki-extra-dark-gray: #101010; +$color-loki-green: #3bd110; + // New colors $color-signal-blue: #2090ea;