-
-
Save Chuloo/5a1c1cbf83fd827d6fb78308af15e23c to your computer and use it in GitHub Desktop.
Styles for a video and audio upload interface with Cloudinary
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.App { | |
text-align: center; | |
max-width: 100vw; | |
min-height: 100vh; | |
max-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.App .left-side { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
border-right: 0.5px solid grey; | |
} | |
.App .right-side { | |
border-left: 0.5px solid grey; | |
} | |
.App .left-side, | |
.App .right-side { | |
height: 300px; | |
width: 100%; | |
} | |
.App .left-side form { | |
height: fit-content; | |
background: white; | |
border: 1px solid grey; | |
border-radius: 4px; | |
width: 300px; | |
padding: 40px 10px; | |
} | |
.App .left-side form input { | |
margin: 0 0 30px; | |
width: 200px; | |
} | |
.App .left-side form .btn { | |
height: 40px; | |
width: 200px; | |
background: white; | |
border: 1px solid grey; | |
cursor: pointer; | |
border-radius: 4px; | |
} | |
.App .left-side form .btn:hover { | |
color: white; | |
background: grey; | |
} | |
.App .left-side form .btn:focus { | |
box-shadow: none; | |
outline: none; | |
} | |
.App .left-side form .btn.widget-btn { | |
margin-top: 15px; | |
background: #0000ff; | |
border: 1px solid #0000ff; | |
color: #ffffff; | |
} | |
.App .left-side form .btn.widget-btn:hover { | |
margin-top: 15px; | |
background: #4b0082; | |
border: 1px solid #4b0082; | |
color: #ffffff; | |
} | |
.App .right-side .displayed-image { | |
height: 300px; | |
width: 300px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment