-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
1 lines (1 loc) · 5.32 KB
/
style.css
1
body{margin:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}html{-webkit-font-smoothing:antialiased;font-family:"pt-sans-pro","PT Sans","sans-serif";user-select:none}img{width:100%}#app{width:fit-content;display:grid;grid-template-columns:repeat(2, 3in);grid-column-gap:40px;grid-row-gap:20px}#app .right{position:relative}#app .right:before{content:'';width:1px;height:100%;position:absolute;background-color:#e7e7e7;left:-19px}.inputs{margin-bottom:40px;display:grid;grid-gap:10px}.inputs hr{width:100%;border:solid 0.5px #e7e7e7;border-bottom:none}.inputs input,.inputs textarea{outline:none}.inputs textarea,.inputs input[type="text"]{display:block;width:100%;box-sizing:border-box;padding:10px 13px;border-radius:10px;border:solid 1px #e7e7e7;font-size:16px;font-family:"pt-sans-pro","PT Sans","sans-serif";cursor:pointer}.inputs textarea:focus,.inputs input[type="text"]:focus{cursor:text}.inputs input[type="file"]{font-family:"pt-sans-pro","PT Sans","sans-serif";font-size:16px;cursor:pointer}.inputs input[type="file"]::-webkit-file-upload-button{font-family:"pt-sans-pro","PT Sans","sans-serif";font-size:16px;padding:5px 10px;cursor:pointer;background:none;border:solid 1px #e7e7e7;border-radius:10px;outline:none}.inputs .checkbox{display:grid;grid-template-columns:20px 1fr;grid-gap:10px}.inputs .checkbox input,.inputs .checkbox label{cursor:pointer;width:fit-content}.inputs .radios{display:flex;align-items:center}.inputs .radios .radio{margin-right:5px}.inputs .radios .radio input,.inputs .radios .radio label{cursor:pointer}.inputs .buttons button{background:none;padding:5px 10px;cursor:pointer;font-family:"pt-sans-pro","PT Sans","sans-serif";font-size:16px;border:solid 1px #e7e7e7;border-radius:10px;outline:none}.inputs .buttons button.red{color:white;background-color:#800000;border-color:#800000}.inputs .buttons button.black{color:white;background-color:black;border-color:black}.instagram-post{width:3in;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;border:solid 1px #e7e7e7;border-radius:10px;background-color:white;display:grid;grid-gap:10px}.instagram-post.inverted .post-content img{filter:invert(1)}.instagram-post.inverted .post-content h1{color:white}.instagram-post .icon{height:20px;width:auto;cursor:pointer;display:block;transition:opacity 0.2s}.instagram-post .icon:hover{opacity:0.5}.instagram-post .avatar{border-radius:50%}.instagram-post .username{cursor:pointer;font-weight:500;font-size:14px;transition:opacity 0.2s}.instagram-post .username:hover{opacity:0.5}.instagram-post .post-top{display:grid;grid-template-columns:1fr 21px;align-items:center;padding:10px;padding-bottom:0}.instagram-post .post-top .post-top-left{display:grid;grid-template-columns:32px 1fr;grid-gap:10px;align-items:center}.instagram-post .post-top .post-top-left .username-wrapper{display:flex;align-items:center}.instagram-post .post-top .post-top-left .username-wrapper .verified{margin-left:4px;width:13px;height:13px}.instagram-post .post-top .post-top-right{padding-right:5px}.instagram-post .post-top .post-top-right .icon{max-width:16px;height:16px}.instagram-post .post-content{position:relative}.instagram-post .post-content img{position:absolute;width:8%;padding-left:20px;pointer-events:none}.instagram-post .post-content img.top{bottom:0;padding-bottom:20px}.instagram-post .post-content img.bottom{top:0;padding-top:20px}.instagram-post .post-content h1{font-family:'ivypresto-headline';line-height:1.2em;font-weight:normal;font-size:22px;color:black;pointer-events:none;position:absolute;margin:0;padding:20px}.instagram-post .post-content h1.top{top:0}.instagram-post .post-content h1.bottom{bottom:0}.instagram-post .post-content .post-image{height:286px;background-repeat:no-repeat;background-size:auto 100%;background-position:center}.instagram-post .post-bottom{display:grid;grid-template-columns:1fr 1fr;padding:10px;padding-top:0;padding-bottom:0}.instagram-post .post-bottom .post-bottom-left{display:flex;align-items:center}.instagram-post .post-bottom .post-bottom-left .icon{margin-right:10px}.instagram-post .post-bottom .post-bottom-left .icon.liked{opacity:1}.instagram-post .post-bottom .post-bottom-right .icon{margin-left:auto}.instagram-post .post-comments{padding:10px;padding-top:0}.instagram-post .post-comments .post-caption{margin:0;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.instagram-post .post-comments .more-comments{font-size:14px;margin:0;margin-top:3px;color:gray;cursor:pointer;width:fit-content}.logo{grid-column:span 2;width:300px;display:block;margin:0 auto}.download{padding:10px;background:none;grid-column:span 2;cursor:pointer;font-family:"pt-sans-pro","PT Sans","sans-serif";font-size:16px;border:solid 1px #e7e7e7;border-radius:10px;outline:none;transition:box-shadow 0.2s}.download:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.download .lowres{-webkit-font-smoothing:none}.zoom{width:100%;-webkit-appearance:none;outline:none;margin-top:9px;margin-bottom:20px;display:block}.zoom::-webkit-slider-thumb{-webkit-appearance:none;border:solid 1px #e7e7e7;border-radius:50%;margin-top:-9px;width:20px;height:20px;background:white;cursor:ew-resize}.zoom::-webkit-slider-runnable-track{width:100%;height:1px;background:#e7e7e7}