mirror of https://github.com/kern/filepizza
Use Stylus for CSS.
Alex Kern
11 years ago
parent
8ad9855e47
commit
969bb95550
File diff suppressed because one or more lines are too long
@ -1,2 +1,199 @@
|
|||||||
body
|
beige = #F9F2E7
|
||||||
color red
|
dark-gray = #333
|
||||||
|
gray = #777
|
||||||
|
green = #8FBE00
|
||||||
|
light-blue = #40C0CB
|
||||||
|
light-gray = #EEE
|
||||||
|
light-green = #AEE239
|
||||||
|
light-red = #E23430
|
||||||
|
red = #C40D08
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from { transform: rotate(0deg) }
|
||||||
|
to { transform: rotate(360deg) }
|
||||||
|
}
|
||||||
|
|
||||||
|
global-reset()
|
||||||
|
* { box-sizing: border-box }
|
||||||
|
html, body { height: 100% }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: green
|
||||||
|
font: bold 32px/40px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
margin: 0 0 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: gray
|
||||||
|
font: 14px/20px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
margin: 0 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: table
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
display: table-cell
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-zone {
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
display: table
|
||||||
|
background: rgba(0, 0, 0, 0)
|
||||||
|
|
||||||
|
&.drop-zone-focus {
|
||||||
|
z-index: 1
|
||||||
|
background: rgba(0, 0, 0, 0.5)
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
color: white
|
||||||
|
content: 'DROP TO UPLOAD'
|
||||||
|
display: table-cell
|
||||||
|
font: 24px/40px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
text-shadow: 0 1px dark-gray
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
position: relative
|
||||||
|
z-index: -1
|
||||||
|
width: 300px
|
||||||
|
height: 300px
|
||||||
|
margin: 0 auto 40px
|
||||||
|
|
||||||
|
display: flex
|
||||||
|
align-items: center
|
||||||
|
justify-content: center
|
||||||
|
|
||||||
|
.spinner-border {
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
width: 100%
|
||||||
|
height: 100%
|
||||||
|
border: 20px dotted light-blue
|
||||||
|
border-radius: 100%
|
||||||
|
transition: transform 1s
|
||||||
|
}
|
||||||
|
|
||||||
|
&.spinner-animated .spinner-border {
|
||||||
|
animation: rotate 5s infinite linear
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-image {
|
||||||
|
display: block
|
||||||
|
width: 150px
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-name {
|
||||||
|
font: bold 18px/20px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
color: dark-gray
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
margin-top: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner-size {
|
||||||
|
font: italic 12px/20px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
color: gray
|
||||||
|
overflow: hidden
|
||||||
|
text-overflow: ellipsis
|
||||||
|
white-space: nowrap
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tempalink {
|
||||||
|
background: beige
|
||||||
|
color: dark-gray
|
||||||
|
border: 0
|
||||||
|
margin: 20px 0
|
||||||
|
font: 18px/1 monospace
|
||||||
|
height: 60px
|
||||||
|
padding: 20px
|
||||||
|
text-align: center
|
||||||
|
width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.data {
|
||||||
|
color: gray
|
||||||
|
font: 14px/20px "Quicksand", sans-serif
|
||||||
|
text-align: center
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
.datum {
|
||||||
|
float: left
|
||||||
|
width: 50%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-button {
|
||||||
|
display: block
|
||||||
|
box-shadow: inset 0 1px 1px light-green
|
||||||
|
padding: 20px
|
||||||
|
background: green
|
||||||
|
border: none
|
||||||
|
color: white
|
||||||
|
width: 100%
|
||||||
|
font: bold 18px/20px "Quicksand", sans-serif
|
||||||
|
transition: 0.25s
|
||||||
|
cursor: pointer
|
||||||
|
text-transform: uppercase
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
box-shadow: inset 0 1px 1px green
|
||||||
|
background: light-green
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: green
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar {
|
||||||
|
height: 60px
|
||||||
|
overflow: hidden
|
||||||
|
background: beige
|
||||||
|
|
||||||
|
.progress-bar-inner {
|
||||||
|
float: left
|
||||||
|
height: 100%
|
||||||
|
background: green
|
||||||
|
box-shadow: inset 0 1px 1px light-green
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-bar-text {
|
||||||
|
float: right
|
||||||
|
font: 14px/60px "Quicksand", sans-serif
|
||||||
|
color: white
|
||||||
|
margin-right: 5px
|
||||||
|
text-transform: uppercase
|
||||||
|
}
|
||||||
|
|
||||||
|
&.progress-bar-failed {
|
||||||
|
background: red
|
||||||
|
box-shadow: inset 0 1px 1px light-red, 0 1px 1px light-gray
|
||||||
|
|
||||||
|
.progress-bar-text {
|
||||||
|
float: none
|
||||||
|
text-align: center
|
||||||
|
margin-right: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
@ -0,0 +1,30 @@
|
|||||||
|
var browserify = require('browserify-middleware')
|
||||||
|
var express = require('express')
|
||||||
|
var nib = require('nib')
|
||||||
|
var path = require('path')
|
||||||
|
var stylus = require('stylus')
|
||||||
|
|
||||||
|
var routes = module.exports = new express.Router()
|
||||||
|
|
||||||
|
routes.get('/css', function (req, res, next) {
|
||||||
|
req.url = '/index.css'
|
||||||
|
next()
|
||||||
|
}, stylus.middleware({
|
||||||
|
src: path.resolve(__dirname, '../css'),
|
||||||
|
dest: path.resolve(__dirname, '../css'),
|
||||||
|
compile: function (str, path) {
|
||||||
|
return stylus(str)
|
||||||
|
.set('filename', path)
|
||||||
|
.set('compress', true)
|
||||||
|
.use(nib())
|
||||||
|
.import('nib')
|
||||||
|
}
|
||||||
|
}), function (req, res) {
|
||||||
|
res.sendFile(path.resolve(__dirname, '../css/index.css'))
|
||||||
|
})
|
||||||
|
|
||||||
|
routes.get('/js', browserify(path.resolve(__dirname, '../client/index.js'), {
|
||||||
|
transform: 'babelify'
|
||||||
|
}))
|
||||||
|
|
||||||
|
routes.use('/images', express.static(path.resolve(__dirname, '../images')))
|
||||||
File diff suppressed because one or more lines are too long
@ -1,214 +0,0 @@
|
|||||||
* { box-sizing: border-box; }
|
|
||||||
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
display: table;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: table;
|
|
||||||
background: rgba(0, 0, 0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone-focus {
|
|
||||||
z-index: 1;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.drop-zone-focus:after {
|
|
||||||
color: white;
|
|
||||||
content: 'DROP TO UPLOAD';
|
|
||||||
display: table-cell;
|
|
||||||
font: 24px/40px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 1px #333;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
position: relative;
|
|
||||||
z-index: -1;
|
|
||||||
width: 300px;
|
|
||||||
height: 300px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .spinner-border {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border: 20px dotted #40C0CB;
|
|
||||||
border-radius: 100%;
|
|
||||||
|
|
||||||
-webkit-transition: -webkit-transform 1s;
|
|
||||||
-moz-transition: -moz-transform 1s;
|
|
||||||
transition: transform 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner.spinner-animated .spinner-border {
|
|
||||||
-webkit-animation: rotate 5s infinite linear;
|
|
||||||
-moz-animation: rotate 5s infinite linear;
|
|
||||||
animation: rotate 5s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .spinner-image {
|
|
||||||
display: block;
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .spinner-name {
|
|
||||||
font: bold 18px/20px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
color: #333;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner .spinner-size {
|
|
||||||
font: italic 12px/20px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
color: #777;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tempalink {
|
|
||||||
border-radius: 3px;
|
|
||||||
box-shadow: inset 0 1px 1px #AEE239, 0 1px 1px #EEE;
|
|
||||||
background: #8FBE00;
|
|
||||||
color: white;
|
|
||||||
border: 0;
|
|
||||||
margin: 20px 0;
|
|
||||||
font: 14px/1 monospace;
|
|
||||||
height: 60px;
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #8FBE00;
|
|
||||||
font: bold 32px/40px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
color: #777;
|
|
||||||
font: 14px/20px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data {
|
|
||||||
color: #777;
|
|
||||||
font: 14px/20px "Quicksand", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.data > .datum {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button {
|
|
||||||
display: block;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: inset 0 1px 1px #AEE239, 0 1px 1px #EEE;
|
|
||||||
padding: 20px;
|
|
||||||
background: #8FBE00;
|
|
||||||
border: none;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
font: bold 18px/20px "Quicksand", sans-serif;
|
|
||||||
transition: 0.25s;
|
|
||||||
cursor: pointer;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button:hover, .download-button:focus {
|
|
||||||
box-shadow: inset 0 1px 1px #8FBE00;
|
|
||||||
background: #AEE239;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-button:active {
|
|
||||||
background: #8FBE00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 60px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-radius: 4px;
|
|
||||||
background: #F9F2E7;
|
|
||||||
box-shadow: 0 1px 1px #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar .progress-bar-inner {
|
|
||||||
float: left;
|
|
||||||
height: 100%;
|
|
||||||
background: #8FBE00;
|
|
||||||
box-shadow: inset 0 1px 1px #AEE239;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar .progress-bar-text {
|
|
||||||
float: right;
|
|
||||||
font: 14px/60px "Quicksand", sans-serif;
|
|
||||||
color: white;
|
|
||||||
margin-right: 5px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar.progress-bar-failed {
|
|
||||||
background: #C40D08;
|
|
||||||
box-shadow: inset 0 1px 1px #E23430, 0 1px 1px #EEE;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar.progress-bar-failed .progress-bar-text {
|
|
||||||
float: none;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes rotate {
|
|
||||||
from { -webkit-transform: rotate(0deg); }
|
|
||||||
to { -webkit-transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@-moz-keyframes rotate {
|
|
||||||
from { -moz-transform: rotate(0deg); }
|
|
||||||
to { -moz-transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
from { transform: rotate(0deg); }
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>webdrop</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="/index.css">
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<script>
|
|
||||||
window.WebDrop = {
|
|
||||||
token: <%- JSON.stringify(token) %>,
|
|
||||||
metadata: <%- JSON.stringify(meta) %>
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="app"></div>
|
|
||||||
<script src="/app.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>WebDrop | <%= status %></title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="index.css">
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<%= message %>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>WebDrop - Send Files, Easily</title>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="index.css">
|
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
|
||||||
<script src="/app.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Loading…
Reference in New Issue