diff options
| -rw-r--r-- | css/pomf.css | 337 | ||||
| -rw-r--r-- | style.min.css | 1 |
2 files changed, 337 insertions, 1 deletions
diff --git a/css/pomf.css b/css/pomf.css new file mode 100644 index 0000000..f5cb754 --- /dev/null +++ b/css/pomf.css @@ -0,0 +1,337 @@ +/** + * USE BORDER BOX + */ +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/** + * PAGE LAYOUT + */ +body { + background-attachment: fixed, fixed; + background-color: #F7F7F7; + background-image: url('grill.php'), url('img/bg.png'); + background-position: 85% 100%, top left; + background-repeat: no-repeat, repeat; + color: #333; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + height: 100%; + line-height: 20px; + margin: 0; + padding-top: 20px; + padding-bottom: 40px; +} +.container { + margin: 0 auto; + max-width: 700px; +} + +/** + * ELEMENTS + */ +/* paragraphs */ +p { + margin: 0 0 10px; +} +/* images */ +input[type=image], img { + vertical-align: middle; +} +/* links */ +a { + color: #08C; + text-decoration: none; + transition: color 0.25s; +} +a:hover, +a:focus, +a:active { + color: #005580; +} +a:focus { + outline: thin dotted #333; +/* outline-offset: -2px;*/ +} + +/** + * JUMBOTRON + */ +.jumbotron { + margin: 60px 0; + text-align: center; + transition: width 0.5s, height 0.5s, margin 0.5s, padding 0.5s; +} +.jumbotron h1 { + color: inherit; + font-family: inherit; + font-size: 72px; + font-weight: bold; + line-height: 1; + margin: 10px 0; + cursor: default; + text-rendering: optimizelegibility; +} +.jumbotron .lead { + font-size: 21px; + font-weight: 200; + line-height: 30px; + margin-bottom: 20px; + transition: font-size 0.5s; +} +.jumbotron .btn { + background: rgba(202, 230, 190, 0.75); + border: 1px solid #B7D1A0; + border-radius: 4px; + color: #468847; + cursor: pointer; + display: inline-block; + font-size: 24px; + padding: 28px 48px; + text-shadow: 0 1px rgba(255, 255, 255, 0.5); + transition: background-color 0.25s, width 0.5s, height 0.5s; +} +.jumbotron .btn:hover, +.jumbotron .btn:active, +.jumbotron .btn:focus, +.jumbotron .btn.drop { + background-color: rgb(188, 228, 170); + text-decoration: none; +} +#no-file-api { + display: none; +} + +/** + * BOXES + */ +.alert { + background-color: #FCF8E3; + border: 1px solid #FBEED5; + border-radius: 4px; + margin-bottom: 20px; + padding: 8px 35px 8px 14px; + text-shadow: 0px 1px rgba(255, 255, 255, 0.5); + transition: width 0.5s, margin 0.5s, padding 0.5s, background-color 0.5s; +} +.alert-error { + background-color: #F2DEDE; + border-color: #EED3D7; + color: #B94A48; +} +.alert-info { + background-color: #D9EDF7; + border-color: #BCE8F1; + color: #3A87AD; +} +a.btc { + font-weight: bold; + color: #B94A48; +} +a.btc:hover { + color: #891A18; +} + +/** + * NAVIGATION LINKS + */ +nav > ul, +nav a { + color: #3A87AD; + list-style: none; + margin: 0; + padding: 0; + text-align: center; +} +nav > ul > li { + display: inline-block; + margin: 0; + padding: 0; + cursor: default; +} +nav > ul > li:after { + content: "|"; + margin: 0 8px; + opacity: 0.3; +} +nav > ul > li:last-child:after { + content: ""; + margin: 0; +} + +/** + * UPLOAD FORM + */ +#upload-input { + position: absolute; + top: 0; + left: -5000px; +} + +/** + * UPLOAD FILE LIST + */ +#upload-filelist { + list-style-type: none; + margin: 20px 50px; + padding: 0; + text-align: left; +} +.error#upload-filelist { + color: #891A18; +} +.error#upload-filelist .file-size { + color: #B94A48; +} +.error#upload-filelist .file-progress { + display: none; +} +#upload-filelist > li { + margin-top: 5px; + overflow: hidden; +} +#upload-filelist > li.total { + border-top: 1px solid rgba(0, 0, 0, 0.05); + font-weight: bold; + padding-top: 5px; +} +.file-name { + float: left; + overflow: hidden; + max-width: 70%; + text-overflow: ellipsis; + white-space: nowrap; +} +.file-size, +.file-url { + display: inline-block; + float: right; + font-size: 0.9em; + margin-left: 8px; + color: #5C5C5C; + vertical-align: middle; +} +.file-url a { + color: #5C5C5C; +} +.file-url a:hover { + color: #1C1C1C; +} +/* completed rows */ +.completed .file-progress, +.completed .file-size { + display: none; +} +.completed .file-url { + display: block; +} + +/** + * PROGRESS BARS + */ +.progress-outer { + background-color: rgba(255, 255, 255, 0.8); + border: 1px solid white; + border-radius: 4px; + box-shadow: 0 0 0 1px black; +/* box-shadow: 0 0 0 1px rgb(188, 228, 170); + box-shadow: 0 0 0 1px #468847; + box-shadow: 0 0 0 1px #B7D1A0;*/ + color: transparent; + display: inline-block; + font-size: 0; + float: right; + height: 8px; + margin: 6px 6px 0; + overflow: hidden; + vertical-align: middle; + width: 50px; +} +.progress-inner { + background-color: black; +/* background-color: rgb(188, 228, 170); + background-color: #468847; + background-color: #B7D1A0;*/ + height: 6px; + margin: 0; + width: 0; +} + +/** + * POCKY~ + */ +.pocky { + margin: 20px auto; + text-align: center; +} +.pocky img { + max-width: 100%; +} + +/** + * MEDIA QUERIES + */ +@media only screen and (max-device-width: 320px), only screen and (max-width: 400px) { + body { + padding: 10px 0 0 0; + } + .jumbotron { + margin: 20px 0 30px; + } + .jumbotron .lead { + font-size: 18px; + } + .jumbotron .btn, .alert, #upload-filelist { + border-radius: 0; + border-width: 1px 0; + width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 20px; + padding-right: 20px; + } + #upload-filelist { + background-color: rgba(255, 255, 255, 0.75); + overflow: hidden; + } + #upload-filelist > li.file { + margin-top: 12px; + margin-bottom: 12px; + } + .file-progress { + float: left; + width: 70%; + } + .file-size { + float: left; + max-width: 30%; + overflow: hidden; + } + .file-name, .file-url { + width: 100%; + max-width: 100%; + } + .file-url a { + text-decoration: underline; + margin-left: 15px; + } + .file-url a:before { + content: "http://"; + } + .alert { + font-size: 13px; + } + .alert-error { + background-color: rgba(248, 223, 223, 0.75); + } + nav { + background-color: rgba(255, 255, 255, 0.75); + border: #FFFFFF; + padding: 10px 0; + } +} diff --git a/style.min.css b/style.min.css deleted file mode 100644 index b8f9a96..0000000 --- a/style.min.css +++ /dev/null @@ -1 +0,0 @@ -*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{background-attachment:fixed,fixed;background-color:#F7F7F7;background-image:url(kawaii.php),url(img/bg.png);background-position:85% 100%,top left;background-repeat:no-repeat,repeat;color:#333;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;height:100%;line-height:20px;margin:0;padding-top:20px;padding-bottom:40px}.container{margin:0 auto;max-width:700px}p{margin:0 0 10px}input[type=image],img{vertical-align:middle}a{color:#08C;text-decoration:none;transition:color .25s}a:hover,a:focus,a:active{color:#005580}a:focus{outline:thin dotted #333}.jumbotron{margin:60px 0;text-align:center;transition:width .5s,height .5s,margin .5s,padding .5s}.jumbotron h1{color:inherit;font-family:inherit;font-size:72px;font-weight:700;line-height:1;margin:10px 0;cursor:default;text-rendering:optimizelegibility}.jumbotron .lead{font-size:21px;font-weight:200;line-height:30px;margin-bottom:20px;transition:font-size .5s}.jumbotron .btn{background:rgba(202,230,190,.75);border:1px solid #B7D1A0;border-radius:4px;color:#468847;cursor:pointer;display:inline-block;font-size:24px;padding:28px 48px;text-shadow:0 1px rgba(255,255,255,.5);transition:background-color .25s,width .5s,height .5s}.jumbotron .btn:hover,.jumbotron .btn:active,.jumbotron .btn:focus,.jumbotron .btn.drop{background-color:#bce4aa;text-decoration:none}#no-file-api{display:none}.alert{background-color:#FCF8E3;border:1px solid #FBEED5;border-radius:4px;margin-bottom:20px;padding:8px 35px 8px 14px;text-shadow:0 1px rgba(255,255,255,.5);transition:width .5s,margin .5s,padding .5s,background-color .5s}.alert-error{background-color:#F2DEDE;border-color:#EED3D7;color:#B94A48}.alert-info{background-color:#D9EDF7;border-color:#BCE8F1;color:#3A87AD}a.btc{font-weight:700;color:#B94A48}a.btc:hover{color:#891A18}nav>ul,nav a{color:#3A87AD;list-style:none;margin:0;padding:0;text-align:center}nav>ul>li{display:inline-block;margin:0;padding:0;cursor:default}nav>ul>li:after{content:"|";margin:0 8px;opacity:.3}nav>ul>li:last-child:after{content:"";margin:0}#upload-input{position:absolute;top:0;left:-5000px}#upload-filelist{list-style-type:none;margin:20px 50px;padding:0;text-align:left}.error#upload-filelist{color:#891A18}.error#upload-filelist .file-size{color:#B94A48}.error#upload-filelist .file-progress{display:none}#upload-filelist>li{margin-top:5px;overflow:hidden}#upload-filelist>li.total{border-top:1px solid rgba(0,0,0,.05);font-weight:700;padding-top:5px}.file-name{float:left;overflow:hidden;max-width:70%;text-overflow:ellipsis;white-space:nowrap}.file-size,.file-url{display:inline-block;float:right;font-size:.9em;margin-left:8px;color:#5C5C5C;vertical-align:middle}.file-url a{color:#5C5C5C}.file-url a:hover{color:#1C1C1C}.completed .file-progress,.completed .file-size{display:none}.completed .file-url{display:block}.progress-outer{background-color:rgba(255,255,255,.8);border:1px solid #fff;border-radius:4px;box-shadow:0 0 0 1px #000;color:transparent;display:inline-block;font-size:0;float:right;height:8px;margin:6px 6px 0;overflow:hidden;vertical-align:middle;width:50px}.progress-inner{background-color:#000;height:6px;margin:0;width:0}.pocky{margin:20px auto;text-align:center}.pocky img{max-width:100%}@media only screen and (max-device-width:320px),only screen and (max-width:400px){body{padding:10px 0 0}.jumbotron{margin:20px 0 30px}.jumbotron .lead{font-size:18px}.jumbotron .btn,.alert,#upload-filelist{border-radius:0;border-width:1px 0;width:100%;margin-left:0;margin-right:0;padding-left:20px;padding-right:20px}#upload-filelist{background-color:rgba(255,255,255,.75);overflow:hidden}#upload-filelist>li.file{margin-top:12px;margin-bottom:12px}.file-progress{float:left;width:70%}.file-size{float:left;max-width:30%;overflow:hidden}.file-name,.file-url{width:100%;max-width:100%}.file-url a{text-decoration:underline;margin-left:15px}.file-url a:before{content:"http://"}.alert{font-size:13px}.alert-error{background-color:rgba(248,223,223,.75)}nav{background-color:rgba(255,255,255,.75);border:#FFF;padding:10px 0}} |