You are here

style.css in One Click Upload 7.2

/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

/* Baseline */
body, p, h1, h2, h3, h4, h5, h6 {font:normal 12px/1.3em Helvetica, Arial, sans-serif; color:#333; }
h1 {font-size:22px; font-weight:bold;}
h2 {font-size:19px; font-weight:bold;}
h3 {font-size:16px; font-weight:bold;}
h4 {font-size:14px; font-weight:bold;}
h5 {font-size:12px; font-weight:bold;}
p {margin:10px 0;}


body {text-align:center; margin:40px;}
#frame {margin:0 auto; width:800px; text-align:left;}



/* Uploader: Drag & Drop */
.flow-error {display:none; font-size:14px; font-style:italic;}
.flow-drop {padding:15px; font-size:13px; text-align:center; color:#666; font-weight:bold;background-color:#eee; border:2px dashed #aaa; border-radius:10px; margin-top:40px; z-index:9999; display:none;}
.flow-dragover {padding:30px; color:#555; background-color:#ddd; border:1px solid #999;}

/* Uploader: Progress bar */
.flow-progress {margin:30px 0 30px 0; width:100%; display:none;}
.progress-container {height:7px; background:#9CBD94; position:relative; }
.progress-bar {position:absolute; top:0; left:0; bottom:0; background:#45913A; width:0;}
.progress-text {font-size:11px; line-height:9px; padding-left:10px;}
.progress-pause {padding:0 0 0 7px;}
.progress-resume-link {display:none;}
.is-paused .progress-resume-link {display:inline;}
.is-paused .progress-pause-link {display:none;}
.is-complete .progress-pause {display:none;}

/* Uploader: List of items being uploaded */
.flow-list {overflow:auto; margin-right:-20px; display:none;}
.uploader-item {width:148px; height:90px; background-color:#666; position:relative; border:2px solid black; float:left; margin:0 6px 6px 0;}
.uploader-item-thumbnail {width:100%; height:100%; position:absolute; top:0; left:0;}
.uploader-item img.uploader-item-thumbnail {opacity:0;}
.uploader-item-creating-thumbnail {padding:0 5px; font-size:9px; color:white;}
.uploader-item-title {position:absolute; font-size:9px; line-height:11px; padding:3px 50px 3px 5px; bottom:0; left:0; right:0; color:white; background-color:rgba(0,0,0,0.6); min-height:27px;}
.uploader-item-status {position:absolute; bottom:3px; right:3px;}

/* Uploader: Hover & Active status */
.uploader-item:hover, .is-active .uploader-item {border-color:#4a873c; cursor:pointer; }
.uploader-item:hover .uploader-item-title, .is-active .uploader-item .uploader-item-title {background-color:rgba(74,135,60,0.8);}

/* Uploader: Error status */
.is-error .uploader-item:hover, .is-active.is-error .uploader-item {border-color:#900;}
.is-error .uploader-item:hover .uploader-item-title, .is-active.is-error .uploader-item .uploader-item-title {background-color:rgba(153,0,0,0.6);}
.is-error .uploader-item-creating-thumbnail {display:none;}

File

flowjs/samples/Node.js/public/style.css
View source
  1. /* Reset */
  2. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
  3. /* Baseline */
  4. body, p, h1, h2, h3, h4, h5, h6 {font:normal 12px/1.3em Helvetica, Arial, sans-serif; color:#333; }
  5. h1 {font-size:22px; font-weight:bold;}
  6. h2 {font-size:19px; font-weight:bold;}
  7. h3 {font-size:16px; font-weight:bold;}
  8. h4 {font-size:14px; font-weight:bold;}
  9. h5 {font-size:12px; font-weight:bold;}
  10. p {margin:10px 0;}
  11. body {text-align:center; margin:40px;}
  12. #frame {margin:0 auto; width:800px; text-align:left;}
  13. /* Uploader: Drag & Drop */
  14. .flow-error {display:none; font-size:14px; font-style:italic;}
  15. .flow-drop {padding:15px; font-size:13px; text-align:center; color:#666; font-weight:bold;background-color:#eee; border:2px dashed #aaa; border-radius:10px; margin-top:40px; z-index:9999; display:none;}
  16. .flow-dragover {padding:30px; color:#555; background-color:#ddd; border:1px solid #999;}
  17. /* Uploader: Progress bar */
  18. .flow-progress {margin:30px 0 30px 0; width:100%; display:none;}
  19. .progress-container {height:7px; background:#9CBD94; position:relative; }
  20. .progress-bar {position:absolute; top:0; left:0; bottom:0; background:#45913A; width:0;}
  21. .progress-text {font-size:11px; line-height:9px; padding-left:10px;}
  22. .progress-pause {padding:0 0 0 7px;}
  23. .progress-resume-link {display:none;}
  24. .is-paused .progress-resume-link {display:inline;}
  25. .is-paused .progress-pause-link {display:none;}
  26. .is-complete .progress-pause {display:none;}
  27. /* Uploader: List of items being uploaded */
  28. .flow-list {overflow:auto; margin-right:-20px; display:none;}
  29. .uploader-item {width:148px; height:90px; background-color:#666; position:relative; border:2px solid black; float:left; margin:0 6px 6px 0;}
  30. .uploader-item-thumbnail {width:100%; height:100%; position:absolute; top:0; left:0;}
  31. .uploader-item img.uploader-item-thumbnail {opacity:0;}
  32. .uploader-item-creating-thumbnail {padding:0 5px; font-size:9px; color:white;}
  33. .uploader-item-title {position:absolute; font-size:9px; line-height:11px; padding:3px 50px 3px 5px; bottom:0; left:0; right:0; color:white; background-color:rgba(0,0,0,0.6); min-height:27px;}
  34. .uploader-item-status {position:absolute; bottom:3px; right:3px;}
  35. /* Uploader: Hover & Active status */
  36. .uploader-item:hover, .is-active .uploader-item {border-color:#4a873c; cursor:pointer; }
  37. .uploader-item:hover .uploader-item-title, .is-active .uploader-item .uploader-item-title {background-color:rgba(74,135,60,0.8);}
  38. /* Uploader: Error status */
  39. .is-error .uploader-item:hover, .is-active.is-error .uploader-item {border-color:#900;}
  40. .is-error .uploader-item:hover .uploader-item-title, .is-active.is-error .uploader-item .uploader-item-title {background-color:rgba(153,0,0,0.6);}
  41. .is-error .uploader-item-creating-thumbnail {display:none;}