whisper.cat/weboasis/todo/old/resources/css/style.min.css

@charset "UTF-8";body{background:#edf0f1;padding:80px 0 0}body,button,input{font-family:'Roboto',sans-serif}.noFill{fill:none}header{width:100%;height:80px;position:fixed;padding:15px;top:0;left:0;z-index:5;background:#0280cf;box-shadow:0 2px 4px rgba(44,62,80,.15);border-bottom-right-radius:10px;border-bottom-left-radius:10px}header input{width:100%;height:50px;float:left;color:#fff;font-size:15px;font-weight:400;text-indent:18px;padding:0 60px 0 0;background:rgba(255,255,255,.2);border-radius:5px 25px 25px 5px;border:0;box-shadow:none;outline:0;-webkit-appearance:none;-moz-appearance:none}header input::-webkit-input-placeholder{color:rgba(255,255,255,.75)}header input:-moz-input-placeholder,header input::-moz-input-placeholder{color:rgba(255,255,255,.75)}header input:-ms-input-placeholder{color:rgba(255,255,255,.75)}header button{width:50px;height:50px;position:absolute;top:15px;right:15px;z-index:2;border-radius:25px;background:#fff;border:0;box-shadow:none;outline:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}header button svg{width:16px;height:16px;position:absolute;top:50%;left:50%;margin:-8px 0 0 -8px}header button svg .fill{fill:#0280cf}.container{padding:15px}.container,ul.todo,ul.todo li{width:100%;float:left}ul.todo li{min-height:50px;font-size:14px;font-weight:500;color:#444;line-height:22px;background:#fff;border-radius:5px;position:relative;box-shadow:0 1px 2px rgba(44,62,80,.1);margin:0 0 10px;padding:14px 100px 14px 14px;word-break:break-word}ul.todo li:last-of-type{margin:0}ul.todo li .buttons{width:100px;height:50px;position:absolute;top:0;right:0}ul.todo li .buttons button{width:50px;height:50px;float:left;background:0 0;position:relative;border:0;box-shadow:none;outline:0;cursor:pointer;-webkit-appearance:none;-moz-appearance:none}ul.todo li .buttons button:last-of-type:before{content:'';width:1px;height:30px;background:#edf0f1;position:absolute;top:10px;left:0}ul.todo li .buttons button svg{width:22px;height:22px;position:absolute;top:50%;left:50%;margin:-11px 0 0 -11px}ul.todo li .buttons button.complete svg{border-radius:11px;border:1.5px solid #0280cf;transition:background .2s ease}ul.todo#completed li .buttons button.complete svg{background:#0280cf;border:0}ul.todo:not(#completed) li .buttons button.complete:hover svg{background:rgba(37,185,154,.75)}ul.todo:not(#completed) li .buttons button.complete:hover svg .fill{fill:#fff}ul.todo#completed li .buttons button.complete svg .fill{fill:#fff}ul.todo li .buttons button svg .fill{transition:fill .2s ease}ul.todo li .buttons button.remove svg .fill{fill:#c0cecb}ul.todo li .buttons button.remove:hover svg .fill{fill:#e85656}ul.todo li .buttons button.complete svg .fill{fill:#0280cf}ul.todo#completed{position:relative;padding:60px 0 0}ul.todo#completed:before{content:'';width:150px;height:1px;background:#d8e5e0;position:absolute;top:30px;left:50%;margin:0 0 0 -75px}ul.todo#todo:empty:after{content:'You have nothing to-do!';margin:15px 0 0}ul.todo#completed:empty:after{content:'You have yet to complete any tasks.'}ul.todo#completed:after,ul.todo#todo:after{width:100%;display:block;text-align:center;font-size:12px;color:#aaa}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url(fonts/roboto-v19-latin-regular.eot);src:local('Roboto'),local('Roboto-Regular'),url(fonts/roboto-v19-latin-regular.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v19-latin-regular.woff2) format('woff2'),url(fonts/roboto-v19-latin-regular.woff) format('woff'),url(fonts/roboto-v19-latin-regular.ttf) format('truetype'),url(fonts/roboto-v19-latin-regular.svg#Roboto) format('svg')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url(fonts/roboto-v19-latin-500.eot);src:local('Roboto Medium'),local('Roboto-Medium'),url(fonts/roboto-v19-latin-500.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v19-latin-500.woff2) format('woff2'),url(fonts/roboto-v19-latin-500.woff) format('woff'),url(fonts/roboto-v19-latin-500.ttf) format('truetype'),url(fonts/roboto-v19-latin-500.svg#Roboto) format('svg')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:url(fonts/roboto-v19-latin-700.eot);src:local('Roboto Bold'),local('Roboto-Bold'),url(fonts/roboto-v19-latin-700.eot?#iefix) format('embedded-opentype'),url(fonts/roboto-v19-latin-700.woff2) format('woff2'),url(fonts/roboto-v19-latin-700.woff) format('woff'),url(fonts/roboto-v19-latin-700.ttf) format('truetype'),url(fonts/roboto-v19-latin-700.svg#Roboto) format('svg')}