franpcode/Vanilla-Javascript-Counter
1
0
Fork 0
mirror of https://github.com/FranP-code/Vanilla-Javascript-Counter.git synced 2025-10-12 23:52:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styles added

Browse Source
This commit is contained in:
Francisco Pessano
2022-01-21 22:27:03 -03:00
parent bdb5b0f0a0
commit 62520df89d
6 changed files with 308 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
styles.css
View File

@@ -1,3 +1,109 @@
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
background: #ee3172;
background: linear-gradient(135deg, #ee3172 0%, #1079d1 82%);
height: 100%;
font-family: Helvetica, sans-serif;
}
.header-container {
display: flex;
justify-content: center;
}
.header-container header {
width: 60%;
padding: 3vh 0px;
display: flex;
justify-content: center;
border-bottom: 2px solid #fff;
margin-bottom: 5vh;
}
.header-container header h1 {
color: #fff;
user-select: none;
}
form {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px 0px 5vh 0px;
}
form .input-container {
display: flex;
flex-direction: column;
width: 20vw;
margin-bottom: 2vh;
}
form .input-container label {
color: #fff;
margin-bottom: 0.5vh;
}
form .input-container input {
border: none;
border-bottom: 1px solid #fff;
background: none;
outline: none;
color: #fff;
}
form .input-container input::placeholder {
color: rgba(255, 255, 255, 0.685);
}
form button {
width: 20vw;
height: 5vh;
box-sizing: border-box;
border: none;
border: 2px solid rgba(255, 255, 255, 0.699);
border-radius: 15px;
font-weight: bold;
color: #fff;
background: rgba(255, 255, 255, 0.1);
transition: 0.3s ease-in-out;
user-select: none;
}
form button:hover {
background: rgba(255, 255, 255, 0.4);
transition: 0.3s ease-in-out;
}
form button:disabled {
opacity: 20%;
transition: 0.3s ease-in-out;
}
form button:disabled:hover {
background: rgba(255, 255, 255, 0.1);
}
.counter-element-container {
display: flex;
flex-direction: column;
align-items: center;
}
.counter-element-container #counter-element {
color: #fff;
font-weight: bold;
font-size: 45pt;
}
@media (max-width: 768px) {
.header-container header {
width: 100%;
}
form .input-container {
width: 80vw;
}
form button {
width: 80vw;
}
}
/*# sourceMappingURL=styles.css.map */