DarkTheme/brammp_transfer.sh-web
1
0
Fork 0
Code Issues Pull Requests Releases 4 Wiki Activity

Made minimal dark version

Browse Source
This commit is contained in:
root
2020-07-18 00:00:42 +00:00
parent 96e06a2276
commit 7c6c0dc20f
37 changed files with 7009 additions and 26009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
.vscode/tasks.json vendored Normal file
View File

@@ -0,0 +1,16 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"type": "grunt",
"task": "build",
"problemMatcher": [
"$eslint-compact"
],
"group": "build",
"label": "grunt: build"
}
]
}

11
README.md
View File

@@ -1,18 +1,23 @@
# transfer.sh-web # brammp_transfer.sh-web
This repository contains the web frontend for [transfer.sh](https://github.com/dutchcoders/transfer.sh/). This repository contains the web frontend for [transfer.sh](https://github.com/dutchcoders/transfer.sh/) modified by Brammp.
## How to use it ## How to use it
You must specify `web-path` directory, pointing to `dist` generated folder (Grunt & bindata) You must specify `web-path` directory, pointing to `dist` generated folder (Grunt & bindata)
Sample : Docker Sample :
``` ```
docker run -d -v /folder:/uploads -v /folder/dist:/webapp --publish 5000:8080 dutchcoders/transfer.sh:latest --provider local --basedir /uploads --web-path /webapp/ docker run -d -v /folder:/uploads -v /folder/dist:/webapp --publish 5000:8080 dutchcoders/transfer.sh:latest --provider local --basedir /uploads --web-path /webapp/
``` ```
Go Prebuild Sample :
```
./transfersh-v1.1.7-linux-amd64 --provider=local --listener :8080 --temp-path=/tmp/ --basedir=/tmp/ --web-path /brammp_transfer.sh-web/dist
```
## Requirement ## Requirement
You must install first : You must install first :
* Nodejs 10
* Grunt * Grunt
* Bower * Bower
* Go & go-bindata (go get -u github.com/shuLhan/go-bindata/...) * Go & go-bindata (go get -u github.com/shuLhan/go-bindata/...)

26027
bindata_gen.go
View File

File diff suppressed because one or more lines are too long

6463
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

11
src/404.html
View File

@@ -18,8 +18,8 @@
padding: 30px 10px; padding: 30px 10px;
font-size: 20px; font-size: 20px;
line-height: 1.4; line-height: 1.4;
color: #737373; color: #86acd1;
background: #f0f0f0; background: #3b3b3b;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} }
@@ -33,11 +33,10 @@
max-width: 500px; max-width: 500px;
_width: 500px; _width: 500px;
padding: 30px 20px 50px; padding: 30px 20px 50px;
border: 1px solid #b3b3b3; border: 1px solid #1e70bf;
border-radius: 4px; border-radius: 4px;
margin: 0 auto; margin: 0 auto;
box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #4c505c;
background: #fcfcfc;
} }
h1 { h1 {
@@ -47,7 +46,7 @@
} }
h1 span { h1 span {
color: #bbb; color: #1e70bf;
} }
h3 { h3 {

1
src/download.audio.html
View File

@@ -12,7 +12,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
<script src="../scripts/vendor/video.js"></script> <script src="../scripts/vendor/video.js"></script>
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"

1
src/download.html
View File

@@ -10,7 +10,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"

1
src/download.image.html
View File

@@ -10,7 +10,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"
<section id="home"> <section id="home">

1
src/download.markdown.html
View File

@@ -10,7 +10,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"
<section id="home"> <section id="home">

1
src/download.sandbox.html
View File

@@ -10,7 +10,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"
<section id="home"> <section id="home">

1
src/download.video.html
View File

@@ -11,7 +11,6 @@ include "includes/download-head.html"
<body id="download"> <body id="download">
<script src="../scripts/vendor/video.js"></script> <script src="../scripts/vendor/video.js"></script>
include "includes/ga.html"
include "includes/download-navigation.html" include "includes/download-navigation.html"
<section id="home"> <section id="home">

BIN
src/images/HeadImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/images/bitcoin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.6 KiB

BIN
src/images/reviews/dave.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
src/images/reviews/jacob.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 26 KiB

BIN
src/images/reviews/kareem.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 19 KiB

BIN
src/images/reviews/lars.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
src/images/reviews/pg.jpeg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 31 KiB

2
src/images/terminal-top.svg
View File

@@ -50,7 +50,7 @@
<path <path
d="m 93.957497,365.85895 750.000003,0 0,31.76074 -750.000003,0 z" d="m 93.957497,365.85895 750.000003,0 0,31.76074 -750.000003,0 z"
id="rect4487" id="rect4487"
style="fill:#85b5bb;fill-opacity:1;stroke:none" /> style="fill:#1e70bf;fill-opacity:1;stroke:none" />
<g <g
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1454.9192)" transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1454.9192)"
id="g24" id="g24"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

6
src/images/tor.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

26
src/includes/download-footer.html
View File

@@ -1,37 +1,15 @@
<footer> <footer>
<div class="wrapper"> <div class="wrapper">
<div style="">
<a href="bitcoin:164ybRMLbg1dhhWWiUkXtiNr7jUhMKdJqH" label="Bitcoin+Donation" style="word-wrap: break-word;">
<img border="0" src="../images/bitcoin.png" style="margin: 0 auto;;">
</a>
</div>
<br/>
<br/> <br/>
<img src="../images/Logo-orange.png" alt="Founded in Holland"> <img src="../images/Logo-orange.png" alt="Founded in Holland">
<p>Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a> <p>A instance of transfer.sh<br>
Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
</p> </p>
</div> </div>
</footer> </footer>
<a href="https://github.com/dutchcoders/transfer.sh/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script>
(function() {
var userVoiceKey = "{{.UserVoiceKey}}";
if (userVoiceKey != "") {
var uv = document.createElement('script');
uv.type = 'text/javascript';
uv.async = true;
uv.src = '//widget.uservoice.com/{{.UserVoiceKey}}.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(uv, s)
}
})()
</script>
<!--[if lt IE 7]> <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <![endif]-->

9
src/includes/download-navigation.html
View File

@@ -1,15 +1,8 @@
<div id="navigation"> <div id="navigation">
<div class="wrapper"> <div class="wrapper">
<a href="/"> <a href="/">
<img class="navimg" src="../images/HeadImg.png" alt="Brammp's Transfer.sh service">
<h1>{{.Hostname}}</h1> <h1>{{.Hostname}}</h1>
</a> </a>
<ul class="hidden-xs">
<li><a href="../">home</a>
</li>
<li><a href="../#samples">sample use cases</a>
</li>
<li><a href="#contact">contact us</a>
</li>
</ul>
</div> </div>
</div> </div>

3
src/includes/download-top.html
View File

@@ -3,7 +3,8 @@
<h4>type: <b>{{.ContentType}}</b></h4> <h4>type: <b>{{.ContentType}}</b></h4>
<h4>size: <b>{{.ContentLength | format "#,###."}}</b> bytes</h4> <h4>size: <b>{{.ContentLength | format "#,###."}}</b> bytes</h4>
<a href="{{.UrlGet}}" class="btn-cta btn"> download</i> </a> <br/><br/> <a href="{{.UrlGet}}" class="btn-cta btn download-btn"> Download</i> </a> <br/><br/>
<div class="qrcode"> <div class="qrcode">
<img src="data:image/png;base64,{{.QRCode}}"/> <img src="data:image/png;base64,{{.QRCode}}"/>
</div> </div>
<br>

26
src/includes/footer.html
View File

@@ -1,37 +1,15 @@
<footer> <footer>
<div class="wrapper"> <div class="wrapper">
<div style="">
<a href="bitcoin:164ybRMLbg1dhhWWiUkXtiNr7jUhMKdJqH" label="Bitcoin+Donation" style="word-wrap: break-word;">
<img border="0" src="images/bitcoin.png" style="margin: 0 auto;;">
</a>
</div>
<br/>
<br/> <br/>
<img src="images/Logo-orange.png" alt="Founded in Holland"> <img src="images/Logo-orange.png" alt="Founded in Holland">
<p>Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a> <p>A instance of transfer.sh<br>
Made with <i class="icon-heart"></i> by <a href="http://blog.dutchcoders.io/" title="Dutch Coders">Dutch Coders</a>
</p> </p>
</div> </div>
</footer> </footer>
<a href="https://github.com/dutchcoders/transfer.sh/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script>
(function() {
var userVoiceKey = "{{.UserVoiceKey}}";
if (userVoiceKey != "") {
var uv = document.createElement('script');
uv.type = 'text/javascript';
uv.async = true;
uv.src = '//widget.uservoice.com/{{.UserVoiceKey}}.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(uv, s)
}
})()
</script>
<!--[if lt IE 7]> <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <![endif]-->

11
src/includes/navigation.html
View File

@@ -1,15 +1,8 @@
<div id="navigation"> <div id="navigation">
<div class="wrapper"> <div class="wrapper">
<a href="/"> <a href="/">
<h1>{{.Hostname}}</h1> <img class="navimg" src="../images/HeadImg.png" alt="Brammp's Transfer.sh service">
<h1>transfer.sh@{{.Hostname}}</h1>
</a> </a>
<ul class="hidden-xs">
<li><a href="#">home</a>
</li>
<li><a href="#samples">sample use cases</a>
</li>
<li><a href="#contact">contact us</a>
</li>
</ul>
</div> </div>
</div> </div>

169
src/index.html
View File

@@ -11,25 +11,6 @@ include "includes/head.html"
<body> <body>
<script>
var gaKey = "{{.GAKey}}";
if (gaKey != "") {
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', gaKey, 'transfer.sh');
ga('send', 'pageview');
}
</script>
include "includes/navigation.html" include "includes/navigation.html"
<section id="home"> <section id="home">
@@ -73,7 +54,7 @@ include "includes/navigation.html"
</div> </div>
<div> <div>
<a href="#features" class="btn-cta btn-home">learn more</i> </a> <a href="#features" class="btn-cta btn-home">Learn more</i> </a>
</div> </div>
</div> </div>
</section> </section>
@@ -91,20 +72,6 @@ include "includes/navigation.html"
<i class="icon-link"></i> <i class="icon-link"></i>
<h3>Share files with a URL</h3> <h3>Share files with a URL</h3>
</div> </div>
<div class="col-md-3 col-xs-6">
<i class="icon-database"></i>
<h3>Upload up to 10 GB</h3>
</div>
<div class="col-md-3 col-xs-6">
<i class="icon-clock"></i>
<h3>Files stored for 14 days</h3>
</div>
</div>
<div class="row animated fadeInDown">
<div class="col-md-offset-3 col-md-3 col-xs-6">
<i class="icon-tag"></i>
<h3>For free</h3>
</div>
<div class="col-md-3 col-xs-6"> <div class="col-md-3 col-xs-6">
<i class="icon-lock"></i> <i class="icon-lock"></i>
<h3>Encrypt your files</h3> <h3>Encrypt your files</h3>
@@ -295,144 +262,10 @@ include "includes/navigation.html"
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-6">
<h3>Upload a file using Unofficially client in Python</h3>
<div class="terminal-top">
</div>
<div class="terminal">
<code class="code-wrapper">
<span class="code-title"># transfersh-cli (https://github.com/tanrax/transfersh-cli)</span>
$ trasnfersh photos.zip
<span class="code-title"># Uploading file</span>
<span class="code-title"># Download from here: {{.WebAddress}}xxxxxx/photos.zip</span>
<span class="code-title"># It has also been copied to the clipboard!</span>
</code>
</div>
</div>
<div class="col-md-6">
<h3>Send us your awesome example</h3>
<div class="terminal-top">
</div>
<div class="terminal">
<code class="code-wrapper"><span class="code-title"># Your awesome sample will be put here</span>
</code>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
<section id="share">
<div class="wrapper">
<h2 class="page-title">Follow on GitHub</h2>
<br>
<br>
<iframe src="https://ghbtns.com/github-btn.html?user=dutchcoders&repo=transfer.sh&type=follow&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="250" height="50"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=dutchcoders&repo=transfer.sh&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="200" height="50"></iframe>
</div>
</section>
<section id="reviews">
<div class="wrapper">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<blockquote class="twitter-tweet tweet-xl" lang="en">
<a href="https://twitter.com/FloifyDave/status/517383101425516544">
<img class="twitter-profile" src="images/reviews/dave.jpg" alt="">
</a>
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> Thanks for transfer.sh. Just used it for a production purpose for a customer. So great, so easy, so https. :)</p>
<a href="https://twitter.com/FloifyDave/status/517383101425516544">
&mdash; Dave Sims (@FloifyDave)</a>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<blockquote class="twitter-tweet" lang="en">
<a href="https://twitter.com/kareemk/status/517029789191118849">
<img class="twitter-profile" src="images/reviews/kareem.jpg" alt="">
</a>
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p><a href="https://twitter.com/kareemk/status/517029789191118849">&mdash; Kareem Kouddous (@kareemk) </a>
</blockquote>
</div>
<div class="col-md-6 col-xs-12">
<blockquote class="twitter-tweet" lang="en">
<a href="https://twitter.com/drakpz/status/517008058841829376">
<img class="twitter-profile" src="images/reviews/pg.jpeg" alt="">
</a>
<p><a href="http://t.co/JomAmqWYEB">http://t.co/JomAmqWYEB</a> by <a href="https://twitter.com/dutchcoders">@dutchcoders</a> is pure awesomeness! any chance of source on github? :-)</p><a href="https://twitter.com/drakpz/status/517008058841829376">&mdash; PJ Spagnolatti (@drakpz)</a>
</blockquote>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<blockquote class="twitter-tweet" lang="en">
<a href="https://twitter.com/jacoblindgren11/status/516975006501203968">
<img class="twitter-profile" src="images/reviews/jacob.jpg" alt="">
</a>
<p>Love transfer.sh! Will be using it from now on! Thanks for the amazing service we can use from the CLI <a href="https://twitter.com/dutchcoders">@dutchcoders</a>
</p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">&mdash; Jacob Lindgren (@jacoblindgren11) </a>
</blockquote>
</div>
<div class="col-md-6 col-xs-12">
<blockquote class="twitter-tweet" lang="en">
<a href="https://twitter.com/arvestad/status/519507976491499521">
<img class="twitter-profile" src="images/reviews/lars.jpg" alt="">
</a>
<p>transfer.sh is my latest fav service! Try simple command-line and web file sharing! <a href="https://t.co/FSrsb1JKJd">https://t.co/FSrsb1JKJd</a>&#10;Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p> <a href="https://twitter.com/arvestad/status/519507976491499521">&mdash; Lars Arvestad (@arvestad)</a>
</blockquote>
</div>
</div>
</div>
</section>
<section id="share">
<div class="wrapper">
<h2 class="page-title">Share the love</h2>
<ul class="share-buttons">
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftransfer.sh&t=" target="_blank" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(document.URL) + '&t=' + encodeURIComponent(document.URL)); return false;"> <i class="icon-facebook"></i>
</a>
</li>
<li>
<a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Ftransfer.sh&text=:%20http%3A%2F%2Ftransfer.sh" target="_blank" title="Tweet" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(document.title) + ':%20' + encodeURIComponent(document.URL)); return false;"> <i class="icon-twitter"></i>
</li>
<li>
<a href="https://plus.google.com/share?url=http%3A%2F%2Ftransfer.sh" target="_blank" title="Share on Google+" onclick="window.open('https://plus.google.com/share?url=' + encodeURIComponent(document.URL)); return false;"> <i class="icon-gplus"></i>
</a>
</li>
<li>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Ftransfer.sh&title=&summary=&source=http%3A%2F%2Ftransfer.sh" target="_blank" title="Share on LinkedIn" onclick="window.open('http://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(document.URL) + '&title=' + encodeURIComponent(document.title)); return false;"> <i class="icon-linkedin"></i>
</a>
</li>
</ul>
</div>
</section>
<section id="contact">
<div class="wrapper">
<i class="icon-mail"></i>
<h2 class="page-title">
Any questions?
</h2>
<a href="#" data-uv-trigger class="btn-cta">contact us</a>
</div>
</section>
<section id="tor">
<div class="wrapper">
<a href="https://www.torproject.org"><img src="images/tor.svg" alt="">
</a>
<br/>
<a href="http://jxm5d6emw5rknovg.onion/">http://jxm5d6emw5rknovg.onion/</a>
</div>
</section>
include "includes/footer.html" include "includes/footer.html"
include "includes/js.html" include "includes/js.html"

5
src/scripts/base.js
View File

@@ -87,11 +87,8 @@ $(document).ready(function() {
}).bind('dragover', function(event) { }).bind('dragover', function(event) {
event.preventDefault(); event.preventDefault();
// show drop indicator // show drop indicator
$('#terminal').addClass('dragged');
$('#web').addClass('dragged');
}).bind('dragleave', function() { }).bind('dragleave', function() {
$('#terminal').removeClass('dragged');
$('#web').removeClass('dragged');
}).bind('drop dragdrop', function(event) { }).bind('drop dragdrop', function(event) {
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files; var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;

15
src/styles/config.less
View File

@@ -1,19 +1,22 @@
// Colors // Colors
@blue: #85b5bb; @light-gray:#4c505c;
@dark-blue: #36535a; @light-blue: #86acd1;
@red: #e96e57; @red: #e96e57;
@light-gray: #f6f8f8;
@dark-gray: #3b3b3b; @dark-gray: #3b3b3b;
@dark-blue: #1e70bf;
@white: #fff;
@term: #000;
@navbar-default-bg: #fff; @navbar-default-bg: #fff;
@text-color: @dark-gray; @text-color: @light-blue;
@link-color: @dark-gray; @link-color: @dark-blue;
@progress-bg: @blue; @progress-bg: @light-gray;
// Typography // Typography
@font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

15
src/styles/includes/contact.less
View File

@@ -2,14 +2,14 @@
text-align: center; text-align: center;
i { i {
font-size: 160px; font-size: 160px;
color: @blue; color: @light-gray;
} }
padding: 100px 0; padding: 100px 0;
} }
#share { #share {
text-align:center; text-align:center;
background: @blue; background: @dark-blue;
color: #fff; color: #fff;
i { i {
font-size: 50px; font-size: 50px;
@@ -28,24 +28,25 @@
footer { footer {
text-align: center; text-align: center;
background: @dark-blue; background: @light-blue;
padding: 30px 0; padding: 30px 0;
p { p {
margin: 0; margin: 0;
color: @white;
} }
i { i {
color: @red; color: @red;
} }
a { a {
color: @light-gray; color: @white;
} }
} }
#features { #features {
background: @light-gray; background: @dark-gray;
text-align: center; text-align: center;
i { i {
color: @blue; color: @light-gray;
font-size: 160px; font-size: 160px;
} }
padding: 40px 0; padding: 40px 0;
@@ -58,7 +59,7 @@ footer {
code { code {
display:block; display:block;
padding: 20px; padding: 20px;
background: @light-gray; background: @dark-gray;
font-family: @font-family-mono; font-family: @font-family-mono;
} }
} }

44
src/styles/includes/global.less
View File

@@ -1,7 +1,7 @@
body { body {
max-width: 2000px; max-width: 100%;
margin: 0 auto; margin: 0 auto;
background-color: #383c49;
} }
.browsehappy { .browsehappy {
@@ -16,7 +16,7 @@ body {
ul { ul {
list-style: none; list-style: none;
max-width: 400px; max-width: 400px;
marghomein: 0 auto; // marghomein: 0 auto;
} }
li { li {
display: inline-block; display: inline-block;
@@ -26,22 +26,13 @@ body {
text-align: center; text-align: center;
font-family: @font-family-mono; font-family: @font-family-mono;
margin-bottom: 15px; margin-bottom: 15px;
color: @dark-blue; color: @light-blue;
font-size: 35px; font-size: 35px;
} }
@media (min-width: @screen-sm-min) {
ul {
float: right;
margin: 33px 0;
}
h1 {
float: left
}
}
a { a {
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 15px;
color: @dark-gray; color: @dark-blue;
} }
} }
@@ -57,9 +48,9 @@ body {
.btn-cta { .btn-cta {
.transition(all @animation-duration); .transition(all @animation-duration);
padding: 10px 50px; padding: 10px 50px;
border: 2px solid @red; border: 2px solid @light-blue;
font-size: 20px; font-size: 20px;
color: @red; color: @light-blue;
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
@@ -68,6 +59,16 @@ body {
border-color: @dark-blue; border-color: @dark-blue;
color: @dark-blue; color: @dark-blue;
} }
&:focus {
text-decoration: none;
border-color: @dark-blue;
color: @dark-blue;
}
}
.download-btn {
color: @red;
border-color: @red;
} }
.wrapper { .wrapper {
@@ -76,10 +77,6 @@ body {
.container; .container;
} }
section {
// padding: 50px 0
}
img { img {
max-width: 100%; max-width: 100%;
margin: 0 auto; margin: 0 auto;
@@ -87,7 +84,7 @@ img {
a { a {
text-decoration: underline; text-decoration: underline;
color: @dark-blue; color: @light-blue;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
@@ -99,4 +96,9 @@ a {
} }
::-moz-selection { ::-moz-selection {
background: @red; background: @red;
}
img.navimg {
max-height: 250px;
display: block;
} }

13
src/styles/includes/home.less
View File

@@ -48,7 +48,7 @@
padding-bottom: 50px; padding-bottom: 50px;
width: 100%; width: 100%;
display: block; display: block;
background: @dark-blue; background: @term;
.transition(all @animation-duration ease); .transition(all @animation-duration ease);
.btn-cta { .btn-cta {
padding: 5px 10px; padding: 5px 10px;
@@ -65,9 +65,6 @@
} }
.border-bottom-radius (5px); .border-bottom-radius (5px);
}
.dragged {
background: lighten(@dark-blue, 5%)!important;
} }
.terminal { .terminal {
@@ -78,9 +75,9 @@
.border-top-radius (0); .border-top-radius (0);
.border-bottom-radius (5px); .border-bottom-radius (5px);
background: @dark-blue; background: @term;
// background: url(../images/terminal.svg); // background: url(../images/terminal.svg);
backbground-repeat: no-repeat; // backbground-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
@@ -136,8 +133,8 @@
h3 {color: #fff; h3 {color: #fff;
font-size: 25px; font-size: 25px;
} }
background: @blue; background: @light-gray;
.btn-cta { .btn-cta {
border-color: @dark-blue; border-color: @light-blue;
} }
} }

14
src/styles/includes/pages.less
View File

@@ -1,6 +1,6 @@
#features { #features {
background: @light-gray; background: @dark-gray;
text-align: center; text-align: center;
h3 { h3 {
margin-top: -20px; margin-top: -20px;
@@ -11,7 +11,7 @@
font-size: 18px font-size: 18px
} }
i { i {
color: @blue; color: @dark-blue;
font-size: 100px; font-size: 100px;
} }
padding:100px 0; padding:100px 0;
@@ -39,7 +39,7 @@
#share { #share {
text-align:center; text-align:center;
background: @blue; background: @dark-blue;
color: #fff; color: #fff;
i { i {
font-size: 50px; font-size: 50px;
@@ -74,7 +74,7 @@
margin: 0 auto; margin: 0 auto;
margin-bottom: 10px; margin-bottom: 10px;
} }
background: @light-gray; background: @dark-gray;
padding: 50px 0; padding: 50px 0;
a { a {
font-size: 20px; font-size: 20px;
@@ -84,7 +84,7 @@
footer { footer {
text-align: center; text-align: center;
background: @dark-blue; background: @dark-gray;
padding: 30px 0; padding: 30px 0;
color: #fff; color: #fff;
p { p {
@@ -94,7 +94,7 @@ footer {
color: @red; color: @red;
} }
a { a {
color: @light-gray; color: @white;
} }
img { img {
max-height: 40px; max-height: 40px;
@@ -107,7 +107,7 @@ footer {
text-align: center; text-align: center;
i { i {
font-size: 160px; font-size: 160px;
color: @blue; color: @light-gray;
} }
padding:100px 0; padding:100px 0;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {

4
src/styles/includes/preview.less
View File

@@ -62,7 +62,7 @@ padding: 0px;
width: 50%; width: 50%;
max-width: 500px; max-width: 500px;
min-width: 300px; min-width: 300px;
background-color: @blue; background-color: @light-gray;
border-radius: 2px; border-radius: 2px;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
opacity: 0; opacity: 0;
@@ -82,7 +82,7 @@ padding: 0px;
color: #fff; color: #fff;
} }
input { input {
background-color: @light-gray; background-color: @dark-gray;
color: @text-color; color: @text-color;
border: 0; border: 0;
font-size: 1em; font-size: 1em;

2
src/styles/includes/reviews.less
View File

@@ -1,5 +1,5 @@
#reviews { #reviews {
background: @light-gray; background: @dark-gray;
padding: 130px 0; padding: 130px 0;
.twitter-profile { .twitter-profile {
float: left; float: left;

20
src/styles/includes/video-js.less
View File

@@ -23,10 +23,10 @@
// The default color of control backgrounds is mostly black but with a little // The default color of control backgrounds is mostly black but with a little
// bit of blue so it can still be seen on all-black video frames, which are common. // bit of blue so it can still be seen on all-black video frames, which are common.
// Try changing to #900 // Try changing to #900
@primary-background-color: @blue; // #2B333F default @primary-background-color: @light-gray; // #2B333F default
@red-primary-background-color: red(@primary-background-color); @red-primary-background-color: red(@primary-background-color);
@green-primary-background-color: green(@primary-background-color); @green-primary-background-color: green(@primary-background-color);
@blue-primary-background-color: blue(@primary-background-color); @light-gray-primary-background-color: blue(@primary-background-color);
// Try changing to true // Try changing to true
@center-big-play-button: true; // true default @center-big-play-button: true; // true default
@@ -91,20 +91,20 @@
/* IE8 - has no alpha support */ /* IE8 - has no alpha support */
background-color: @primary-background-color; background-color: @primary-background-color;
/* Opacity: 1.0 = 100%, 0.0 = 0% */ /* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color, 0.7); background-color: rgba(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color, 0.7);
} }
// Make a slightly lighter version of the main background // Make a slightly lighter version of the main background
// for the slider background. // for the slider background.
@slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @blue-primary-background-color), 33%); @slider-bg-color: lighten(rgb(@red-primary-background-color, @green-primary-background-color, @light-gray-primary-background-color), 33%);
@red-slider-bg-color: red(@slider-bg-color); @red-slider-bg-color: red(@slider-bg-color);
@green-slider-bg-color: green(@slider-bg-color); @green-slider-bg-color: green(@slider-bg-color);
@blue-slider-bg-color: blue(@slider-bg-color); @light-gray-slider-bg-color: blue(@slider-bg-color);
/* Slider - used for Volume bar and Progress bar */ /* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider { .video-js .vjs-slider {
background-color: @slider-bg-color; background-color: @slider-bg-color;
background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); background-color: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
} }
/* The slider bar color is used for the progress bar and the volume bar /* The slider bar color is used for the progress bar and the volume bar
@@ -118,18 +118,18 @@
/* The main progress bar also has a bar that shows how much has been loaded. */ /* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress { .video-js .vjs-load-progress {
/* For IE8 we'll lighten the color */ /* For IE8 we'll lighten the color */
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 25%); background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 25%);
/* Otherwise we'll rely on stacked opacities */ /* Otherwise we'll rely on stacked opacities */
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.5); background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.5);
} }
/* The load progress bar also has internal divs that represent /* The load progress bar also has internal divs that represent
smaller disconnected loaded time ranges */ smaller disconnected loaded time ranges */
.video-js .vjs-load-progress div { .video-js .vjs-load-progress div {
/* For IE8 we'll lighten the color */ /* For IE8 we'll lighten the color */
background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color), 50%); background: lighten(rgb(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color), 50%);
/* Otherwise we'll rely on stacked opacities */ /* Otherwise we'll rely on stacked opacities */
background: rgba(@red-slider-bg-color, @green-slider-bg-color, @blue-slider-bg-color, 0.75); background: rgba(@red-slider-bg-color, @green-slider-bg-color, @light-gray-slider-bg-color, 0.75);
} }

98
src/styles/main.css
View File

@@ -260,7 +260,7 @@ body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
line-height: 1.42857143; line-height: 1.42857143;
color: #3b3b3b; color: #86acd1;
background-color: #fff; background-color: #fff;
} }
input, input,
@@ -272,12 +272,12 @@ textarea {
line-height: inherit; line-height: inherit;
} }
a { a {
color: #3b3b3b; color: #1e70bf;
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
a:focus { a:focus {
color: #151515; color: #14497d;
text-decoration: underline; text-decoration: underline;
} }
a:focus { a:focus {
@@ -1871,7 +1871,7 @@ textarea.input-lg {
display: block; display: block;
margin-top: 5px; margin-top: 5px;
margin-bottom: 10px; margin-bottom: 10px;
color: #7b7b7b; color: #e2ebf4;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.form-inline .form-group { .form-inline .form-group {
@@ -1982,7 +1982,7 @@ textarea.input-lg {
overflow: hidden; overflow: hidden;
height: 20px; height: 20px;
margin-bottom: 20px; margin-bottom: 20px;
background-color: #85b5bb; background-color: #4c505c;
border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -5949,8 +5949,9 @@ body {
animation-name: wobble; animation-name: wobble;
} }
body { body {
max-width: 2000px; max-width: 100%;
margin: 0 auto; margin: 0 auto;
background-color: #383c49;
} }
.browsehappy { .browsehappy {
margin: 0.2em 0; margin: 0.2em 0;
@@ -5964,7 +5965,6 @@ body {
#navigation ul { #navigation ul {
list-style: none; list-style: none;
max-width: 400px; max-width: 400px;
marghomein: 0 auto;
} }
#navigation li { #navigation li {
display: inline-block; display: inline-block;
@@ -5974,22 +5974,13 @@ body {
text-align: center; text-align: center;
font-family: "Droid Sans Mono", monospace; font-family: "Droid Sans Mono", monospace;
margin-bottom: 15px; margin-bottom: 15px;
color: #36535a; color: #86acd1;
font-size: 35px; font-size: 35px;
} }
@media (min-width: 768px) {
#navigation ul {
float: right;
margin: 33px 0;
}
#navigation h1 {
float: left;
}
}
#navigation a { #navigation a {
text-decoration: none; text-decoration: none;
font-size: 15px; font-size: 15px;
color: #3b3b3b; color: #1e70bf;
} }
.page-title { .page-title {
text-align: center; text-align: center;
@@ -6004,17 +5995,26 @@ body {
-webkit-transition: all 0.3s; -webkit-transition: all 0.3s;
transition: all 0.3s; transition: all 0.3s;
padding: 10px 50px; padding: 10px 50px;
border: 2px solid #e96e57; border: 2px solid #86acd1;
font-size: 20px; font-size: 20px;
color: #e96e57; color: #86acd1;
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.btn-cta:hover { .btn-cta:hover {
text-decoration: none; text-decoration: none;
border-color: #36535a; border-color: #1e70bf;
color: #36535a; color: #1e70bf;
}
.btn-cta:focus {
text-decoration: none;
border-color: #1e70bf;
color: #1e70bf;
}
.download-btn {
color: #e96e57;
border-color: #e96e57;
} }
.wrapper { .wrapper {
margin: 0 auto; margin: 0 auto;
@@ -6061,7 +6061,7 @@ img {
} }
a { a {
text-decoration: underline; text-decoration: underline;
color: #36535a; color: #86acd1;
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@@ -6073,6 +6073,10 @@ a:hover {
::-moz-selection { ::-moz-selection {
background: #e96e57; background: #e96e57;
} }
img.navimg {
max-height: 250px;
display: block;
}
#home { #home {
text-align: center; text-align: center;
} }
@@ -6128,7 +6132,7 @@ a:hover {
padding-bottom: 50px; padding-bottom: 50px;
width: 100%; width: 100%;
display: block; display: block;
background: #36535a; background: #000;
-webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
transition: all 0.3s ease; transition: all 0.3s ease;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
@@ -6147,16 +6151,12 @@ a:hover {
#web a { #web a {
color: #fff; color: #fff;
} }
.dragged {
background: #40626a !important;
}
.terminal { .terminal {
border-top-right-radius: 0; border-top-right-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
background: #36535a; background: #000;
backbground-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.terminal a { .terminal a {
@@ -6191,7 +6191,7 @@ a:hover {
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: 40px 0; padding: 40px 0;
background: #85b5bb; background: #4c505c;
} }
#thank-you .col-md-4 { #thank-you .col-md-4 {
text-align: center; text-align: center;
@@ -6213,10 +6213,10 @@ a:hover {
font-size: 25px; font-size: 25px;
} }
#thank-you .btn-cta { #thank-you .btn-cta {
border-color: #36535a; border-color: #86acd1;
} }
#features { #features {
background: #f6f8f8; background: #3b3b3b;
text-align: center; text-align: center;
padding: 100px 0; padding: 100px 0;
} }
@@ -6229,7 +6229,7 @@ a:hover {
font-size: 18px; font-size: 18px;
} }
#features i { #features i {
color: #85b5bb; color: #1e70bf;
font-size: 100px; font-size: 100px;
} }
#samples { #samples {
@@ -6253,7 +6253,7 @@ a:hover {
} }
#share { #share {
text-align: center; text-align: center;
background: #85b5bb; background: #1e70bf;
color: #fff; color: #fff;
padding: 75px 0; padding: 75px 0;
} }
@@ -6279,7 +6279,7 @@ a:hover {
} }
#tor { #tor {
text-align: center; text-align: center;
background: #f6f8f8; background: #3b3b3b;
padding: 50px 0; padding: 50px 0;
} }
#tor img { #tor img {
@@ -6292,7 +6292,7 @@ a:hover {
} }
footer { footer {
text-align: center; text-align: center;
background: #36535a; background: #3b3b3b;
padding: 30px 0; padding: 30px 0;
color: #fff; color: #fff;
} }
@@ -6303,7 +6303,7 @@ footer i {
color: #e96e57; color: #e96e57;
} }
footer a { footer a {
color: #f6f8f8; color: #fff;
} }
footer img { footer img {
max-height: 40px; max-height: 40px;
@@ -6316,7 +6316,7 @@ footer img {
} }
#contact i { #contact i {
font-size: 160px; font-size: 160px;
color: #85b5bb; color: #4c505c;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
#contact i { #contact i {
@@ -6328,7 +6328,7 @@ footer img {
margin-bottom: 40px; margin-bottom: 40px;
} }
#reviews { #reviews {
background: #f6f8f8; background: #3b3b3b;
padding: 130px 0; padding: 130px 0;
} }
#reviews .twitter-profile { #reviews .twitter-profile {
@@ -6439,14 +6439,14 @@ blockquote.tweet-xl a {
.video-js .vjs-big-play-button, .video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content { .video-js .vjs-menu-button .vjs-menu-content {
/* IE8 - has no alpha support */ /* IE8 - has no alpha support */
background-color: #85b5bb; background-color: #4c505c;
/* Opacity: 1.0 = 100%, 0.0 = 0% */ /* Opacity: 1.0 = 100%, 0.0 = 0% */
background-color: rgba(133, 181, 187, 0.7); background-color: rgba(76, 80, 92, 0.7);
} }
/* Slider - used for Volume bar and Progress bar */ /* Slider - used for Volume bar and Progress bar */
.video-js .vjs-slider { .video-js .vjs-slider {
background-color: #f1f7f7; background-color: #a0a4b0;
background-color: rgba(241, 247, 247, 0.5); background-color: rgba(160, 164, 176, 0.5);
} }
/* The slider bar color is used for the progress bar and the volume bar /* The slider bar color is used for the progress bar and the volume bar
(the first two can be removed after a fix that's coming) */ (the first two can be removed after a fix that's coming) */
@@ -6458,9 +6458,9 @@ blockquote.tweet-xl a {
/* The main progress bar also has a bar that shows how much has been loaded. */ /* The main progress bar also has a bar that shows how much has been loaded. */
.video-js .vjs-load-progress { .video-js .vjs-load-progress {
/* For IE8 we'll lighten the color */ /* For IE8 we'll lighten the color */
background: #ffffff; background: #e6e7ea;
/* Otherwise we'll rely on stacked opacities */ /* Otherwise we'll rely on stacked opacities */
background: rgba(241, 247, 247, 0.5); background: rgba(160, 164, 176, 0.5);
} }
/* The load progress bar also has internal divs that represent /* The load progress bar also has internal divs that represent
smaller disconnected loaded time ranges */ smaller disconnected loaded time ranges */
@@ -6468,7 +6468,7 @@ blockquote.tweet-xl a {
/* For IE8 we'll lighten the color */ /* For IE8 we'll lighten the color */
background: #ffffff; background: #ffffff;
/* Otherwise we'll rely on stacked opacities */ /* Otherwise we'll rely on stacked opacities */
background: rgba(241, 247, 247, 0.75); background: rgba(160, 164, 176, 0.75);
} }
:not(.vjs-has-started) .vjs-control-bar { :not(.vjs-has-started) .vjs-control-bar {
display: flex; display: flex;
@@ -6612,7 +6612,7 @@ html {
width: 50%; width: 50%;
max-width: 500px; max-width: 500px;
min-width: 300px; min-width: 300px;
background-color: #85b5bb; background-color: #4c505c;
border-radius: 2px; border-radius: 2px;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
@@ -6632,8 +6632,8 @@ html {
color: #fff; color: #fff;
} }
.copy-link-wrapper input { .copy-link-wrapper input {
background-color: #f6f8f8; background-color: #3b3b3b;
color: #3b3b3b; color: #86acd1;
border: 0; border: 0;
font-size: 1em; font-size: 1em;
padding: 1em; padding: 1em;

2
src/styles/main.css.map
View File

File diff suppressed because one or more lines are too long