.rl-strip-animation(@rgba, @stripOpacity) { background-image: -webkit-linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(@rgba, @rgba, @rgba, @stripOpacity) 25%, transparent 25%, transparent 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 50%, rgba(@rgba, @rgba, @rgba, @stripOpacity) 75%, transparent 75%, transparent); } @keyframes highlight-folder-row { 0% {transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @-moz-keyframes highlight-folder-row { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-webkit-keyframes highlight-folder-row { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-webkit-keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @keyframes textLoadingAnimationKeyFrame { 0% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } @-moz-keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } @keyframes animate-stripes { 0% {background-position: 0 0;} 100% {background-position: 60px 0;} } html.rl-started-trigger.no-mobile .b-login-content .loginFormWrapper { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); transform: translateY(-30px); } html.rl-started-trigger.no-mobile #rl-content { .opacity(70); } #rl-loading { .transition(opacity 0.5s linear); } .rl-anim { &.csstransitions.no-mobile { #rl-left { .transition(width 0.3s ease-out); } #rl-right { .transition(left 0.3s ease-out); } #rl-sub-left, #rl-sub-left .messageList .inputSearch { .transition(width 0.3s ease-out); } #rl-sub-right { .transition(left 0.3s ease-out); } } &.csstransitions.no-mobile #rl-content { .transition(opacity 0.3s ease-out); } &.csstransitions.no-mobile .b-login-content .loginFormWrapper { .transition(all 0.3s ease-out); } &.rgba.cssanimations.backgroundsize .e-strip-animation { -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; background-size: 60px 60px; .rl-strip-animation(0, 0.1); -webkit-animation: animate-stripes 2s linear infinite; -moz-animation: animate-stripes 2s linear infinite; animation: animate-stripes 2s linear infinite; } &.csstransitions .b-settings-folders { .folder-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-settings-accounts { .account-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-settings-identities { .identity-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-admin-domains { .e-item { .button-delete { .transition(all 0.2s linear); } } } &.csstransitions .b-compose { .button-delete { .transition(margin-left 0.2s linear); } } &.cssanimations .b-folders .e-item .anim-action-class { -webkit-animation: highlight-folder-row 0.5s linear; -moz-animation: highlight-folder-row 0.5s linear; animation: highlight-folder-row 0.5s linear; } &.csstransitions .messageList { .messageListItem { .transition(max-height 400ms ease); } .listDragOver { .transition(all 400ms ease); } } &.csstransitions .b-list-content { .e-contact-item { .transition(max-height 400ms ease); } } &.csstransitions .modal.b-domain-content { .modal-body { .transition(left 500ms ease); } } &.csstransitions .modal.fade { .transition(all 0.2s ease-out); -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); transform: translateY(-20px); &.in { -webkit-transform: none; -moz-transform: none; transform: none; } } &.cssanimations .b-compose.loading .b-header-toolbar { -webkit-background-size: 60px 60px; -moz-background-size: 60px 60px; background-size: 60px 60px; .rl-strip-animation(255, 0.2); -webkit-animation: animate-stripes 2s linear infinite; -moz-animation: animate-stripes 2s linear infinite; animation: animate-stripes 2s linear infinite; } } .textLoadingAnimationD1, .textLoadingAnimationD2, .textLoadingAnimationD3 { -webkit-animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; -moz-animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; animation: textLoadingAnimationKeyFrame 1s linear infinite 0s; } .textLoadingAnimationD2 { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; } .textLoadingAnimationD3 { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; }