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

Invert button styles

Browse source 
Make buttons dark by default, and let the android theme styles apply the
inversion.
This commit is contained in:
lilia 2016-09-26 23:22:36 -07:00
parent 4cd2c03687
commit 8f76548a53
3 changed files with 88 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
stylesheets/_global.scss
View file

@ -78,13 +78,16 @@ button.grey {
a { color: $blue; } a { color: $blue; }
.inactive button.back {
@include header-icon-black('/images/back.svg');
}
button.back { button.back {
@include header-icon-white('/images/back.svg'); @include header-icon-black('/images/back.svg');
} }
button.clock {
@include header-icon-black('/images/clock.svg');
}
button.hamburger {
@include header-icon-black('/images/menu.svg');
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; width: 10px;
@ -120,13 +123,6 @@ button.back {
} }
} }
.clock {
@include header-icon-black('/images/clock.svg');
}
.inactive .menu .hamburger {
@include header-icon-black('/images/menu.svg');
}
.menu { .menu {
position: relative; position: relative;
float: right; float: right;
@ -135,7 +131,6 @@ button.back {
width: $button-height; width: $button-height;
height: $button-height; height: $button-height;
vertical-align: middle; vertical-align: middle;
@include header-icon-white('/images/menu.svg');
} }
.menu-list { .menu-list {
display: none; display: none;

22
stylesheets/_themes.scss
View file

@ -73,12 +73,6 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
.avatar { display: none; } .avatar { display: none; }
} }
button.back {
@include header-icon-black('/images/back.svg');
}
.menu .hamburger {
@include header-icon-black('/images/menu.svg');
}
.bottom-bar { .bottom-bar {
padding: 15px; padding: 15px;
min-height: 30px; min-height: 30px;
@ -224,11 +218,23 @@ $ios-border-color: rgba(0,0,0,0.1);
} }
} }
} }
.clock { button.clock {
@include header-icon-white('/images/clock.svg'); @include header-icon-white('/images/clock.svg');
} }
.inactive .clock { .inactive button.clock {
@include header-icon-black('/images/clock.svg'); @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');
}
} }

116
stylesheets/manifest.css
View file

@ -77,23 +77,32 @@ button.grey {
a { a {
color: #2090ea; } color: #2090ea; }
.inactive button.back { button.back {
-webkit-mask: url("/images/back.svg") no-repeat center; -webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); } background-color: rgba(0, 0, 0, 0.5); }
.inactive button.back:focus, .inactive button.back:hover { button.back:focus, button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center; -webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: black; } background-color: black; }
button.back { button.clock {
-webkit-mask: url("/images/back.svg") no-repeat center; -webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); } background-color: rgba(0, 0, 0, 0.5); }
button.back:focus, button.back:hover { button.clock:focus, button.clock:hover {
-webkit-mask: url("/images/back.svg") no-repeat center; -webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%; -webkit-mask-size: 100%;
background-color: white; } background-color: black; }
button.hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
button.hamburger:focus, button.hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 10px; } width: 10px; }
@ -117,38 +126,13 @@ button.back {
vertical-align: middle; vertical-align: middle;
display: table-cell; } display: table-cell; }
.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.clock:focus, .clock:hover {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.inactive .menu .hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.inactive .menu .hamburger:focus, .inactive .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.menu { .menu {
position: relative; position: relative;
float: right; } float: right; }
.menu .hamburger { .menu .hamburger {
width: 24px; width: 24px;
height: 24px; height: 24px;
vertical-align: middle; vertical-align: middle; }
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.menu .hamburger:focus, .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.menu .menu-list { .menu .menu-list {
display: none; display: none;
position: absolute; position: absolute;
@ -1425,22 +1409,6 @@ li.entry .error-icon-container {
line-height: 64px; } line-height: 64px; }
.ios .conversation-header .avatar { .ios .conversation-header .avatar {
display: none; } display: none; }
.ios button.back {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.ios button.back:focus, .ios button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.ios .menu .hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.ios .menu .hamburger:focus, .ios .menu .hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.ios .bottom-bar { .ios .bottom-bar {
padding: 15px; padding: 15px;
min-height: 30px; min-height: 30px;
@ -1648,5 +1616,53 @@ li.entry .error-icon-container {
color: #454545; } color: #454545; }
.android .incoming .bubble .attachments a, .android .incoming .bubble .content a { .android .incoming .bubble .attachments a, .android .incoming .bubble .content a {
color: #f3f3f3; } color: #f3f3f3; }
.android button.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android button.clock:focus, .android button.clock:hover {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android .inactive button.clock {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.android .inactive button.clock:focus, .android .inactive button.clock:hover {
-webkit-mask: url("/images/clock.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.android button.hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android button.hamburger:focus, .android button.hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android .inactive button.hamburger {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.android .inactive button.hamburger:focus, .android .inactive button.hamburger:hover {
-webkit-mask: url("/images/menu.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
.android button.back {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(255, 255, 255, 0.8); }
.android button.back:focus, .android button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: white; }
.android .inactive button.back {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: rgba(0, 0, 0, 0.5); }
.android .inactive button.back:focus, .android .inactive button.back:hover {
-webkit-mask: url("/images/back.svg") no-repeat center;
-webkit-mask-size: 100%;
background-color: black; }
/*# sourceMappingURL=manifest.css.map */ /*# sourceMappingURL=manifest.css.map */