--- a +++ b/static/css/main.css @@ -0,0 +1,54 @@ +.img-preview { + width: 256px; + height: 256px; + position: relative; + border: 5px solid #f8f8f8; + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1); + margin-top: 1em; + margin-bottom: 1em; +} + +.img-preview > div { + width: 100%; + height: 100%; + background-size: 256px 256px; + background-repeat: no-repeat; + background-position: center; +} + +input[type="file"] { + display: none; +} + +.upload-label { + display: inline-block; + padding: 12px 30px; + background: #39d2b4; + color: #fff; + font-size: 1em; + transition: all 0.4s; + cursor: pointer; +} + +.upload-label:hover { + background: #34495e; + color: #39d2b4; +} + +.loader { + border: 8px solid #f3f3f3; /* Light grey */ + border-top: 8px solid #3498db; /* Blue */ + border-radius: 50%; + width: 50px; + height: 50px; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +}