mirror of
https://github.com/zulip/zulip-desktop.git
synced 2025-11-02 13:03:22 +00:00
c1f6159d69
This redesigns the landing page to incorporate the Zulip style guide. This also adds two animations: 1. The error text slides down on error and back up when typing. 2. The form section shakes when there is invalid input for 0.5s.
144 lines
2.4 KiB
CSS
144 lines
2.4 KiB
CSS
* {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
Helvetica, Arial, sans-serif, "Apple Color Emoji",
|
|
"Segoe UI Emoji", "Segoe UI Symbol";
|
|
-webkit-font-smoothing: antialiased;
|
|
color: #444;
|
|
|
|
vertical-align: top;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-image: url(../img/topography.png);
|
|
}
|
|
|
|
input,
|
|
button {
|
|
font-size: 1em;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin: 0px 0px 30px 0px;
|
|
}
|
|
|
|
header img {
|
|
width: 50px;
|
|
}
|
|
|
|
header h1 {
|
|
display: inline-block;
|
|
margin: 10px 0px 10px 10px;
|
|
|
|
font-weight: 500;
|
|
}
|
|
|
|
|
|
section.server {
|
|
display: inline-block;
|
|
padding: 50px;
|
|
margin-top: calc(50vh - 135px);
|
|
|
|
text-align: left;
|
|
|
|
box-shadow: 0px 0px 100px rgba(0,0,0,0.15);
|
|
|
|
background-color: #fff;
|
|
|
|
animation-name: pulse;
|
|
animation-duration: 2s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
section.shake {
|
|
animation-name: shake;
|
|
animation-duration: 0.5s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
form label {
|
|
display: block;
|
|
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
form input[type=text] {
|
|
width: 300px;
|
|
border: 2px solid #ccc;
|
|
padding: 10px 10px;
|
|
|
|
outline: none;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
form input[type=text]:hover,
|
|
form input[type=text]:focus {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
form button {
|
|
padding: 10px 10px;
|
|
|
|
background-color: #52c2af;
|
|
color: #fff;
|
|
|
|
border: 2px solid #52c2af;
|
|
outline: none;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
form button:hover {
|
|
background-color: #30b09a;
|
|
border-color: #30b09a;
|
|
}
|
|
|
|
form button:active {
|
|
background-color: #14957f;
|
|
border-color: #14957f;
|
|
}
|
|
|
|
form #error {
|
|
margin: 5px 0px 0px;
|
|
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
|
|
color: rgb(201, 107, 107);
|
|
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
|
|
height: 15px;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
form #error.show {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
/* -- generic components -- */
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0px 0px 100px rgba(0,0,0,0.15); }
|
|
50% { box-shadow: 0px 0px 100px rgba(0,0,0,0.30); }
|
|
100% { box-shadow: 0px 0px 100px rgba(0,0,0,0.15); }
|
|
}
|
|
|
|
@keyframes shake {
|
|
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
|
20%, 80% { transform: translate3d(2px, 0, 0); }
|
|
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
|
40%, 60% { transform: translate3d(4px, 0, 0); }
|
|
}
|