diff --git a/stylesheets/index.scss b/stylesheets/index.scss index 2e8f2ec0b..96e9cc8a3 100644 --- a/stylesheets/index.scss +++ b/stylesheets/index.scss @@ -17,6 +17,82 @@ } } -.new-contact .contact::before { - content: 'New contact' +.index { + color: $grey_d; + background: #eee; + + .contact { + position: relative; + padding: 12px; + background: white; + cursor: pointer; + transition: background 0.2s; + + &::after { + content: ''; + position: absolute; + right: 16px; + bottom: 0; + height: 1px; + width: calc(100% - 12px - 54px - 2 * 8px - 16px); + background: #eee; + } + + &:hover { + background: #f8f8f8; + } + + &:last-child { + box-shadow: 0 1px 3px rgba(#aaa, 0.8); + + &::after { + display: none; + } + } + } + + .contact-details { + vertical-align: top; + display: inline-block; + width: calc(100% - 54px - 2 * 12px - 8px); + margin: 4px 0 0 8px; + } + + .contact-name { + margin: 0; + font-size: 16px; + font-weight: 400; + } + + .last-message { + margin: 6px 0; + font-size: 14px; + font-weight: 300; + } + + .timestamp { + position: absolute; + top: 14px; + right: 12px; + color: #888; + } + + img { + height: 54px; + width: 54px; + background: $grey_l; + border-radius: (54px / 2); + } + +} + +.settings { + height: 100%; + width: 100%; + background: red; + display: none; + + .settings-open & { + display: block; + } } diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css index 6d83b9fb0..afbba8c0b 100644 --- a/stylesheets/manifest.css +++ b/stylesheets/manifest.css @@ -12,8 +12,60 @@ .typeahead .contact .checkbox { display: inline-block; } -.new-contact .contact::before { - content: "New contact"; } +.index { + color: #454545; + background: #eee; } + .index .contact { + position: relative; + padding: 12px; + background: white; + cursor: pointer; + transition: background 0.2s; } + .index .contact::after { + content: ''; + position: absolute; + right: 16px; + bottom: 0; + height: 1px; + width: calc(100% - 12px - 54px - 2 * 8px - 16px); + background: #eee; } + .index .contact:hover { + background: #f8f8f8; } + .index .contact:last-child { + box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); } + .index .contact:last-child::after { + display: none; } + .index .contact-details { + vertical-align: top; + display: inline-block; + width: calc(100% - 54px - 2 * 12px - 8px); + margin: 4px 0 0 8px; } + .index .contact-name { + margin: 0; + font-size: 16px; + font-weight: 400; } + .index .last-message { + margin: 6px 0; + font-size: 14px; + font-weight: 300; } + .index .timestamp { + position: absolute; + top: 14px; + right: 12px; + color: #888; } + .index img { + height: 54px; + width: 54px; + background: #f3f3f3; + border-radius: 27px; } + +.settings { + height: 100%; + width: 100%; + background: red; + display: none; } + .settings-open .settings { + display: block; } @font-face { font-family: 'Roboto'; @@ -222,58 +274,3 @@ button { border: 0; outline: 0; z-index: 5; } - -.index { - color: #454545; - background: #eee; } - .index .contact { - position: relative; - padding: 12px; - background: white; - cursor: pointer; - transition: background 0.2s; } - .index .contact::after { - content: ''; - position: absolute; - right: 16px; - bottom: 0; - height: 1px; - width: calc(100% - 12px - 54px - 2 * 8px - 16px); - background: #eee; } - .index .contact:hover { - background: #f8f8f8; } - .index .contact:last-child { - box-shadow: 0 1px 3px rgba(170, 170, 170, 0.8); } - .index .contact:last-child::after { - display: none; } - .index .contact-details { - vertical-align: top; - display: inline-block; - width: calc(100% - 54px - 2 * 12px - 8px); - margin: 4px 0 0 8px; } - .index .contact-name { - margin: 0; - font-size: 16px; - font-weight: 400; } - .index .last-message { - margin: 6px 0; - font-size: 14px; - font-weight: 300; } - .index .timestamp { - position: absolute; - top: 14px; - right: 12px; - color: #888; } - .index img { - height: 54px; - width: 54px; - background: #f3f3f3; - border-radius: 27px; } - -.settings { - height: 100%; - width: 100%; - background: red; - display: none; } - .settings-open .settings { - display: block; } diff --git a/stylesheets/view/_conversation.scss b/stylesheets/view/_conversation.scss index 6e4e8f692..506689b29 100644 --- a/stylesheets/view/_conversation.scss +++ b/stylesheets/view/_conversation.scss @@ -286,83 +286,3 @@ button { } } -// conversation list part -.index { - color: $grey_d; - background: #eee; - - .contact { - position: relative; - padding: 12px; - background: white; - cursor: pointer; - transition: background 0.2s; - - &::after { - content: ''; - position: absolute; - right: 16px; - bottom: 0; - height: 1px; - width: calc(100% - 12px - 54px - 2 * 8px - 16px); - background: #eee; - } - - &:hover { - background: #f8f8f8; - } - - &:last-child { - box-shadow: 0 1px 3px rgba(#aaa, 0.8); - - &::after { - display: none; - } - } - } - - .contact-details { - vertical-align: top; - display: inline-block; - width: calc(100% - 54px - 2 * 12px - 8px); - margin: 4px 0 0 8px; - } - - .contact-name { - margin: 0; - font-size: 16px; - font-weight: 400; - } - - .last-message { - margin: 6px 0; - font-size: 14px; - font-weight: 300; - } - - .timestamp { - position: absolute; - top: 14px; - right: 12px; - color: #888; - } - - img { - height: 54px; - width: 54px; - background: $grey_l; - border-radius: (54px / 2); - } - -} - -.settings { - height: 100%; - width: 100%; - background: red; - display: none; - - .settings-open & { - display: block; - } -}