From 89810d72603035c2dc5f1bb5172bb134a27549b8 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Thu, 19 Nov 2015 16:55:01 -0600 Subject: [PATCH 01/18] Quit button says 'quit' --- app.html | 2 +- stylesheets/css/screencat.css | 2 +- stylesheets/sass/screencat.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app.html b/app.html index 8a39ed8..689e67b 100644 --- a/app.html +++ b/app.html @@ -37,7 +37,7 @@

ScreenCat

- + quit
diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index 6d61664..d0de1a2 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -129,7 +129,7 @@ input[type="password"] { font-size: 10px; content: "\e902"; display: inline-block; - padding: 0 3px 0 5px; } + padding-right: 5px; } .share-button { position: relative; diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index 5f27877..2bc04f1 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -159,7 +159,7 @@ input[type="password"] { font-size: 10px; content: "\e902"; display: inline-block; - padding: 0 3px 0 5px; + padding-right: 5px; } } From 3b8dda5a7f69c3e6e503a75b2bbad89dce044111 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Sat, 21 Nov 2015 15:58:09 -0600 Subject: [PATCH 02/18] Fixing viewing container that was forgotten about --- app.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app.html b/app.html index 689e67b..c92a350 100644 --- a/app.html +++ b/app.html @@ -22,12 +22,13 @@
-

+

You are now viewing a remote screen. -
- Stop Viewing - Show Window

