Added a dark theme
I added a dark theme in order to solve #328. This may fix #328 at least partially.pull/749/head
Ikarulus
9 years ago
committed by
lilia
parent
030096bf91
commit
53cd3af78b
@ -0,0 +1,149 @@
|
||||
$grey-dark: #333333;
|
||||
$grey-dark_l2: darken($grey-dark, 4%);
|
||||
$grey-dark_l3: darken($grey-dark_l2, 7%);
|
||||
$grey-dark_l4: darken($grey-dark_l3, 8%);
|
||||
$text-dark: #CCCCCC;
|
||||
|
||||
.android-dark {
|
||||
color: $text-dark;
|
||||
hr {
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
#header {
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
transition: background-color 0.5s;
|
||||
&.inactive {
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.message-detail, .message-container, .conversation, .modal .content,
|
||||
.discussion-container, .attachment-previews {
|
||||
background-color: $grey-dark_l3;
|
||||
}
|
||||
.lightbox .content {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.key-verification .key {
|
||||
background-color: $grey-dark_l4;
|
||||
border-color: $grey-dark_l2;
|
||||
}
|
||||
.menu-list {
|
||||
background-color: $grey-dark_l2;
|
||||
color: $text-dark;
|
||||
li:hover {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
background-color: $grey-dark_l2;
|
||||
.send-message {
|
||||
background-color: $grey-dark_l2;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.conversation-stack .inactive {
|
||||
.conversation-header{
|
||||
background-color: $grey-dark;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.contact-details .name {
|
||||
font-weight: 400;
|
||||
}
|
||||
.group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
|
||||
background-color: $grey-dark_l3;
|
||||
border-color: $grey-dark;
|
||||
}
|
||||
.conversation.placeholder .conversation-header {
|
||||
display: none;
|
||||
}
|
||||
.conversation-header, .bubble {
|
||||
@include avatar-colors;
|
||||
}
|
||||
.message-list .advisory .content {
|
||||
background-color: $grey-dark;
|
||||
}
|
||||
.inactive .conversation-header {
|
||||
background-color: $grey-dark !important;
|
||||
color: $text-dark;
|
||||
}
|
||||
.sent .status {
|
||||
display: inline-block;
|
||||
@include color-svg('/images/check.svg', white);
|
||||
}
|
||||
.paperclip:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: $button-height;
|
||||
height: $button-height;
|
||||
@include color-svg('/images/paperclip.svg', white);
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
.scrollable {
|
||||
background-color: $grey-dark_l3;
|
||||
.conversation-list-item {
|
||||
background-color: $grey-dark_l3;
|
||||
color: $text-dark;
|
||||
}
|
||||
}
|
||||
.bottom-bar {
|
||||
min-height: 10px;
|
||||
background-color: $grey-dark_l2;
|
||||
}
|
||||
.search {
|
||||
background-color: $grey-dark_l2;
|
||||
border-color: $grey-dark_l2;
|
||||
@include invert-text-color;
|
||||
}
|
||||
.bubble {
|
||||
padding: 9px 12px;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0 3px 3px -4px black;
|
||||
}
|
||||
|
||||
.outgoing .bubble {
|
||||
background-color: $grey-dark;
|
||||
@include invert-text-color;
|
||||
}
|
||||
.outgoing .hourglass, .incoming .hourglass {
|
||||
@include hourglass(#000);
|
||||
}
|
||||
|
||||
.incoming .bubble {
|
||||
.sender, .content, .body, .meta, a {
|
||||
@include invert-text-color;
|
||||
}
|
||||
.attachments, .content {
|
||||
a {
|
||||
color: $grey_l;
|
||||
}
|
||||
}
|
||||
}
|
||||
button.clock {
|
||||
@include header-icon-white('/images/clock.svg');
|
||||
}
|
||||
button.hamburger {
|
||||
@include header-icon-white('/images/menu.svg');
|
||||
}
|
||||
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);
|
||||
|
||||
&:hover {
|
||||
background: rgba(120,120,120,0.25);
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: $grey-dark_l2;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue