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
|
||||
color red
|
||||
beige = #F9F2E7
|
||||
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