+
+ Stop Viewing + Show Window +
From bb97e85306bc1a0946c1ff8f124b374c882256db Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Wed, 25 Nov 2015 13:35:56 -0600 Subject: [PATCH 03/18] Softening the gradient on active buttons --- stylesheets/css/screencat.css | 2 +- stylesheets/sass/screencat.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index d0de1a2..a4b8f0d 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -115,7 +115,7 @@ input[type="password"] { border-radius: 4px; } .back-button:active, .quit-button:active { - background: -webkit-linear-gradient(top, #EDEDED 0%, #FFFFFF 100%); } + background: -webkit-linear-gradient(top, #F0F0F0 0%, #FAFAFA 100%); } .back-button:before { font-family: "icomoon"; diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index 2bc04f1..6fc9c6b 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -139,7 +139,7 @@ input[type="password"] { } &:active { - background: -webkit-linear-gradient(top, #EDEDED 0%, #FFFFFF 100%); + background: -webkit-linear-gradient(top, #F0F0F0 0%, #FAFAFA 100%); } } From 58b20e03fdd5e13bf2444bd10e5874ee9cd688dc Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Sun, 29 Nov 2015 16:40:10 -0600 Subject: [PATCH 04/18] different layout on header --- app.html | 10 +++++++--- remote.html | 12 ++++++++---- stylesheets/css/screencat.css | 16 +++++++++------- stylesheets/sass/screencat.scss | 28 ++++++++++++++++++---------- 4 files changed, 42 insertions(+), 24 deletions(-) diff --git a/app.html b/app.html index c92a350..8ece925 100644 --- a/app.html +++ b/app.html @@ -35,12 +35,16 @@
-

ScreenCat

-
+
+
+
+

ScreenCat

+
+
quit
-
+
diff --git a/remote.html b/remote.html index e3303d7..07cf9fa 100644 --- a/remote.html +++ b/remote.html @@ -30,11 +30,15 @@
-

ScreenCat

-
- +
+
-
+
+

ScreenCat

+
+
+
+
diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index a4b8f0d..57c2b46 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -60,6 +60,15 @@ input[type="password"] { background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); border-bottom: 1px solid #D3D3D3; box-shadow: 0 1px 2px rgba(235, 235, 235, 0.8); } + .main-header > div { + display: flex; + justify-content: space-between; } + .main-header > div div { + flex: 1; } + .main-header > div div:nth-child(2) { + text-align: center; } + .main-header > div div:last-child { + text-align: right; } .left { float: left; @@ -124,13 +133,6 @@ input[type="password"] { display: inline-block; padding: 0 3px 0 5px; } -.quit-button:before { - font-family: "icomoon"; - font-size: 10px; - content: "\e902"; - display: inline-block; - padding-right: 5px; } - .share-button { position: relative; padding-left: 35px; } diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index 6fc9c6b..d5397b6 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -70,6 +70,23 @@ input[type="password"] { background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); border-bottom: 1px solid #D3D3D3; box-shadow: 0 1px 2px rgba(#EBEBEB, .8); + + > div { + display: flex; + justify-content: space-between; + + div { + flex: 1; + + &:nth-child(2) { + text-align: center; + } + + &:last-child { + text-align: right; + } + } + } } .left { @@ -153,16 +170,6 @@ input[type="password"] { } } -.quit-button { - &:before { - font-family: "icomoon"; - font-size: 10px; - content: "\e902"; - display: inline-block; - padding-right: 5px; - } -} - .share-button { position: relative; padding-left: 35px; @@ -210,3 +217,4 @@ input[type="password"] { a { color: black; } + From 37403d862e6ce55be8338e62882f6481d68fa7d5 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Sun, 29 Nov 2015 16:58:51 -0600 Subject: [PATCH 05/18] a few styling changes --- app.html | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/app.html b/app.html index 8ece925..8f06413 100644 --- a/app.html +++ b/app.html @@ -12,22 +12,48 @@
+
+
+
+
+
+

ScreenCat

+
+
+
+
+
-

+

You are now viewing a remote screen.

-
@@ -36,7 +62,7 @@
- +

ScreenCat

From 2d4f2f8147e468f68ac398bfa49dbf988b01690e Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Wed, 2 Dec 2015 13:50:38 -0600 Subject: [PATCH 06/18] Small copy in a screen that makes sense for it to be caption sized --- app.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app.html b/app.html index 8f06413..1e2e508 100644 --- a/app.html +++ b/app.html @@ -85,7 +85,7 @@

ScreenCat

- -
-

- You are now sharing your screen. +

+ You are now viewing a remote screen.

-
- Stop Sharing +
+ Stop Sharing
@@ -45,16 +45,21 @@

ScreenCat

-
-

+

+

You are now viewing a remote screen.

-
- Stop Viewing -
-
- Show Window -
+
+
+
+ Audio + + Audio +
+
+ Stop Viewing + Show Window +
@@ -72,15 +77,15 @@

ScreenCat

-
+

If you share your screen the remote person will have full access to your desktop, mouse and keyboard.

-
- +
+
-
- Join Remote Screen +
+ Join Remote Screen
@@ -88,10 +93,10 @@

ScreenCat

diff --git a/electron.js b/electron.js index 320a76d..5766b60 100644 --- a/electron.js +++ b/electron.js @@ -9,8 +9,8 @@ var icons = { } var mb = menubar({ - width: 445, - height: 335, + width: 400, + height: 350, index: 'file://' + path.join(__dirname, 'app.html'), icon: 'file://' + icons.disconnected }) diff --git a/remote.html b/remote.html index 07cf9fa..0bc19a0 100644 --- a/remote.html +++ b/remote.html @@ -40,7 +40,7 @@

ScreenCat

-
+

join

diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index 3c414dc..5f0a463 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -80,13 +80,14 @@ input[type="range"]::-webkit-slider-thumb { a { color: black; } -p { - word-break: break-all; } - .main-header { background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); border-bottom: 1px solid #D3D3D3; - box-shadow: 0 1px 2px rgba(235, 235, 235, 0.8); } + box-shadow: 0 1px 2px rgba(235, 235, 235, 0.8); + position: fixed; + top: 0; + width: 100%; + z-index: 2; } .main-header > div { display: flex; justify-content: space-between; } @@ -97,11 +98,14 @@ p { .main-header > div div:last-child { text-align: right; } +.main-content { + padding-top: 70px; } + .btn { font-weight: 600; z-index: 9999; border-radius: 50px; - font-size: .8em; + font-size: .9em; border-color: #3f74a8; background-color: #539be2; color: #fff; @@ -135,6 +139,8 @@ p { .btn-interface { text-transform: uppercase; letter-spacing: 2px; + padding: 20px; + font-size: .9em; cursor: pointer; box-sizing: border-box; border: 1px solid #DEDEDE; @@ -148,16 +154,16 @@ p { .back-button, .quit-button { position: relative; - color: #999; - padding: 8px 10px; + color: #A1A1A1; + padding: 8px 5px; font-size: .7em; - border: 1px solid #CFCFCF; + border: 1px solid #dddddd; border-radius: 4px; background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); } .back-button:hover, .quit-button:hover { - color: #999; - border: 1px solid #CFCFCF; + color: #A1A1A1; + border: 1px solid #dddddd; border-radius: 4px; } .back-button:active, .quit-button:active { @@ -172,20 +178,32 @@ p { .share-button { position: relative; - padding-left: 35px; } + padding-left: 40px; } .share-button:before { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; font-family: "icomoon"; - font-size: 1.4em; + font-size: 1.2em; content: "\e902"; display: inline-block; } -.destroy-button { +.join-button { position: relative; - padding: 15px; } + padding-left: 40px; } + .join-button:before { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 15px; + font-family: "icomoon"; + font-size: 1.3em; + content: "\e901"; + display: inline-block; } + +.destroy-button { + position: relative; } .destroy-button:before { position: absolute; top: 50%; @@ -198,12 +216,11 @@ p { display: inline-block; } .show-button { - position: relative; - padding: 15px; } + position: relative; } .show-button:before { + color: #539be2; position: absolute; top: 50%; - color: #539be2; transform: translateY(-50%); left: 15px; font-family: "icomoon"; @@ -211,36 +228,35 @@ p { content: "\e903"; display: inline-block; } -.join-button { - position: relative; - padding-left: 35px; } - .join-button:before { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 15px; - font-family: "icomoon"; - font-size: 1.6em; - content: "\e901"; - display: inline-block; } - .cr { overflow: auto; } .multimedia-container video { width: 100%; } +.capturer-list { + width: 100%; + padding: 0; + display: flex; + flex-flow: row wrap; } + .capturer-list li { list-style-type: none; - margin-right: 30px; - float: left; - height: 150px; } + margin: 0 auto 20px auto; + flex: 0 1 250px; + cursor: pointer; + position: relative; } + .capturer-list li:hover::after { + content: ''; + position: absolute; + width: 100%; + bottom: 28px; + top: 0; + right: 0; + background-color: rgba(83, 155, 226, 0.5); } .capturer-list img { - border: 1px solid #F7F7F7; } - -.capturer-list img:hover { - border: 1px solid black; } + width: 100%; } .capturer-list span { display: block; } diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index 106f695..d1a8b5a 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -1,5 +1,5 @@ -$button-color: #539be2; -$button-active: #3085db; +$main-color: #539be2; +$main-color-active: #3085db; $button-border-color: #3f74a8; @font-face { @@ -65,7 +65,7 @@ input[type="password"] { padding: 15px 25px; &:focus { - border: 1px solid $button-color; + border: 1px solid $main-color; } } @@ -93,14 +93,14 @@ a { color: black; } -p { - word-break: break-all; -} - .main-header { background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); border-bottom: 1px solid #D3D3D3; box-shadow: 0 1px 2px rgba(#EBEBEB, .8); + position: fixed; + top: 0; + width: 100%; + z-index: 2; > div { display: flex; @@ -120,13 +120,17 @@ p { } } +.main-content { + padding-top: 70px; +} + .btn { font-weight: 600; z-index: 9999; border-radius: 50px; - font-size: .8em; + font-size: .9em; border-color: $button-border-color; - background-color: $button-color; + background-color: $main-color; color: #fff; padding: 20px 25px; text-shadow: 1px 1px 2px $button-border-color; @@ -138,11 +142,11 @@ p { box-shadow: none; border-color: $button-border-color; color: #fff; - background-color: $button-color; + background-color: $main-color; } &:active { - background-color: $button-active; + background-color: $main-color-active; } } @@ -169,6 +173,8 @@ p { .btn-interface { text-transform: uppercase; letter-spacing: 2px; + padding: 20px; + font-size: .9em; cursor: pointer; box-sizing: border-box; border: 1px solid #DEDEDE; @@ -185,16 +191,16 @@ p { .back-button, .quit-button { position: relative; - color: #999; - padding: 8px 10px; + color: #A1A1A1; + padding: 8px 5px; font-size: .7em; - border: 1px solid #CFCFCF; + border: 1px solid #dddddd; border-radius: 4px; background: -webkit-linear-gradient(top, #FFFFFF 0%, #EDEDED 100%); &:hover { - color: #999; - border: 1px solid #CFCFCF; + color: #A1A1A1; + border: 1px solid #dddddd; border-radius: 4px; } @@ -215,7 +221,7 @@ p { .share-button { position: relative; - padding-left: 35px; + padding-left: 40px; &:before { position: absolute; @@ -223,58 +229,56 @@ p { transform: translateY(-50%); left: 15px; font-family: "icomoon"; - font-size: 1.4em; + font-size: 1.2em; content: "\e902"; display: inline-block; } } -.destroy-button { +.join-button { position: relative; - padding: 15px; + padding-left: 40px; &:before { position: absolute; - top: 50%; + top: 50%; transform: translateY(-50%); left: 15px; - color: #d64747; font-family: "icomoon"; - font-size: 1.6em; - content: "\e904"; + font-size: 1.3em; + content: "\e901"; display: inline-block; } } -.show-button { +.destroy-button { position: relative; - padding: 15px; &:before { position: absolute; top: 50%; - color: $button-color; transform: translateY(-50%); left: 15px; + color: #d64747; font-family: "icomoon"; - font-size: 1.3em; - content: "\e903"; + font-size: 1.6em; + content: "\e904"; display: inline-block; } } -.join-button { +.show-button { position: relative; - padding-left: 35px; &:before { + color: $main-color; position: absolute; - top: 50%; + top: 50%; transform: translateY(-50%); left: 15px; font-family: "icomoon"; - font-size: 1.6em; - content: "\e901"; + font-size: 1.3em; + content: "\e903"; display: inline-block; } } @@ -287,19 +291,33 @@ p { width: 100%; } +.capturer-list { + width: 100%; + padding: 0; + display: flex; + flex-flow: row wrap; +} + .capturer-list li { list-style-type: none; - margin-right: 30px; - float: left; - height: 150px; -} + margin: 0 auto 20px auto; + flex: 0 1 250px; + cursor: pointer; + position: relative; -.capturer-list img { - border: 1px solid #F7F7F7; + &:hover::after { + content: ''; + position: absolute; + width: 100%; + bottom: 28px; + top: 0; + right: 0; + background-color: rgba($main-color, .5); + } } -.capturer-list img:hover { - border: 1px solid black; +.capturer-list img { + width: 100%; } .capturer-list span { From 431c0dcc4cdfb1c04266cf1d9e8cb00d4215e9d7 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Mon, 11 Jan 2016 15:22:30 -0600 Subject: [PATCH 16/18] Put show window before stop viewing --- app.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.html b/app.html index a21db65..535577b 100644 --- a/app.html +++ b/app.html @@ -57,8 +57,8 @@

ScreenCat

Audio
- Stop Viewing Show Window + Stop Viewing
From e6cf9552c04a296c030585eecc4b5284f7c883a0 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Tue, 12 Jan 2016 11:30:02 -0600 Subject: [PATCH 17/18] New back arrow style, fixed capturer's list --- fonts/icomoon.eot | Bin 1736 -> 1740 bytes fonts/icomoon.svg | 2 +- fonts/icomoon.ttf | Bin 1572 -> 1576 bytes fonts/icomoon.woff | Bin 1648 -> 1652 bytes stylesheets/css/screencat.css | 31 +++++++++++++------------- stylesheets/sass/screencat.scss | 37 ++++++++++++++++---------------- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot index d3a1a4d85872488b0bbd1b357783ea26cddf6480..287c814cbea711e82c66a313f89870206430ea10 100755 GIT binary patch delta 342 zcmX@Xdxn?w3>yQ3#za(Us#lWHg;^*WiCo-lnNdWmiK)y(B zVnqQ14}%qup8(`5+61_rYXpa5qN>ud%F79f{FB_p?_LgoXA$)W<{=j10RGR86S0r?(4zDRCjMF9g3 zgAI@$1LP~@CFZ8i^y2&t$}q5j3{+rXW?|HroWl4^l7)f!07!;W zkdu*x;SbP0<^z8im>8Hg*E5AMii - + diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf index 193accf9624eb8718df82d592fbcf1230f814c71..6a33289681d209dc42b7ad1bb490dfa7fa5142f4 100755 GIT binary patch delta 363 zcmZ3&vw}y2fsuiMft#U$ftkU;KUm+0Ux-a?qKHoYa+la&3=E7F3=B*m8L5dWTyetM z3=GU?fU3FMbU|FWg Nf^5Q@>sgjE0sx0@OYi^y delta 336 zcmZ3%vxG;4fsuiMft#U$ftkU;KUm+0Ux+PiqKHnt)7m56Jfb@M{XvxjwdMs7(3P^<(dCSAb5kdvPbQa1xACIZ5YX-pEii4{N@ zmNh`W0vPi!Smh<=rUJ#zFfcH-f$&T(DbC*o`NcrP*nkd!Dr5$-n3-Qp=3)G$$kf1m zfPodL)|8Xcl#!|7Zv#`qzXeRUp8aF^$MB3%iea-nQwXD&FoQV*1FMoAlc|Xvld+K; zlc)$E6Z7OQW+h>ECWfrt-2nmJyR)El+~kAI@{=Dj8>s@#1=9br~dV7#Oa$luF0*+k9o< zW&zsFz;J1H@>Cc-*@nf#0wfH=tQUb;9>NAGVBi9JSB^oCA%$TH!zD%yuz{QmRzUZG O023&%H=k!&$_N1a6-uZ8 diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index 5f0a463..314d2ba 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -1,7 +1,7 @@ @font-face { font-family: 'icomoon'; - src: url("../../fonts/icomoon.eot?3lr3de"); - src: url("../../fonts/icomoon.eot?3lr3de#iefix") format("embedded-opentype"), url("../../fonts/icomoon.ttf?3lr3de") format("truetype"), url("../../fonts/icomoon.woff?3lr3de") format("woff"), url("../../fonts/icomoon.svg?3lr3de#icomoon") format("svg"); + src: url("../../fonts/icomoon.eot?ks2mpk"); + src: url("../../fonts/icomoon.eot?ks2mpk#iefix") format("embedded-opentype"), url("../../fonts/icomoon.ttf?ks2mpk") format("truetype"), url("../../fonts/icomoon.woff?ks2mpk") format("woff"), url("../../fonts/icomoon.svg?ks2mpk#icomoon") format("svg"); font-weight: normal; font-style: normal; } @@ -24,18 +24,19 @@ .icon-window:before { content: "\e903"; } +.icon-back-arrow:before { + content: "\e900"; } + .icon-stop:before { content: "\e904"; } .icon-join:before { content: "\e901"; } -.icon-back:before { - content: "\e900"; } - body { background-color: #F7F7F7; - color: #222; } + color: #222; + word-break: break-all; } input { outline: none; } @@ -154,7 +155,7 @@ a { .back-button, .quit-button { position: relative; - color: #A1A1A1; + color: #B9B9B9; padding: 8px 5px; font-size: .7em; border: 1px solid #dddddd; @@ -243,17 +244,15 @@ a { .capturer-list li { list-style-type: none; margin: 0 auto 20px auto; - flex: 0 1 250px; + flex: 0 1 200px; cursor: pointer; position: relative; } - .capturer-list li:hover::after { - content: ''; - position: absolute; - width: 100%; - bottom: 28px; - top: 0; - right: 0; - background-color: rgba(83, 155, 226, 0.5); } + .capturer-list li img { + border: 3px solid transparent; + transition: 300ms ease-in-out; } + .capturer-list li img:hover { + border: 3px solid #539be2; + border-radius: 3px; } .capturer-list img { width: 100%; } diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index d1a8b5a..6873bca 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -4,11 +4,11 @@ $button-border-color: #3f74a8; @font-face { font-family: 'icomoon'; - src: url('../../fonts/icomoon.eot?3lr3de'); - src: url('../../fonts/icomoon.eot?3lr3de#iefix') format('embedded-opentype'), - url('../../fonts/icomoon.ttf?3lr3de') format('truetype'), - url('../../fonts/icomoon.woff?3lr3de') format('woff'), - url('../../fonts/icomoon.svg?3lr3de#icomoon') format('svg'); + src: url('../../fonts/icomoon.eot?ks2mpk'); + src: url('../../fonts/icomoon.eot?ks2mpk#iefix') format('embedded-opentype'), + url('../../fonts/icomoon.ttf?ks2mpk') format('truetype'), + url('../../fonts/icomoon.woff?ks2mpk') format('woff'), + url('../../fonts/icomoon.svg?ks2mpk#icomoon') format('svg'); font-weight: normal; font-style: normal; } @@ -34,19 +34,20 @@ $button-border-color: #3f74a8; .icon-window:before { content: "\e903"; } +.icon-back-arrow:before { + content: "\e900"; +} .icon-stop:before { content: "\e904"; } .icon-join:before { content: "\e901"; } -.icon-back:before { - content: "\e900"; -} body { background-color: #F7F7F7; color: #222; + word-break: break-all; } input { @@ -191,7 +192,7 @@ a { .back-button, .quit-button { position: relative; - color: #A1A1A1; + color: #B9B9B9; padding: 8px 5px; font-size: .7em; border: 1px solid #dddddd; @@ -301,18 +302,18 @@ a { .capturer-list li { list-style-type: none; margin: 0 auto 20px auto; - flex: 0 1 250px; + flex: 0 1 200px; cursor: pointer; position: relative; - &:hover::after { - content: ''; - position: absolute; - width: 100%; - bottom: 28px; - top: 0; - right: 0; - background-color: rgba($main-color, .5); + img { + border: 3px solid transparent; + transition: 300ms ease-in-out; + } + + img:hover { + border: 3px solid $main-color; + border-radius: 3px; } } From 90f656e075eba1b33a52a250df2ecf8adb6e9c29 Mon Sep 17 00:00:00 2001 From: Julia Simplicio Date: Mon, 18 Jan 2016 21:02:38 -0600 Subject: [PATCH 18/18] Latest with everything improved to look its best hopefully :) --- app.html | 6 +++--- electron.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app.html b/app.html index 535577b..2776a38 100644 --- a/app.html +++ b/app.html @@ -23,7 +23,7 @@

ScreenCat

-
+

You are now sharing your screen.

@@ -45,7 +45,7 @@

ScreenCat

-
+

You are now viewing a remote screen.

@@ -77,7 +77,7 @@

ScreenCat

-
+

While sharing the remote person will have full access to your desktop, mouse and keyboard.

diff --git a/electron.js b/electron.js index 5766b60..b54833f 100644 --- a/electron.js +++ b/electron.js @@ -10,7 +10,7 @@ var icons = { var mb = menubar({ width: 400, - height: 350, + height: 400, index: 'file://' + path.join(__dirname, 'app.html'), icon: 'file://' + icons.disconnected })