Dark theme tweaks
* Fixes hourglasses * Fix delivered status icon * Other changes aiming for more consistency of visual structure between light and dark themes. * Restores left pane header focus/transition effect.
This commit is contained in:
lilia
parent
53cd3af78b
commit
ee334d3fcb
3 changed files with 84 additions and 39 deletions
1
images/x_white.svg
Normal file
1
images/x_white.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="white"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>
|
||||
|
After Width: | Height: | Size: 224 B |
|
|
@ -10,18 +10,21 @@ $text-dark: #CCCCCC;
|
|||
border-color: $grey-dark;
|
||||
}
|
||||
#header {
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
transition: background-color 0.5s;
|
||||
&.inactive {
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.message-detail, .message-container, .conversation, .modal .content,
|
||||
.discussion-container, .attachment-previews {
|
||||
.message-detail, .message-container, .conversation,
|
||||
.discussion-container {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
.modal .content {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
.lightbox .content {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
|
@ -37,9 +40,9 @@ $text-dark: #CCCCCC;
|
|||
}
|
||||
}
|
||||
.flex {
|
||||
background-color: $grey-dark_l2;
|
||||
background-color: $grey-dark_l3;
|
||||
.send-message {
|
||||
background-color: $grey-dark_l2;
|
||||
background-color: $grey-dark_l3;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
|
|
@ -73,6 +76,10 @@ $text-dark: #CCCCCC;
|
|||
display: inline-block;
|
||||
@include color-svg('/images/check.svg', white);
|
||||
}
|
||||
.delivered .status {
|
||||
display: inline-block;
|
||||
@include color-svg('/images/double-check.svg', white);
|
||||
}
|
||||
.paperclip:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -82,7 +89,7 @@ $text-dark: #CCCCCC;
|
|||
transform: rotateZ(-45deg);
|
||||
}
|
||||
.scrollable {
|
||||
background-color: $grey-dark_l3;
|
||||
background-color: $grey-dark_l2;
|
||||
.conversation-list-item {
|
||||
background-color: $grey-dark_l3;
|
||||
color: $text-dark;
|
||||
|
|
@ -91,11 +98,18 @@ $text-dark: #CCCCCC;
|
|||
.bottom-bar {
|
||||
min-height: 10px;
|
||||
background-color: $grey-dark_l2;
|
||||
form.send {
|
||||
background: $grey-dark_l3;
|
||||
}
|
||||
}
|
||||
.search {
|
||||
background-color: $grey-dark_l2;
|
||||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark_l2;
|
||||
@include invert-text-color;
|
||||
&::-webkit-search-cancel-button {
|
||||
background: url('/images/x_white.svg') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
.bubble {
|
||||
padding: 9px 12px;
|
||||
|
|
@ -106,9 +120,13 @@ $text-dark: #CCCCCC;
|
|||
.outgoing .bubble {
|
||||
background-color: $grey-dark;
|
||||
@include invert-text-color;
|
||||
color: $text-dark;
|
||||
}
|
||||
.outgoing .hourglass, .incoming .hourglass {
|
||||
@include hourglass(#000);
|
||||
.outgoing .hourglass {
|
||||
@include hourglass(#999);
|
||||
}
|
||||
.incoming .hourglass {
|
||||
@include hourglass(#fff);
|
||||
}
|
||||
|
||||
.incoming .bubble {
|
||||
|
|
@ -130,17 +148,12 @@ $text-dark: #CCCCCC;
|
|||
button.back {
|
||||
@include header-icon-white('/images/back.svg');
|
||||
}
|
||||
button.grey {
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
border-color: $grey-dark_l2;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(120,120,120,0.15);
|
||||
background: rgba(255,255,255,0.15);
|
||||
|
||||
&:hover {
|
||||
background: rgba(120,120,120,0.25);
|
||||
background: rgba(255,255,255,0.25);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
|
|
|
|||
|
|
@ -1702,15 +1702,17 @@ li.entry .error-icon-container {
|
|||
.android-dark hr {
|
||||
border-color: #333333; }
|
||||
.android-dark #header {
|
||||
background-color: #333333;
|
||||
color: #CCCCCC;
|
||||
background-color: #2090ea;
|
||||
color: white;
|
||||
transition: background-color 0.5s; }
|
||||
.android-dark #header.inactive {
|
||||
background-color: #333333;
|
||||
color: #CCCCCC; }
|
||||
.android-dark .message-detail, .android-dark .message-container, .android-dark .conversation, .android-dark .modal .content,
|
||||
.android-dark .discussion-container, .android-dark .attachment-previews {
|
||||
.android-dark .message-detail, .android-dark .message-container, .android-dark .conversation,
|
||||
.android-dark .discussion-container {
|
||||
background-color: #171717; }
|
||||
.android-dark .modal .content {
|
||||
background-color: #333333; }
|
||||
.android-dark .lightbox .content {
|
||||
background-color: transparent; }
|
||||
.android-dark .key-verification .key {
|
||||
|
|
@ -1722,9 +1724,9 @@ li.entry .error-icon-container {
|
|||
.android-dark .menu-list li:hover {
|
||||
background-color: #333333; }
|
||||
.android-dark .flex {
|
||||
background-color: #292929; }
|
||||
background-color: #171717; }
|
||||
.android-dark .flex .send-message {
|
||||
background-color: #292929;
|
||||
background-color: #171717;
|
||||
color: #CCCCCC; }
|
||||
.android-dark .conversation-stack .inactive .conversation-header {
|
||||
background-color: #333333;
|
||||
|
|
@ -1780,6 +1782,11 @@ li.entry .error-icon-container {
|
|||
-webkit-mask: url("/images/check.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: white; }
|
||||
.android-dark .delivered .status {
|
||||
display: inline-block;
|
||||
-webkit-mask: url("/images/double-check.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: white; }
|
||||
.android-dark .paperclip:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
|
|
@ -1790,52 +1797,80 @@ li.entry .error-icon-container {
|
|||
background-color: white;
|
||||
transform: rotateZ(-45deg); }
|
||||
.android-dark .scrollable {
|
||||
background-color: #171717; }
|
||||
background-color: #292929; }
|
||||
.android-dark .scrollable .conversation-list-item {
|
||||
background-color: #171717;
|
||||
color: #CCCCCC; }
|
||||
.android-dark .bottom-bar {
|
||||
min-height: 10px;
|
||||
background-color: #292929; }
|
||||
.android-dark .bottom-bar form.send {
|
||||
background: #171717; }
|
||||
.android-dark .search {
|
||||
background-color: #292929;
|
||||
background-color: #171717;
|
||||
border-color: #292929;
|
||||
color: white; }
|
||||
.android-dark .search::selection {
|
||||
background: white;
|
||||
color: #454545; }
|
||||
.android-dark .search::-webkit-search-cancel-button {
|
||||
background: url("/images/x_white.svg") no-repeat center;
|
||||
background-size: cover; }
|
||||
.android-dark .bubble {
|
||||
padding: 9px 12px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 3px 3px -4px black; }
|
||||
.android-dark .outgoing .bubble {
|
||||
background-color: #333333;
|
||||
color: white; }
|
||||
color: white;
|
||||
color: #CCCCCC; }
|
||||
.android-dark .outgoing .bubble::selection {
|
||||
background: white;
|
||||
color: #454545; }
|
||||
.android-dark .outgoing .hourglass, .android-dark .incoming .hourglass {
|
||||
.android-dark .outgoing .hourglass {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: transparent;
|
||||
background-size: 100%; }
|
||||
.android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
|
||||
.android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after {
|
||||
width: 13px;
|
||||
height: 11px; }
|
||||
.android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
|
||||
.android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.android-dark .outgoing .hourglass .sand, .android-dark .incoming .hourglass .sand {
|
||||
background: #000; }
|
||||
.android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass:after {
|
||||
.android-dark .outgoing .hourglass .sand {
|
||||
background: #999; }
|
||||
.android-dark .outgoing .hourglass:after {
|
||||
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: #000; }
|
||||
background-color: #999; }
|
||||
.android-dark .incoming .hourglass {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
-webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: transparent;
|
||||
background-size: 100%; }
|
||||
.android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
|
||||
width: 13px;
|
||||
height: 11px; }
|
||||
.android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0; }
|
||||
.android-dark .incoming .hourglass .sand {
|
||||
background: #fff; }
|
||||
.android-dark .incoming .hourglass:after {
|
||||
-webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: #fff; }
|
||||
.android-dark .incoming .bubble .sender, .android-dark .incoming .bubble .content, .android-dark .incoming .bubble .body, .android-dark .incoming .bubble .meta, .android-dark .incoming .bubble a {
|
||||
color: white; }
|
||||
.android-dark .incoming .bubble .sender::selection, .android-dark .incoming .bubble .content::selection, .android-dark .incoming .bubble .body::selection, .android-dark .incoming .bubble .meta::selection, .android-dark .incoming .bubble a::selection {
|
||||
|
|
@ -1867,14 +1902,10 @@ li.entry .error-icon-container {
|
|||
-webkit-mask: url("/images/back.svg") no-repeat center;
|
||||
-webkit-mask-size: 100%;
|
||||
background-color: white; }
|
||||
.android-dark button.grey {
|
||||
background-color: #333333;
|
||||
color: #CCCCCC;
|
||||
border-color: #292929; }
|
||||
.android-dark ::-webkit-scrollbar-thumb {
|
||||
background: rgba(120, 120, 120, 0.15); }
|
||||
background: rgba(255, 255, 255, 0.15); }
|
||||
.android-dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(120, 120, 120, 0.25); }
|
||||
background: rgba(255, 255, 255, 0.25); }
|
||||
.android-dark ::-webkit-scrollbar-track {
|
||||
background-color: #292929; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue