1
0
Fork 0
mirror of https://github.com/voltbonn/profile-picture-generator.git synced 2024-12-23 00:05:09 +00:00
profile.volt.link/src/App.css
2021-01-21 20:54:09 +01:00

93 lines
1.7 KiB
CSS

:root{
--volt-purple: #582C83;
--background: #140022;
}
*{
margin: 0;
padding: 0;
font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.App {
text-align: center;
background-color: var(--background);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
padding: 10vh;
}
h2{
margin: 10vh 0 2vh 0;
font-size: calc(10px + 4vmin);
}
p{
max-width: 100%;
width: calc(40vh + 15vw);
}
.HeaderImage{
height: calc(10px + 30vmin);
max-width: 100%;
}
.FinishedFrame {
height: 36vh;
margin: 2vh;
}
.FrameChooser .frame{
height: 12vh;
margin: 2vh;
cursor: pointer;
box-shadow: 0 0 0 1vh rgba(255,255,255,0);
transition: transform 0.2s ease;
}
.FrameChooser .frame:hover{
transform-origin: center center;
transform: scale(1.1);
}
.FrameChooser .frame.choosen{
box-shadow: 0 0 0 1vh white;
}
button,
.labelButton{
outline: none;
border: none;
margin: 2vh;
padding: 1vh 2vh;
font-size: calc(10px + 2vmin);
font-weight: bold;
cursor: pointer;
background: white;
color: var(--volt-purple);
transition: transform 0.2s ease;
}
button:hover,
.labelButton:hover{
transform-origin: center center;
transform: scale(1.05);
}
.labelButton img{
display: inline;
height: calc(10px + 4vmin);
vertical-align: middle;
margin: 0 2vh 0 -1vh;
}
.labelButton span{
vertical-align: middle;
}