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

Style tweaks for new window chrome

Browse source
This commit is contained in:
lilia 2015-05-21 17:07:11 -07:00
parent 39d11d8eb3
commit 7d481fdc21
8 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/back.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 348 B

After

Width:  |  Height:  |  Size: 129 B

BIN
images/menu.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 792 B

After

Width:  |  Height:  |  Size: 112 B

4
stylesheets/_conversation.scss
View file

@ -299,9 +299,9 @@
.bottom-bar { .bottom-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 1; // offset 1 for window frame.
height: 36px; height: 36px;
width: 100%; width: calc(100% - 2px);
border-top: 1px solid $grey_l; border-top: 1px solid $grey_l;
background: white; background: white;

17
stylesheets/_global.scss
View file

@ -4,6 +4,7 @@
html { html {
height: 100%; height: 100%;
border: solid 1px #ccc;
} }
body { body {
@ -35,13 +36,19 @@ body {
z-index: 1; z-index: 1;
height: $header-height; height: $header-height;
line-height: 24px; line-height: 24px;
background: #f2f2f2; color: #f2f2f2;
box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8); box-shadow: 0 -4px 3px 4px rgba(darken($header-color, 30%), 0.8);
color: $blue; background-color: $header-color;
-webkit-app-region: drag; -webkit-app-region: drag;
button { button {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
color: inherit;
background-color: $blue;
&:hover {
background-color: rgba(darken($blue, 10%), 0.8);
}
} }
} }
@ -77,7 +84,7 @@ button.back {
position: relative; position: relative;
float: left; float: left;
height: 36px; height: 36px;
padding-left: 8px; padding-right: 8px;
.hamburger { .hamburger {
width: 36px; width: 36px;
@ -86,6 +93,8 @@ button.back {
.menu-list { .menu-list {
display: none; display: none;
position: absolute; position: absolute;
color: $grey_d;
top: 100%; top: 100%;
right: 0; right: 0;
margin: 0; margin: 0;
@ -222,7 +231,7 @@ img.emoji {
.title-bar .check { .title-bar .check {
float: right; float: right;
background: $blue url('/images/check.png') no-repeat center center; background: url('/images/check.png') no-repeat center center;
} }
.contact { .contact {

2
stylesheets/_variables.scss
View file

@ -27,4 +27,4 @@ $roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
$roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif; $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
$header-height: 36px; $header-height: 36px;
$header-color: #f2f2f2; $header-color: $blue;

28
stylesheets/manifest.css
View file

@ -16,7 +16,8 @@
box-sizing: border-box; } box-sizing: border-box; }
html { html {
height: 100%; } height: 100%;
border: solid 1px #ccc; }
body { body {
position: relative; position: relative;
@ -44,12 +45,16 @@ body {
z-index: 1; z-index: 1;
height: 36px; height: 36px;
line-height: 24px; line-height: 24px;
background: #f2f2f2; color: #f2f2f2;
box-shadow: 0 -4px 3px 4px rgba(165, 165, 165, 0.8); box-shadow: 0 -4px 3px 4px rgba(10, 62, 103, 0.8);
color: #2090ea; background-color: #2090ea;
-webkit-app-region: drag; } -webkit-app-region: drag; }
#header button { #header button {
-webkit-app-region: no-drag; } -webkit-app-region: no-drag;
color: inherit;
background-color: #2090ea; }
#header button:hover {
background-color: rgba(19, 117, 196, 0.8); }
.title-text { .title-text {
display: block; display: block;
@ -71,7 +76,7 @@ button {
button.back { button.back {
float: left; float: left;
background: #f2f2f2 url("/images/back.png") no-repeat center center; } background: #2090ea url("/images/back.png") no-repeat center center; }
button.back + .title-text { button.back + .title-text {
text-indent: -36px; } text-indent: -36px; }
@ -79,15 +84,16 @@ button.back {
position: relative; position: relative;
float: left; float: left;
height: 36px; height: 36px;
padding-left: 8px; } padding-right: 8px; }
.menu .hamburger { .menu .hamburger {
width: 36px; width: 36px;
background: url("/images/menu.png") no-repeat center; } background: url("/images/menu.png") no-repeat center; }
.menu .menu-list { .menu .menu-list {
display: none; display: none;
position: absolute; position: absolute;
color: #454545;
top: 100%; top: 100%;
right: 0; left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
border: solid 1px #2090ea; border: solid 1px #2090ea;
@ -189,7 +195,7 @@ img.emoji {
.title-bar .check { .title-bar .check {
float: right; float: right;
background: #2090ea url("/images/check.png") no-repeat center center; } background: url("/images/check.png") no-repeat center center; }
.contact { .contact {
position: relative; position: relative;
@ -584,9 +590,9 @@ input.search {
.bottom-bar { .bottom-bar {
position: fixed; position: fixed;
bottom: 0; bottom: 1;
height: 36px; height: 36px;
width: 100%; width: calc(100% - 2px);
border-top: 1px solid #f3f3f3; border-top: 1px solid #f3f3f3;
background: white; } background: white; }
.bottom-bar button, .bottom-bar input { .bottom-bar button, .bottom-bar input {

2
stylesheets/manifest.css.map
View file

File diff suppressed because one or more lines are too long

2
stylesheets/options.css.map
View file

File diff suppressed because one or more lines are too long