thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Split up themes into separate files

Browse source
This commit is contained in:
lilia 2016-10-08 11:10:40 +09:00
parent 15a9423a17
commit dddeed8e8f
4 changed files with 79 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
stylesheets/_android.scss Normal file
View file

@ -0,0 +1,69 @@
.android {
#header {
background-color: $blue;
color: white;
transition: background-color 0.5s;
&.inactive {
background-color: $grey_l;
color: $grey_d;
}
}
.contact-details .name {
font-weight: 400;
}
.conversation.placeholder .conversation-header {
display: none;
}
.conversation-header, .bubble {
@include avatar-colors;
}
.bottom-bar {
min-height: 10px;
}
.bubble {
padding: 9px 12px;
border-radius: $border-radius;
box-shadow: 0 3px 3px -4px black;
}
.outgoing .bubble {
background-color: $grey_l;
}
.outgoing .hourglass {
@include hourglass(#999);
}
.incoming .hourglass {
@include hourglass(#fff);
}
.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');
}
.inactive button.clock {
@include header-icon-black('/images/clock.svg');
}
button.hamburger {
@include header-icon-white('/images/menu.svg');
}
.inactive button.hamburger {
@include header-icon-black('/images/menu.svg');
}
button.back {
@include header-icon-white('/images/back.svg');
}
.inactive button.back {
@include header-icon-black('/images/back.svg');
}
}

79
stylesheets/_themes.scss → stylesheets/_ios.scss
View file

@ -1,12 +1,3 @@
@mixin invert-text-color {
color: white;
&::selection {
background: white;
color: $grey_d;
}
}
$ios-header-border-color: rgba(0,0,0,0.05);
$ios-border-color: rgba(0,0,0,0.1);
@ -168,73 +159,3 @@ $ios-border-color: rgba(0,0,0,0.1);
@include hourglass(#999);
}
}
.android {
#header {
background-color: $blue;
color: white;
transition: background-color 0.5s;
&.inactive {
background-color: $grey_l;
color: $grey_d;
}
}
.contact-details .name {
font-weight: 400;
}
.conversation.placeholder .conversation-header {
display: none;
}
.conversation-header, .bubble {
@include avatar-colors;
}
.bottom-bar {
min-height: 10px;
}
.bubble {
padding: 9px 12px;
border-radius: $border-radius;
box-shadow: 0 3px 3px -4px black;
}
.outgoing .bubble {
background-color: $grey_l;
}
.outgoing .hourglass {
@include hourglass(#999);
}
.incoming .hourglass {
@include hourglass(#fff);
}
.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');
}
.inactive button.clock {
@include header-icon-black('/images/clock.svg');
}
button.hamburger {
@include header-icon-white('/images/menu.svg');
}
.inactive button.hamburger {
@include header-icon-black('/images/menu.svg');
}
button.back {
@include header-icon-white('/images/back.svg');
}
.inactive button.back {
@include header-icon-black('/images/back.svg');
}
}

8
stylesheets/_mixins.scss
View file

@ -34,3 +34,11 @@
&.grey { background-color: #999999 ; }
&.default { background-color: $blue ; }
}
@mixin invert-text-color {
color: white;
&::selection {
background: white;
color: $grey_d;
}
}

3
stylesheets/manifest.scss
View file

@ -16,4 +16,5 @@
// Build the main view
@import 'index';
@import 'conversation';
@import 'themes';
@import 'ios';
@import 'android';