https://apex.oracle.com/pls/apex/r/apex_pm/ut/getting-started
--login backaground css
======================
.t-PageBody--login {
background: url(#APP_FILES#login_bg.jpg);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
}
.t-Login-region {
background-color: hsl(0deg 2.88% 14.54% / 65%));
}
Custom css
.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.animation-delay-1 {
-webkit-animation-delay: .1s!important;
animation-delay: .1s!important
}
.animation-delay-2 {
-webkit-animation-delay: .2s!important;
animation-delay: .2s!important
}
.animation-delay-3 {
-webkit-animation-delay: .3s!important;
animation-delay: .3s!important
}
.animation-delay-4 {
-webkit-animation-delay: .4s!important;
animation-delay: .4s!important
}
.animation-delay-5 {
-webkit-animation-delay: .5s!important;
animation-delay: .5s!important
}
.animation-delay-6 {
-webkit-animation-delay: .6s!important;
animation-delay: .6s!important
}
.animation-delay-7 {
-webkit-animation-delay: .7s!important;
animation-delay: .7s!important
}
.animation-delay-8 {
-webkit-animation-delay: .8s!important;
animation-delay: .8s!important
}
.animation-delay-9 {
-webkit-animation-delay: .9s!important;
animation-delay: .9s!important
}
.animation-delay-10 {
-webkit-animation-delay: 1s!important;
animation-delay: 1s!important
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
to {
opacity: 1;
-webkit-transform: none;
transform: none
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
Custom JS
apex.jQuery( document ).ready( function() {
setTimeout(function () {
$(".t-Alert.t-Alert--success").removeAttr("style").hide().fadeOut();
}, 3000);
//allow number and dot only
$(".number_field").keydown(function (e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Allow: Ctrl+A, Command+A
(e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
// Allow: home, end, left, right, down, up
(e.keyCode >= 35 && e.keyCode <= 40)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
});
Slide Show
.slideshow {
list-style: none;
margin: 0px;
}
.slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-animation: imageAnimation 40s linear infinite 0s;
-moz-animation: imageAnimation 40s linear infinite 0s;
animation: imageAnimation 40s linear infinite 0s;
}
.slideshow li:nth-child(1) span {
background-image: url(#APP_FILES#login_bg.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(#APP_FILES#login_bg1.jpg);
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
animation-delay: 10s;
}
.slideshow li:nth-child(3) span {
background-image: url(#APP_FILES#login_bg2.jpg);
-webkit-animation-delay: 20s;
-moz-animation-delay: 20s;
animation-delay: 20s;
}
.slideshow li:nth-child(4) span {
background-image: url(#APP_FILES#login_bg3.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
-moz-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
12.5% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
25% {
opacity: 1;
}
37.5% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.no-cssanimations .slideshow li span {
opacity: 1;
}
animation
-----------------
https://animate.style/
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
animate__rollIn
An animated element
Video background in login screen
.t-Login-region {
padding: var(--ut-login-region-padding,1rem);
}
.t-Login-logo {
width: var(--ut-login-logo-size,7rem);
height: var(--ut-login-logo-size,7rem);
background-color: transparent;
}
.t-PageBody--login{
height: 100%;
background-color: hsla(200,40%,30%,.4);
background-image:
url('#APP_IMAGES#tumblr_p7n8kqHMuD1uy4lhuo1_540.png'),
url('#APP_IMAGES#tumblr_p7n908E1Jb1uy4lhuo1_1280.png'),
url('#APP_IMAGES#tumblr_p7n8kqHMuD1uy4lhuo2_1280.png'),
url('#APP_IMAGES#tumblr_p7n8on19cV1uy4lhuo1_1280.png'),
url('#APP_IMAGES#tumblr_p7n8kqHMuD1uy4lhuo3_1280.png');
background-repeat: repeat-x;
background-position:
0 20%,
0 100%,
0 50%,
0 100%,
0 0;
background-size:
2500px,
800px,
500px 200px,
1000px,
400px 260px;
animation: 50s para infinite linear;
}
@keyframes para {
100% {
background-position:
-5000px 20%,
-800px 95%,
500px 50%,
1000px 100%,
400px 0;
}
}
.t-Login-region {
background-color: rgb(255 255 255 / 90%);
border-width: var(--ut-login-region-border-width, var(--ut-component-border-width, 0px));
border-style: none;
backdrop-filter: drop-shadow(2px 4px 6px black);
box-shadow: none;
}
video login
-----------------------
video{
position:fixed;
min-width:100%;
max-width:100%
width:auto;
height:auto;
z-index:-100;
}
.t-Login-region,.t-Login-logo {
background-color: transparent;
}
.t-Login-title {
color: #15f4ff;
}
No comments:
Post a Comment