diff --git a/app.html b/app.html index 030cbf3..2776a38 100644 --- a/app.html +++ b/app.html @@ -12,44 +12,80 @@
-
-

+

+
+
+
+
+

ScreenCat

+
+
+
+
+
+
+

You are now sharing your screen. - Stop

+
+ Stop Sharing +
-
-

+

+
+
+
+
+

ScreenCat

+
+
+
+
+
+
+

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

+
+
+
+ Audio + + Audio +
+
+ Show Window + Stop Viewing +
-

ScreenCat

-
- - +
+ Back
-
+
+

ScreenCat

+
+
+ quit +
+
-
+

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

-
- +
+
-
- Join Remote Screen +
+ Join Remote Screen
@@ -64,27 +100,27 @@

ScreenCat

diff --git a/electron.js b/electron.js index 6a389cc..b54833f 100644 --- a/electron.js +++ b/electron.js @@ -9,8 +9,8 @@ var icons = { } var mb = menubar({ - width: 700, - height: 300, + width: 400, + height: 400, index: 'file://' + path.join(__dirname, 'app.html'), icon: 'file://' + icons.disconnected }) diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot index 2dc4ff7..287c814 100755 Binary files a/fonts/icomoon.eot and b/fonts/icomoon.eot differ diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg index 09a0370..b24489e 100755 --- a/fonts/icomoon.svg +++ b/fonts/icomoon.svg @@ -7,8 +7,9 @@ - - - - + + + + + \ No newline at end of file diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf index 6632e48..6a33289 100755 Binary files a/fonts/icomoon.ttf and b/fonts/icomoon.ttf differ diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff index 2464ed3..1e50ed1 100755 Binary files a/fonts/icomoon.woff and b/fonts/icomoon.woff differ diff --git a/remote.html b/remote.html index e3303d7..0bc19a0 100644 --- a/remote.html +++ b/remote.html @@ -30,13 +30,17 @@
-

ScreenCat

-
- +
+
-
+
+

ScreenCat

+
+
+
+
-
+

join

diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css index ad376bb..314d2ba 100644 --- a/stylesheets/css/screencat.css +++ b/stylesheets/css/screencat.css @@ -1,13 +1,13 @@ @font-face { font-family: 'icomoon'; - src: url("../../fonts/icomoon.eot?yai13c"); - src: url("../../fonts/icomoon.eot?yai13c#iefix") format("embedded-opentype"), url("../../fonts/icomoon.ttf?yai13c") format("truetype"), url("../../fonts/icomoon.woff?yai13c") format("woff"), url("../../fonts/icomoon.svg?yai13c#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; } [class^="icon-"], [class*=" icon-"] { - font-size: 1em; - font-family: 'icomoon'; + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; @@ -18,25 +18,28 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -.icon-join:before { - content: "\e901"; } - -.icon-quit:before { +.icon-share-window:before { content: "\e902"; } -.icon-share:before { +.icon-window:before { content: "\e903"; } -.icon-back:before { +.icon-back-arrow:before { content: "\e900"; } +.icon-stop:before { + content: "\e904"; } + +.icon-join:before { + content: "\e901"; } + body { background-color: #F7F7F7; - color: #222; } + color: #222; + word-break: break-all; } input { - outline: none; - padding: 15px 25px; } + outline: none; } input[type="text"], input[type="tel"], @@ -46,7 +49,8 @@ input[type="search"], input[type="number"], input[type="password"] { border: 1px solid #DEDEDE; - border-radius: 4px; } + border-radius: 4px; + padding: 15px 25px; } input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, @@ -56,27 +60,59 @@ input[type="password"] { input[type="password"]:focus { border: 1px solid #539be2; } +input[type='range'] { + -webkit-appearance: none; + cursor: pointer; + background: #fafafa; + outline: none; + border: none; + border-radius: 25px; + -webkit-box-shadow: inset 0 1px 2px 0 #dfdfdf, inset 0 -1px 1px 0 #ededed; } + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border: 1px solid #3f74a8; + border-radius: 12px; + background: #539be2; + -webkit-box-shadow: 0 1px 2px #d3d3d3; } + +a { + color: black; } + .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; } + .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; - display: block; } +.main-content { + padding-top: 70px; } .btn { font-weight: 600; z-index: 9999; - border-radius: 25px; - font-size: .8em; + border-radius: 50px; + font-size: .9em; border-color: #3f74a8; background-color: #539be2; color: #fff; - padding: 15px 25px; + padding: 20px 25px; text-shadow: 1px 1px 2px #3f74a8; cursor: pointer; - cursor: hand; transition: 200ms ease-in; } .btn:hover, .btn:active { box-shadow: none; @@ -90,6 +126,7 @@ input[type="password"] { border: none; color: #222; text-shadow: none; + cursor: pointer; background-color: transparent; position: relative; padding: 8px 8px 8px 25px; } @@ -100,40 +137,49 @@ input[type="password"] { .btn-plain:active { color: #ccc; } +.btn-interface { + text-transform: uppercase; + letter-spacing: 2px; + padding: 20px; + font-size: .9em; + cursor: pointer; + box-sizing: border-box; + border: 1px solid #DEDEDE; + border-radius: 4px; + color: gray; + box-shadow: 0px 1px 3px rgba(222, 222, 222, 0.5); } + .btn-interface:active { + transform: translateY(1px); + box-shadow: none; } + .back-button, .quit-button { position: relative; - color: #999; - padding: 6px 10px; - border: 1px solid #CFCFCF; + color: #B9B9B9; + padding: 8px 5px; + font-size: .7em; + 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 { - background: -webkit-linear-gradient(top, #EDEDED 0%, #FFFFFF 100%); } + background: -webkit-linear-gradient(top, #F0F0F0 0%, #FAFAFA 100%); } .back-button:before { font-family: "icomoon"; font-size: 10px; content: "\e900"; display: inline-block; - padding: 0 3px 0 5px; } - -.quit-button:before { - font-family: "icomoon"; - font-size: 10px; - content: "\e902"; - display: inline-block; - padding: 0 3px 0 5px; } + padding: 0 3px 0 0px; } .share-button { position: relative; - padding-left: 35px; } + padding-left: 40px; } .share-button:before { position: absolute; top: 50%; @@ -141,39 +187,75 @@ input[type="password"] { left: 15px; font-family: "icomoon"; font-size: 1.2em; - content: "\e903"; + content: "\e902"; display: inline-block; } .join-button { position: relative; - padding-left: 35px; } + padding-left: 40px; } .join-button:before { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; font-family: "icomoon"; - font-size: 1.2em; + font-size: 1.3em; content: "\e901"; display: inline-block; } +.destroy-button { + position: relative; } + .destroy-button:before { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 15px; + color: #d64747; + font-family: "icomoon"; + font-size: 1.6em; + content: "\e904"; + display: inline-block; } + +.show-button { + position: relative; } + .show-button:before { + color: #539be2; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 15px; + font-family: "icomoon"; + font-size: 1.3em; + content: "\e903"; + 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 200px; + cursor: pointer; + position: relative; } + .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 { - border: 1px solid #F7F7F7; } - -.capturer-list img:hover { - border: 1px solid black; } + width: 100%; } .capturer-list span { display: block; } @@ -181,5 +263,14 @@ input[type="password"] { .content-container.w-50 { margin: auto; } -a { - color: black; } +.interface-wrap:after { + display: block; + content: ''; + clear: both; } + +.vol-ctrl { + position: relative; + text-align: center; } + +.vol-ctrl-wrap { + padding: 20px 15px 15px; } diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss index a0c874f..6873bca 100644 --- a/stylesheets/sass/screencat.scss +++ b/stylesheets/sass/screencat.scss @@ -1,54 +1,57 @@ -$button-color: #539be2; -$button-active: #3085db; +$main-color: #539be2; +$main-color-active: #3085db; $button-border-color: #3f74a8; @font-face { - font-family: 'icomoon'; - src:url('../../fonts/icomoon.eot?yai13c'); - src:url('../../fonts/icomoon.eot?yai13c#iefix') format('embedded-opentype'), - url('../../fonts/icomoon.ttf?yai13c') format('truetype'), - url('../../fonts/icomoon.woff?yai13c') format('woff'), - url('../../fonts/icomoon.svg?yai13c#icomoon') format('svg'); - font-weight: normal; - font-style: normal; + font-family: 'icomoon'; + 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; } [class^="icon-"], [class*=" icon-"] { - font-size: 1em; - font-family: 'icomoon'; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -.icon-join:before { - content: "\e901"; +.icon-share-window:before { + content: "\e902"; } -.icon-quit:before { - content: "\e902"; +.icon-window:before { + content: "\e903"; +} +.icon-back-arrow:before { + content: "\e900"; } -.icon-share:before { - content: "\e903"; +.icon-stop:before { + content: "\e904"; } -.icon-back:before { - content: "\e900"; +.icon-join:before { + content: "\e901"; } body { background-color: #F7F7F7; color: #222; + word-break: break-all; } input { outline: none; - padding: 15px 25px; } input[type="text"], @@ -60,35 +63,79 @@ input[type="number"], input[type="password"] { border: 1px solid #DEDEDE; border-radius: 4px; + padding: 15px 25px; &:focus { - border: 1px solid $button-color; + border: 1px solid $main-color; } } +input[type='range'] { + -webkit-appearance: none; + cursor: pointer; + background: #fafafa; + outline: none; + border: none; + border-radius: 25px; + -webkit-box-shadow: inset 0 1px 2px 0 #dfdfdf, inset 0 -1px 1px 0 #ededed; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border: 1px solid #3f74a8; + border-radius: 12px; + background: #539be2; + -webkit-box-shadow: 0 1px 2px #d3d3d3; +} + +a { + color: black; +} + .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; + justify-content: space-between; + + div { + flex: 1; + + &:nth-child(2) { + text-align: center; + } + + &:last-child { + text-align: right; + } + } + } } -.left { - float: left; - display: block; +.main-content { + padding-top: 70px; } .btn { font-weight: 600; z-index: 9999; - border-radius: 25px; - font-size: .8em; + border-radius: 50px; + font-size: .9em; border-color: $button-border-color; - background-color: $button-color; + background-color: $main-color; color: #fff; - padding: 15px 25px; + padding: 20px 25px; text-shadow: 1px 1px 2px $button-border-color; cursor: pointer; - cursor: hand; transition: 200ms ease-in; &:hover, @@ -96,11 +143,11 @@ input[type="password"] { 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; } } @@ -108,6 +155,7 @@ input[type="password"] { border: none; color: #222; text-shadow: none; + cursor: pointer; background-color: transparent; position: relative; padding: 8px 8px 8px 25px; @@ -123,23 +171,42 @@ input[type="password"] { } } +.btn-interface { + text-transform: uppercase; + letter-spacing: 2px; + padding: 20px; + font-size: .9em; + cursor: pointer; + box-sizing: border-box; + border: 1px solid #DEDEDE; + border-radius: 4px; + color: gray; + box-shadow: 0px 1px 3px rgba(#DEDEDE, .5); + + &:active { + transform: translateY(1px); + box-shadow: none; + } +} + .back-button, .quit-button { position: relative; - color: #999; - padding: 6px 10px; - border: 1px solid #CFCFCF; + color: #B9B9B9; + padding: 8px 5px; + font-size: .7em; + 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; } &:active { - background: -webkit-linear-gradient(top, #EDEDED 0%, #FFFFFF 100%); + background: -webkit-linear-gradient(top, #F0F0F0 0%, #FAFAFA 100%); } } @@ -149,48 +216,70 @@ input[type="password"] { font-size: 10px; content: "\e900"; display: inline-block; - padding: 0 3px 0 5px; + padding: 0 3px 0 0px; } } -.quit-button { +.share-button { + position: relative; + padding-left: 40px; + &:before { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 15px; font-family: "icomoon"; - font-size: 10px; + font-size: 1.2em; content: "\e902"; display: inline-block; - padding: 0 3px 0 5px; } } -.share-button { +.join-button { + position: relative; + padding-left: 40px; + + &: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; - padding-left: 35px; &:before { position: absolute; top: 50%; transform: translateY(-50%); left: 15px; + color: #d64747; font-family: "icomoon"; - font-size: 1.2em; - 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.2em; - content: "\e901"; + font-size: 1.3em; + content: "\e903"; display: inline-block; } } @@ -203,19 +292,33 @@ input[type="password"] { 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 200px; + cursor: pointer; + position: relative; -.capturer-list img { - border: 1px solid #F7F7F7; + img { + border: 3px solid transparent; + transition: 300ms ease-in-out; + } + + img:hover { + border: 3px solid $main-color; + border-radius: 3px; + } } -.capturer-list img:hover { - border: 1px solid black; +.capturer-list img { + width: 100%; } .capturer-list span { @@ -226,6 +329,19 @@ input[type="password"] { margin: auto; } -a { - color: black; +.interface-wrap { + &:after { + display: block; + content: ''; + clear: both; + } } + +.vol-ctrl { + position: relative; + text-align: center; +} + +.vol-ctrl-wrap { + padding: 20px 15px 15px; +} \ No newline at end of file