Skip to content

Instantly share code, notes, and snippets.

@echohtp
Created October 22, 2020 18:53
Show Gist options
  • Save echohtp/3aaee4f2575fc120c975a0d3dada9493 to your computer and use it in GitHub Desktop.
Save echohtp/3aaee4f2575fc120c975a0d3dada9493 to your computer and use it in GitHub Desktop.
Gmail loading animation October 2020
<html>
<head>
<title>Gmail loading animation Fall 2020</title>
<meta name="description" content="This is the HTML and CSS for Google's Gmail loading icon, Fall 2020.">
<style>
body {
margin: 0;
width: 100%;
height: 100%
}
body,
td,
input,
textarea,
select,
#loading {
font-family: arial, sans-serif
}
input,
textarea,
select {
font-size: 100%
}
#loading {
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #fff
}
.msg {
color: #757575;
font-size: 20px;
letter-spacing: .2px;
line-height: 20px;
text-align: center
}
#nlpt {
animation: a-s .5s 2.5s 1 forwards;
background-color: #f1f1f1;
height: 4px;
margin: 56px auto 20px;
opacity: 0;
overflow: hidden;
position: relative;
width: 300px
}
#nlpt::before {
animation: a-lb 20s 3s linear forwards;
background-color: #db4437;
content: '';
display: block;
height: 100%;
position: absolute;
transform: translateX(-300px);
width: 100%
}
@keyframes a-lb {
0% {
transform: translateX(-300px)
}
5% {
transform: translateX(-240px)
}
15% {
transform: translateX(-30px)
}
25% {
transform: translateX(-30px)
}
30% {
transform: translateX(-20px)
}
45% {
transform: translateX(-20px)
}
50% {
transform: translateX(-15px)
}
65% {
transform: translateX(-15px)
}
70% {
transform: translateX(-10px)
}
95% {
transform: translateX(-10px)
}
100% {
transform: translateX(-5px)
}
}
@keyframes a-s {
100% {
opacity: 1
}
}
@keyframes a-h {
100% {
opacity: 0
}
}
@keyframes a-nt {
100% {
transform: none
}
}
@keyframes a-e {
43% {
animation-timing-function: cubic-bezier(.8, 0, .2, 1);
transform: scale(.75)
}
60% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-16px)
}
77% {
animation-timing-function: cubic-bezier(.16, 0, .2, 1);
transform: none
}
89% {
animation-timing-function: cubic-bezier(.8, 0, 1, 1);
transform: translateY(-5px)
}
100% {
transform: none
}
}
@keyframes a-ef {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: scaleY(.42)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: scaleY(.98)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: scaleY(.96)
}
100% {
transform: none
}
}
@keyframes a-efs {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
opacity: .3
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
opacity: .03
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
opacity: .05
}
100% {
opacity: 0
}
}
@keyframes a-es {
24% {
animation-timing-function: cubic-bezier(.8, 0, .6, 1);
transform: rotate(-25deg)
}
52% {
animation-timing-function: cubic-bezier(.63, 0, .2, 1);
transform: rotate(-42.5deg)
}
83% {
animation-timing-function: cubic-bezier(.8, 0, .84, 1);
transform: rotate(-42deg)
}
100% {
transform: rotate(-43deg)
}
}
.la-c {
animation: 3.6s cubic-bezier(.03, 0, .17, .67)kf-e;
border-radius: 22px 22px 15px 15px;
height: 165px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 220px
}
.la-c *,
.la-i,
.la-i * {
height: 100%;
position: absolute;
width: 100%
}
.la-i {
animation: .9s linear 1.2s kf-v;
opacity: 0
}
.la-r {
transform: scale(-1, 1)
}
.la-s {
background: #f1f3f4;
height: 142px;
left: 0;
top: 41px;
width: 50px
}
.la-t {
background: #f1f3f4;
height: 65px;
left: 0;
top: 19px;
transform: skew(0, 37deg);
width: 110px
}
.la-t>div {
background: #ea4335;
left: 50px;
width: 60px
}
.la-m {
border: 0 solid #fff;
border-radius: 72px 0 0 0;
border-width: 50px 0 0 50px;
height: 22px;
left: -31px;
top: -36px;
transform: rotate(37deg);
width: 116px
}
.la-i .la-m {
border-color: #fafbfb
}
@keyframes kf-e {
0% {
opacity: 0;
transform: scale(.72)
}
33% {
animation-timing-function: cubic-bezier(.21, .02, .03, .92);
opacity: 1;
transform: scale(.8)
}
50% {
animation-timing-function: linear;
transform: scale(.96)
}
}
@keyframes kf-c {
25% {
animation-timing-function: cubic-bezier(.17, .98, .38, 1);
transform: scale(1.1)
}
to {
transform: none
}
}
@keyframes kf-s {
35% {
animation-timing-function: cubic-bezier(.17, .34, .69, .78);
transform: scale(.88)
}
to {
transform: none
}
}
@keyframes kf-v {
66% {
animation-timing-function: cubic-bezier(.3, 0, .83, .83);
opacity: 1
}
}
.invfr {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 0;
height: 0;
border: 0
}
.msgb {
position: absolute;
right: 0;
font-size: 12px;
font-weight: normal;
color: #000;
padding: 20px
}
.gb_3e {
background: rgba(60, 64, 67, 0.9);
-webkit-border-radius: 4px;
border-radius: 4px;
color: #ffffff;
font: 500 12px "Roboto", arial, sans-serif;
letter-spacing: 0.8px;
line-height: 16px;
margin-top: 4px;
min-height: 14px;
padding: 4px 8px;
position: absolute;
z-index: 1000;
-webkit-font-smoothing: antialiased;
}
.gb_a-a {
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
}
.gb_a.gb_b-b-c {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
}
.gb_a.gb_b-b {
position: absolute;
top: 0;
left: 0;
background-color: #fff;
border: 1px solid #acacac;
width: auto;
padding: 0;
z-index: 1001;
overflow: auto;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
box-shadow: rgba(0, 0, 0, 0.2) 0 4px 16px;
-webkit-transition: top 0.5s ease-in-out;
-webkit-transition: top 0.5s ease-in-out;
transition: top 0.5s ease-in-out;
}
.gb_a-d {
position: absolute;
z-index: 1002;
}
.gb_a.gb_b-b-e {
font-size: 0;
padding: 0;
}
.gb_a.gb_b-b-f {
height: 0;
margin: 0;
}
.gb_a.gb_b-b-f-g,
.gb_a.gb_b-b-h {
display: none;
}
.gb_Na~.gb_3a,
.gb_Na~.gb_4a {
left: auto;
right: 11.5px;
}
.gb_5a {
outline: none;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.gb_l.gb_5a {
-webkit-border-radius: 8px;
border-radius: 8px;
margin-left: 12px;
}
@media screen and (min-width: 361px) {
.gb_l.gb_5a {
width: 354px;
}
}
@media screen and (max-width: 361px) {
.gb_l.gb_5a {
width: calc(100vw - 12px * 2);
}
}
.gb_l.gb_5a.gb_6a {
max-height: -webkit-calc(100vh - 62px - 100px);
max-height: calc(100vh - 62px - 100px);
}
.gb_l.gb_5a.gb_7a {
max-height: -webkit-calc(100vh - 62px - 15px - 100px);
max-height: calc(100vh - 62px - 15px - 100px);
}
.gb_l.gb_5a.gb_8a {
background-color: #2d2e30;
}
.gb_9a.gb_ab {
color: #5f6368;
font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
}
.gb_bb.gb_9a.gb_ab {
background-color: rgba(138, 180, 248, 0.24);
color: #e8eaed;
}
.gb_cb,
#gb a.gb_cb.gb_cb,
.gb_db a,
#gb .gb_db.gb_db a {
color: #36c;
text-decoration: none;
}
.gb_9a>.gb_cb,
#gb .gb_9a>a.gb_cb.gb_cb {
color: #0070ff;
font: inherit;
font-weight: 500;
outline: 0;
}
.gb_bb.gb_9a>.gb_cb,
#gb .gb_bb.gb_9a>a.gb_cb.gb_cb {
color: #8ab4f8;
}
.gb_cb:active,
#gb a.gb_cb.gb_cb:active,
.gb_cb:hover,
#gb a.gb_cb.gb_cb:hover,
.gb_db a:active,
#gb .gb_db a:active,
.gb_db a:hover,
#gb .gb_db a:hover,
#gb .gb_9a>a.gb_cb.gb_cb:focus {
text-decoration: underline;
}
.gb_eb {
margin: 20px;
white-space: nowrap;
}
.gb_l>.gb_eb {
margin: 20px 33px;
}
.gb_fb,
.gb_gb {
display: inline-block;
vertical-align: top;
}
.gb_fb.gb_hb,
.gb_gb.gb_ib {
vertical-align: middle;
}
.gb_l .gb_fb,
.gb_l .gb_gb {
display: block;
vertical-align: top;
text-align: center;
}
.gb_hb {
cursor: default;
}
.gb_l .gb_fb {
margin-bottom: 10px;
position: relative;
height: 86px;
width: 86px;
}
.gb_jb {
-webkit-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.gb_Ma {
border: none;
margin-right: 6px;
vertical-align: top;
height: 80px;
width: 80px;
}
.gb_kb {
margin-bottom: 11px;
margin-top: 4px;
}
@media screen and (min-width: 361px) {
.gb_l .gb_fb,
.gb_kb {
margin-left: 101px;
}
}
@media screen and (max-width: 361px) {
.gb_l .gb_fb,
.gb_kb {
margin-left: calc((calc(100vw - 12px * 2) - 33px * 2 - 86px) / 2);
}
}
.gb_lb.gb_lb {
fill: #1a73e8;
}
.gb_8a .gb_lb {
fill: #8ab4f8;
}
.gb_l .gb_mb.gb_Ma {
position: relative;
left: 2px;
margin-right: 10px;
top: 2px;
height: 76px;
width: 76px;
}
.gb_l .gb_nb {
background: #fff;
bottom: 0;
position: absolute;
right: 0;
overflow: visible;
height: 32px;
width: 32px;
}
.gb_l.gb_8a .gb_nb {
background: #2d2e30;
}
.gb_ob {
bottom: 0;
-webkit-box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
margin: 0 2.5px 3px;
outline: 0;
position: absolute;
right: 0;
height: 26px;
width: 26px;
}
.gb_ob:hover {
background-color: #f8faff;
}
.gb_ob:focus,
.gb_ob:hover:focus {
background-color: #f4f8ff;
}
.gb_ob:active,
.gb_ob:focus:active {
background-color: #f4f8ff;
-webkit-box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
}
.gb_ob:hover>svg.gb_pb,
.gb_ob:focus>svg.gb_pb,
.gb_ob:active>svg.gb_pb {
fill: #1a73e8;
}
.gb_qb {
font-weight: bold;
margin: -4px 0 1px 0;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_l .gb_qb {
color: #202124;
font: 500 16px/22px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: 0.29px;
margin: 0;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_l.gb_8a .gb_qb {
color: #e8eaed;
}
.gb_sb {
color: #666;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_l .gb_sb {
color: #5f6368;
font: 400 14px/19px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: normal;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_l.gb_8a .gb_sb {
color: #e8eaed;
}
.gb_ib>.gb_sb {
color: #000;
font-weight: bold;
margin: -4px 0 1px 0;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_tb {
color: #666;
font-style: italic;
font-weight: 500;
margin: 4px 0;
overflow: hidden;
}
.gb_ub {
color: #5f6368;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 19px;
margin-top: 4px;
text-align: center;
}
.gb_8a .gb_ub {
color: #9aa0a6;
}
.gb_vb {
font-weight: 500;
}
.gb_wb.gb_wb {
background-color: #ffffff;
border: 1px solid #dadce0;
-webkit-border-radius: 100px;
border-radius: 100px;
color: #3c4043;
display: inline-block;
font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: 0.25px;
margin: 16px 0 0;
max-width: 254px;
outline: 0;
padding: 8px 16px;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_8a .gb_wb.gb_wb {
background-color: #2d2e30;
border: 1px solid #5f6368;
color: #e8eaed;
}
.gb_wb:hover {
background-color: #f7f8f8;
}
.gb_wb:focus,
.gb_wb:hover:focus {
background-color: #f4f4f4;
}
.gb_wb:active,
.gb_wb:focus:active {
background-color: #e8e8e9;
border-color: transparent;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
}
.gb_xb {
color: #5f6368;
margin: 14px 33px;
text-align: center;
white-space: normal;
}
.gb_8a .gb_xb {
color: #e8eaed;
}
.gb_yb.gb_yb {
-webkit-border-radius: 4px;
border-radius: 4px;
color: #5f6368;
display: inline-block;
font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
outline: 0;
padding: 4px 8px;
text-decoration: none;
text-align: center;
white-space: normal;
}
.gb_8a .gb_yb.gb_yb {
border: 1px solid transparent;
color: #e8eaed;
}
.gb_yb:hover {
background-color: #f7f8f8;
}
.gb_yb:focus,
.gb_yb:hover:focus {
background-color: #f4f4f4;
}
.gb_yb:active,
.gb_yb:active:focus {
background-color: #e8e8e9;
}
.gb_gb .gb_3 {
background: #4d90fe;
border-color: #3079ed;
font-weight: bold;
margin: 10px 0 0 0;
color: #fff;
}
#gb .gb_gb a.gb_3.gb_3 {
color: #fff;
}
.gb_gb .gb_3:hover {
background: #357ae8;
border-color: #2f5bb7;
}
.gb_zb .gb_3a {
border-bottom-color: #fef9db;
}
.gb_ab {
background: #fef9db;
font-size: 11px;
padding: 10px 20px;
white-space: normal;
}
.gb_9a.gb_ab {
background: #e8f0fe;
-webkit-border-radius: 4px;
border-radius: 4px;
margin: 4px;
padding: 4px 8px;
text-align: center;
}
.gb_9a.gb_ab>#gbpbt>span {
white-space: nowrap;
font-weight: 500;
}
.gb_ab b,
.gb_cb {
white-space: nowrap;
}
.gb_Ab.gb_Ab {
background-color: #ffffff;
color: #3c4043;
display: table;
font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: 0.25px;
outline: 0;
padding: 14px 41px;
text-align: center;
text-decoration: none;
width: 100%;
}
.gb_8a .gb_Ab.gb_Ab {
background-color: #2d2e30;
border: 1px solid transparent;
color: #e8eaed;
width: 270px;
}
.gb_Ab:hover {
background-color: #f7f8f8;
}
.gb_Ab:focus,
.gb_Ab:hover:focus {
background-color: #f4f4f4;
}
.gb_Ab:active,
.gb_Ab:focus:active {
background-color: #e8e8e9;
}
.gb_Bb {
border: none;
display: table-cell;
vertical-align: middle;
height: 20px;
width: 20px;
}
.gb_ob>svg.gb_pb,
.gb_Bb>svg.gb_Cb,
.gb_Db>svg.gb_Eb {
color: #5f6368;
fill: currentColor;
}
.gb_8a .gb_Db>svg.gb_Eb {
fill: #9aa0a6;
}
.gb_8a .gb_ob {
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
.gb_8a .gb_ob>svg.gb_pb,
.gb_8a .gb_Bb>svg.gb_Cb {
color: #e8eaed;
fill: currentColor;
}
.gb_8a .gb_ob:hover>svg.gb_pb,
.gb_8a .gb_ob:focus>svg.gb_pb,
.gb_8a .gb_ob:focus:hover>svg.gb_pb,
.gb_8a .gb_ob:active>svg.gb_pb {
fill: #8ab4f8;
}
.gb_8a .gb_ob:hover {
background-color: #353639;
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
.gb_8a .gb_ob:focus,
.gb_8a .gb_ob:focus:hover {
background-color: #353639;
border: 1px solid #5f6368;
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
.gb_8a .gb_ob:active {
background-color: rgba(255, 255, 255, 0.12);
-webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
}
.gb_Fb {
display: table-cell;
padding: 0 74px 0 16px;
text-align: left;
vertical-align: middle;
white-space: normal;
}
.gb_Hb {
border-bottom: 1px solid #e8eaed;
border-top: 1px solid #e8eaed;
padding: 0 17px;
text-align: center;
}
.gb_8a .gb_Hb {
border-bottom: 1px solid #5f6368;
border-top: 1px solid #5f6368;
}
.gb_Ib.gb_Ib,
.gb_Jb.gb_Jb {
background-color: #ffffff;
border: 1px solid #dadce0;
-webkit-border-radius: 4px;
border-radius: 4px;
display: inline-block;
font: 500 14px/16px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: 0.15px;
margin: 16px;
outline: 0;
padding: 10px 24px;
text-align: center;
text-decoration: none;
white-space: normal;
}
.gb_Ib.gb_Ib {
color: #3c4043;
}
.gb_Jb.gb_Jb {
color: #1a73e8;
}
.gb_8a .gb_Jb.gb_Jb,
.gb_8a .gb_Ib.gb_Ib {
background-color: #2d2e30;
border: 1px solid #5f6368;
color: #e8eaed;
}
.gb_Ib:hover {
background-color: #f7f8f8;
}
.gb_Ib:focus,
.gb_Ib:hover:focus {
background-color: #f4f4f4;
}
.gb_Ib:active,
.gb_Ib:active:focus {
background-color: #e8e8e9;
border-color: transparent;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
}
.gb_Jb:hover {
background-color: #f8fbff;
border-color: #cce0fc;
}
.gb_Jb:focus,
.gb_Jb:hover:focus {
background-color: #f4f8ff;
border-color: #c9ddfc;
}
.gb_Jb:active,
.gb_Jb:active:focus {
background-color: #ecf3fe;
border-color: transparent;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
}
.gb_Nb {
border-top: 1px solid #e8eaed;
}
.gb_8a .gb_Nb {
border-top: 1px solid #5f6368;
}
.gb_l.gb_5a {
overflow-y: auto;
overflow-x: hidden;
}
.gb_Qb {
border-top: 1px solid #ccc;
border-top-color: rgba(0, 0, 0, 0.2);
display: block;
outline-offset: -2px;
padding: 10px 20px;
position: relative;
white-space: nowrap;
}
.gb_Rb>.gb_Qb {
border: none;
cursor: pointer;
height: 35px;
outline: 0;
padding: 12px 33px 13px;
}
.gb_Sb .gb_Qb:focus .gb_Tb {
outline: 1px dotted #fff;
}
.gb_Qb:hover {
background: #eee;
}
.gb_Rb>.gb_Qb:hover {
background-color: #f7f8f8;
}
.gb_Rb>.gb_Qb:focus,
.gb_Rb>.gb_Qb:hover:focus {
background-color: #f4f4f4;
}
.gb_Rb>.gb_Qb:active,
.gb_Rb>.gb_Qb:focus:active {
background-color: #e8e8e9;
}
.gb_8a .gb_Ub:hover,
.gb_8a .gb_Ab:hover,
.gb_8a .gb_yb:hover,
.gb_8a .gb_Rb>.gb_Qb:hover {
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid transparent;
}
.gb_8a .gb_Ib:hover,
.gb_8a .gb_wb:hover {
background-color: rgba(232, 234, 237, 0.04);
border: 1px solid #5f6368;
}
.gb_8a .gb_Ub:focus,
.gb_8a .gb_Ub:hover:focus,
.gb_8a .gb_wb:focus,
.gb_8a .gb_wb:hover:focus,
.gb_8a .gb_Ab:focus,
.gb_8a .gb_Ab:hover:focus,
.gb_8a .gb_Ib:focus,
.gb_8a .gb_Ib:hover:focus,
.gb_8a .gb_Rb>.gb_Qb:focus,
.gb_8a .gb_Rb>.gb_Qb:hover:focus {
background-color: rgba(232, 234, 237, 0.12);
border: 1px solid #e8eaed;
}
.gb_8a .gb_yb:focus,
.gb_8a .gb_yb:hover:focus {
background-color: rgba(232, 234, 237, 0.12);
}
.gb_8a .gb_Ub:active,
.gb_8a .gb_Ub:focus:active,
.gb_8a .gb_Ab:active,
.gb_8a .gb_Ab:focus:active,
.gb_8a .gb_yb:active,
.gb_8a .gb_yb:active:focus,
.gb_8a .gb_Rb>.gb_Qb:active,
.gb_8a .gb_Rb>.gb_Qb:focus:active {
background-color: rgba(232, 234, 237, 0.1);
border: 1px solid transparent;
}
.gb_Vb {
overflow-x: hidden;
}
.gb_8a .gb_Rb>.gb_Qb {
border: 1px solid transparent;
}
.gb_8a .gb_Ib:active,
.gb_8a .gb_Ib:active:focus,
.gb_8a .gb_wb:active,
.gb_8a .gb_wb:focus:active {
background-color: rgba(232, 234, 237, 0.1);
border: 1px solid #5f6368;
}
.gb_Qb[selected="true"] {
overflow: hidden;
}
.gb_Rb>.gb_Qb[selected="true"] {
background-color: rgba(60, 64, 67, 0.1);
}
.gb_8a .gb_Rb>.gb_Qb[selected="true"] {
background-color: rgba(255, 255, 255, 0.12);
}
.gb_Qb[selected="true"]>.gb_Wb {
display: block;
position: absolute;
z-index: 2;
}
.gb_Wb::-moz-focus-inner {
border: 0;
}
.gb_Wb {
background-color: transparent;
border: none;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
line-height: 16px;
margin-bottom: 1px;
min-height: 36px;
min-width: 86px;
outline: none;
padding: 10px 24px;
text-align: center;
text-decoration: none;
top: 16px;
width: auto;
}
.gb_Xb.gb_Zb {
background-color: #1a73e8;
color: #fff;
margin-left: 0;
margin-right: 12px;
margin-top: 14px;
}
.gb_8a .gb_Xb.gb_Zb {
background-color: #8ab4f8;
color: #2d2e30;
}
.gb_Xb.gb_0b {
background-color: #ffffff;
border: 1px solid #dadce0;
color: #3c4043;
margin-left: 0;
margin-right: 0;
margin-top: 11px;
}
.gb_8a .gb_Xb.gb_0b {
background-color: rgba(218, 220, 224, 0.01);
border: 1px solid #5f6368;
color: #e8eaed;
}
.gb_Wb.gb_0b:hover {
background-color: #f7f8f8;
}
.gb_Wb.gb_0b:focus,
.gb_Wb.gb_0b:hover:focus {
background-color: #f4f4f4;
}
.gb_Wb.gb_0b:active {
background-color: #f4f4f4;
border: 1px solid #5f6368;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
.gb_Wb.gb_Zb:hover {
background-color: #2b7de9;
border-color: transparent;
-webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
}
.gb_Wb.gb_Zb:focus,
.gb_Wb.gb_Zb:hover:focus {
background-color: #5094ed;
border-color: transparent;
-webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
}
.gb_Wb.gb_Zb:active {
background-color: #63a0ef;
-webkit-box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3), 0 1px 3px 1px rgba(66, 133, 244, 0.15);
}
.gb_8a .gb_Wb.gb_0b:hover {
background-color: rgba(232, 234, 237, 0.04);
}
.gb_8a .gb_Wb.gb_0b:focus,
.gb_8a .gb_Wb.gb_0b:hover:focus {
background-color: rgba(232, 234, 237, 0.12);
border: 1px solid #e8eaed;
}
.gb_8a .gb_Wb.gb_0b:active,
.gb_8a .gb_Wb.gb_0b:active:focus {
background-color: rgba(232, 234, 237, 0.1);
border: 1px solid #5f6368;
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
}
.gb_8a .gb_Wb.gb_Zb:hover {
background-color: #93b9f8;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.gb_8a .gb_Wb.gb_Zb:focus,
.gb_8a .gb_Wb.gb_Zb:hover:focus {
background-color: #a5c5f9;
}
.gb_8a .gb_Wb.gb_Zb:active {
background-color: #8ab4f8;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}
.gb_Qb[selected="true"]>.gb_Wb:focus {
background-color: rgba(0, 0, 0, 0.24);
-webkit-border-radius: 2px;
border-radius: 2px;
outline: 0;
}
.gb_Qb[selected="true"]>.gb_Wb:hover,
.gb_Qb[selected="true"]>.gb_Wb:focus:hover {
background-color: #565656;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.gb_Qb[selected="true"]>.gb_Wb:active {
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #212121;
}
.gb_0b {
left: 0;
margin-left: 5%;
}
.gb_Zb {
margin-right: 5%;
right: 0;
}
.gb_Qb:first-child,
.gb_1b:first-child+.gb_Qb {
border-top: 0;
}
.gb_8a .gb_Qb:first-child,
.gb_8a .gb_1b:first-child+.gb_Qb {
border-top: 1px solid transparent;
}
.gb_8a .gb_Qb:first-child:focus:hover,
.gb_8a .gb_1b:first-child+.gb_Qb:focus:hover,
.gb_8a .gb_Qb:first-child:focus,
.gb_8a .gb_1b:first-child+.gb_Qb:focus {
border-top: 1px solid #e8eaed;
}
.gb_8a .gb_Qb:first-child:active,
.gb_8a .gb_1b:first-child+.gb_Qb:active,
.gb_8a .gb_Qb:first-child:active:focus,
.gb_8a .gb_1b:first-child+.gb_Qb:active:focus {
border-top: 1px solid transparent;
}
.gb_1b {
display: none;
}
.gb_Rb>.gb_Qb.gb_2b {
cursor: default;
opacity: 0.38;
}
.gb_Rb>.gb_Qb.gb_2b:hover,
.gb_Rb>.gb_Qb.gb_2b:focus,
.gb_Rb>.gb_Qb.gb_2b:active {
background-color: #fff;
}
.gb_3b {
border: none;
vertical-align: top;
height: 32px;
width: 32px;
}
.gb_Tb {
display: inline-block;
margin: 0 0 0 12px;
}
@media screen and (min-width: 361px) {
.gb_l .gb_Tb {
width: 244px;
}
}
@media screen and (max-width: 361px) {
.gb_l .gb_Tb {
width: calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2);
}
}
.gb_5a.gb_ua .gb_Tb {
max-width: 222px;
}
.gb_4b .gb_Tb {
margin-top: 9px;
}
.gb_5b {
color: #3c4043;
font: 500 14px/18px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
letter-spacing: 0.25px;
text-overflow: ellipsis;
overflow: hidden;
}
.gb_8a .gb_5b {
color: #e8eaed;
}
.gb_6b .gb_5b {
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
font-size: 12px;
letter-spacing: normal;
line-height: 16px;
}
.gb_8a .gb_7b {
color: #bdc1c6;
}
.gb_7b {
color: #5f6368;
display: inline-block;
font: 400 12px / 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-overflow: ellipsis;
overflow: hidden;
}
@media screen and (min-width: 361px) {
.gb_l .gb_7b {
max-width: 244px;
}
}
@media screen and (max-width: 361px) {
.gb_l .gb_7b {
max-width: calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2);
}
}
@media screen and (min-width: 361px) {
.gb_Tb>.gb_7b.gb_8b {
max-width: 224px;
}
}
@media screen and (max-width: 361px) {
.gb_Tb>.gb_7b.gb_8b {
max-width: calc(calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2) - 20px);
}
}
.gb_6b .gb_7b {
margin-top: 2px;
}
.gb_9b {
color: #5d6369;
display: block;
float: right;
font: italic 400 12px/14px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
padding: 3px 0 0 20px;
text-align: right;
visibility: visible;
}
.gb_8a .gb_9b {
color: #9aa0a6;
}
.gb_ac {
background-color: transparent;
display: none;
left: 0;
overflow-wrap: break-word;
position: relative;
margin-left: 44px;
white-space: normal;
width: 100%;
word-wrap: break-word;
z-index: 1;
}
@media screen and (min-width: 361px) {
.gb_ac {
max-width: 244px;
}
}
@media screen and (max-width: 361px) {
.gb_ac {
max-width: calc(calc(100vw - 12px * 2) - 33px * 2 - 44px);
}
}
.gb_Qb[selected="true"]>.gb_ac {
display: block;
}
.gb_Rb>.gb_Qb[selected="true"] {
height: auto;
min-height: 91px;
}
.gb_Wb:hover {
background-color: rgba(100, 100, 100, 0.4);
}
.gb_bc {
display: block;
padding: 10px 20px;
}
.gb_Ub {
outline: 0;
padding: 14px 41px;
width: 280px;
}
.gb_Ub:hover {
background-color: #f7f8f8;
}
.gb_Ub:focus,
.gb_Ub:hover:focus {
background-color: #f4f4f4;
}
.gb_Ub:active,
.gb_Ub:focus:active {
background-color: #e8e8e9;
}
.gb_cc {
display: inline-block;
vertical-align: middle;
height: 20px;
width: 20px;
}
.gb_e .gb_dc::before {
left: -244px;
top: 0;
}
.gb_ec {
color: #427fed;
display: inline-block;
padding: 0 25px 0 10px;
vertical-align: middle;
white-space: normal;
}
.gb_fc {
color: #3c4043;
font: 500 14px/18px Google Sans, Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
padding: 0 25px 0 16px;
text-align: left;
}
@media screen and (min-width: 361px) {
.gb_fc {
width: 195px;
}
}
@media screen and (max-width: 361px) {
.gb_fc {
width: calc(calc(calc(100vw - 12px * 2) - 12px - 32px - 33px * 2) - 24px - 25px);
}
}
.gb_8a .gb_fc {
color: #e8eaed;
}
.gb_gc {
vertical-align: middle;
}
.gb_hc {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.gb_ic {
height: 108px;
position: absolute;
right: -6px;
top: -6px;
width: 108px;
}
.gb_jc {
height: 88px;
position: absolute;
right: 2px;
top: -4px;
width: 88px;
}
@-webkit-keyframes progressmove {
0% {
margin-left: -100%;
}
to {
margin-left: 100%;
}
}
@keyframes progressmove {
0% {
margin-left: -100%;
}
to {
margin-left: 100%;
}
}
</style>
</head>
<body>
<div id="loading" style="">
<div style="bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0">
<div class="la-i">
<div
style="animation:1.7s cubic-bezier(.17,0,.1,.87)1.2s kf-s;background:#fafbfb;border-radius:330px;height:660px;left:50%;margin:-406px -330px;top:50%;transform:scale(0);width:660px">
</div>
</div>
</div>
<div style="height:100%;text-align:center">
<div style="height:50%;margin:0 0 -158px"></div>
<div class="la-c">
<div class="la-s"></div>
<div class="la-t"></div>
<div class="la-r">
<div class="la-s"></div>
<div class="la-t"></div>
</div>
<div
style="animation:1.6s cubic-bezier(0,0,.19,.82)1.2s forwards kf-c;transform:scale(1.9);transform-origin:110px 203px">
<div class="la-s" style="background:#4285f4"></div>
<div class="la-t" style="background:#c5221f">
<div></div>
</div>
<div class="la-r">
<div class="la-s" style="background:#34a853"></div>
<div class="la-t" style="background:#fbbc04">
<div></div>
</div>
</div>
</div>
<div class="la-m"></div>
<div class="la-r">
<div class="la-m"></div>
</div>
<div class="la-i">
<div class="la-m"></div>
<div class="la-r">
<div class="la-m"></div>
</div>
</div>
</div>
<div id="nlpt"></div>
<div style="animation:a-s .25s 1.25s 1 forwards;opacity:0" class="msg">Loading Gmail</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment