From eefc6ca2bf07c5f0ba715f481bf3f4de31b4e475 Mon Sep 17 00:00:00 2001 From: Orest Bida Date: Sat, 14 Jan 2023 05:09:49 +0100 Subject: [PATCH] Fix a potential flash of style and improve css variables --- dist/iframemanager.css | 2 +- src/iframemanager.css | 161 ++++++++++++++++++++++------------------- 2 files changed, 89 insertions(+), 74 deletions(-) diff --git a/dist/iframemanager.css b/dist/iframemanager.css index 2d59ccd..bebbf01 100644 --- a/dist/iframemanager.css +++ b/dist/iframemanager.css @@ -1 +1 @@ -:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-hover-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);transition:opacity .3s ease,visibility .3s ease,transform .3s ease;visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;width:100%;z-index:2}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease,transform .3s ease;z-index:1}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease,transform .5s ease}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service].c-h-n .cll .c-nt{opacity:0;visibility:hidden}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative;transition:background-color .3s ease,opacity .3s ease;z-index:1}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;transition:opacity .3s ease,transform .3s ease,visibility .3s ease}div[data-service] .cll .c-n-c .c-l-b,div[data-service] .cll .c-n-c .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative;transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div[data-service] .cll .c-n-c .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-n-c .c-la-b{background:rgba(225,239,255,.8);color:#0d1f34;padding:1em}div[data-service] .cll .c-n-c .c-la-b:hover{background:rgba(225,239,255,.95)}div[data-service] .cll .c-n-c .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-n-c .c-la-b:active{background:rgba(225,239,255,.6);transition:none}div[data-service] .cll .c-n-c .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;transition:opacity .5s ease;visibility:hidden;width:100%;z-index:2}div[data-service].c-h-b .cll iframe{opacity:1;transform:scale(1);transition-delay:.1s;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none;transition:color .2s ease,border-color .2s ease}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-customwidget]:before{display:none}div[data-customwidget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-customwidget] .cll+*,div[data-customwidget] .cll>:last-child{margin:0!important}div[data-customwidget]{min-width:296px;transition:background-color .3s ease;transition-delay:.3s;vertical-align:top}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}@keyframes example{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:example .2s forwards;animation-delay:.5s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service][data-index] [data-placeholder]{animation:none}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible;z-index:1} \ No newline at end of file +:root{--im-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--im-color:#fff;--im-bg:#0b1016;--im-link-color:#5fb3fb;--im-link-hover-color:rgba(95,178,251,.682);--im-btn-color:#fff;--im-btn-bg:rgba(0,102,219,.84);--im-btn-hover-bg:rgba(9,80,161,.89);--im-btn-active-box-shadow:0 0 0 4px rgba(24,104,250,.24);--im-btn-s-color:var(--im-bg);--im-btn-s-bg:rgba(225,239,255,.8);--im-btn-s-hover-bg:rgba(225,239,255,.95);--im-btn-s-active-bg:rgba(225,239,255,.6);--im-overlay-bg:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118))}div[data-service],div[data-service] .cll,div[data-service] .cll :after,div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll div,div[data-service] .cll iframe,div[data-service] .cll span,div[data-service]:before{all:unset;box-sizing:border-box}div[data-service] .cll a,div[data-service] .cll button,div[data-service] .cll input{-webkit-appearance:none;appearance:none;cursor:pointer;display:revert;font-family:inherit;font-size:100%;line-height:normal;margin:0;outline:revert;outline-offset:2px;overflow:hidden}div[data-service]{background-color:#0b1016;background-color:var(--im-bg);display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-family:var(--im-font-family);font-size:16px;font-weight:400;max-width:100%;min-height:150px;min-width:300px;overflow:hidden;position:relative}div[data-service]:before{content:"";display:block;padding-top:56.25%}div[data-service] .cll .c-ld{bottom:2em;opacity:0;right:2.5em;transform:translateY(10px);visibility:hidden}div[data-service] .cll .c-ld,div[data-service] .cll .c-ld:after{border-radius:100%;height:20px;position:absolute;width:20px;z-index:1}div[data-service] .cll .c-ld:after{animation:spin 1s linear infinite;border:4px solid #fff;border-top-color:transparent;content:""}div[data-service].c-h-n .cll .c-ld{opacity:1;transform:translateY(0);visibility:visible}div[data-service].c-h-b .cll .c-ld{opacity:0;transform:translateY(0);visibility:hidden}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}div[data-autoscale]{height:auto;width:100%}div[data-service] .cll .c-nt{bottom:0;color:#fff;color:var(--im-color);height:100%;left:0;max-width:100%;position:absolute;right:0;top:0;width:100%}div[data-service] .cll .c-bg{bottom:0;left:0;opacity:.5;position:absolute;right:0;top:0}div[data-service] .cll .c-bg:before{background:linear-gradient(14deg,#1e3861,rgba(206,220,233,.118));background:var(--im-overlay-bg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:1}div[data-service] .cll .c-bg-i{background-position:50%;background-repeat:no-repeat;background-size:cover;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}div[data-service] .cll .c-bg-i.loaded{opacity:1}div[data-service] .cll .c-tl{display:block;font-size:1.2em;font-weight:600;margin-bottom:10px;text-align:center}div[data-service].c-h-n .cll .c-bg{opacity:1;transform:scale(1)}div[data-service] .cll .c-n-c{align-items:center;display:flex;font-size:.9em;height:100%;justify-content:center;position:relative}div[data-service] .cll .c-n-t{display:block;font-size:.95em;line-height:1.4em;margin:0 auto;max-width:420px;position:relative;z-index:1}div[data-service] .cll .c-n-t+div{margin-top:20px}div[data-service] .cll .c-n-a,div[data-service] .cll .c-n-t{align-items:center;display:flex;gap:12px;justify-content:center;text-align:center}div[data-service] .cll .c-t-cn{padding:0 12px;z-index:1}div[data-service] .cll .c-l-b,div[data-service] .cll .c-la-b{align-items:center;background:rgba(0,102,219,.84);background:var(--im-btn-bg);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.19);color:#fff;color:var(--im-btn-color);display:flex;font-size:.85em;font-weight:600;gap:8px;justify-content:space-evenly;padding:1em;position:relative}div[data-service] .cll .c-l-b:before{background-position:50%;background-repeat:no-repeat;background-size:contain;border-bottom:7.5px solid transparent;border-left:12px solid #fff;border-left:12px solid var(--im-btn-color);border-top:7.5px solid transparent;content:"";display:block}div[data-service] .cll .c-la-b{background:rgba(225,239,255,.8);background:var(--im-btn-s-bg);color:#0b1016;color:var(--im-btn-s-color);padding:1em}div[data-service] .cll .c-la-b:hover{background:rgba(225,239,255,.95);background:var(--im-btn-s-hover-bg)}div[data-service] .cll .c-l-b:hover{background:rgba(9,80,161,.89);background:var(--im-btn-hover-bg)}div[data-service] .cll .c-la-b:active{background:rgba(225,239,255,.6);background:var(--im-btn-s-active-bg);transition:none!important}div[data-service] .cll .c-l-b:active{box-shadow:0 0 0 4px rgba(24,104,250,.24);box-shadow:var(--im-btn-active-box-shadow);transition:none!important}div[data-service].c-h-n .cll .c-t-cn{opacity:0;transform:translateY(-10px);visibility:hidden}div[data-service] .cll iframe{background:#fff;border:none;bottom:0;display:block;height:100%;left:0;max-width:100%;opacity:0;position:absolute;right:0;top:0;visibility:hidden;width:100%;z-index:1}div[data-service].c-h-b .cll iframe{display:block!important;height:100%!important;opacity:1;visibility:visible}div[data-service] .cll .c-n-t a{border-bottom:1px solid #5fb3fb;border-bottom:1px solid var(--im-link-color);color:#5fb3fb;color:var(--im-link-color);text-decoration:none}div[data-service] .cll .c-n-t a:hover{--im-link-color:var(--im-link-hover-color)}div[data-service][data-ratio="1:1"]:before{padding-top:100%}div[data-service][data-ratio="2:1"]:before{padding-top:50%}div[data-service][data-ratio="3:2"]:before{padding-top:66.666666%}div[data-service][data-ratio="5:2"]:before{padding-top:40%}div[data-service][data-ratio="4:3"]:before{padding-top:75%}div[data-service][data-ratio="16:9"]:before{padding-top:56.25%}div[data-service][data-ratio="16:10"]:before{padding-top:62.5%}div[data-service][data-ratio="20:9"]:before{padding-top:45%}div[data-service][data-ratio="21:9"]:before{padding-top:42.857142%}div[data-service][data-ratio="9:16"]:before{padding-top:177.777777%}div[data-service][data-ratio="9:20"]:before{padding-top:222.222222%}div[data-widget]{min-width:296px;vertical-align:top}div[data-widget]:before{display:none}div[data-widget].c-h-b .cll .c-ld{opacity:0;visibility:hidden}div[data-widget] .cll+*,div[data-widget] .cll>:last-child{height:100%!important;margin:0!important}div[data-service] [data-placeholder]{bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;visibility:hidden}@keyframes fadeIn{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}div.c-an [data-placeholder]{animation:none}div[data-service] [data-placeholder][data-visible]{align-items:center;animation:fadeIn .2s forwards;animation-delay:.4s;color:#fff;color:var(--im-color);display:flex;justify-content:center}div[data-service].c-h-b [data-placeholder]{opacity:1;visibility:visible}div.c-an .cll .c-bg,div.c-an .cll .c-bg:before,div.c-an .cll .c-ld,div.c-an .cll .c-n-t,div.c-an .cll .c-t-cn{transition:opacity .3s ease,visibility .3s ease,transform .3s ease}div.c-an .cll .c-bg-i{transition:opacity .5s ease,transform .5s ease}div.c-an[data-widget]{transition:opacity .3s ease,background-color .3s ease}div.c-an .cll .c-l-b,div.c-an .cll .c-la-b{transition:opacity .3s ease,transform .3s cubic-bezier(.25,1,.5,1),visibility .3s ease,box-shadow .3s ease,background-color .3s ease}div.c-an .cll .c-n-t a{transition:color .2s ease,border-color .2s ease}div.c-an .cll iframe,div.c-an [data-placeholder]{transition:opacity .3s ease,visibility .3s ease;transition-delay:.1s} \ No newline at end of file diff --git a/src/iframemanager.css b/src/iframemanager.css index 73a45b4..1a26603 100644 --- a/src/iframemanager.css +++ b/src/iframemanager.css @@ -8,11 +8,15 @@ --im-link-hover-color: rgba(95, 178, 251, 0.682); --im-btn-color: #fff; - --im-btn-hover-color: #fff; --im-btn-bg: rgba(0, 102, 219, 0.84); --im-btn-hover-bg: rgba(9, 80, 161, 0.89); --im-btn-active-box-shadow: 0 0 0 4px rgba(24, 104, 250, 0.24); + --im-btn-s-color: var(--im-bg); + --im-btn-s-bg: rgba(225, 239, 255, .8); + --im-btn-s-hover-bg: rgba(225, 239, 255, .95); + --im-btn-s-active-bg: rgba(225, 239, 255, .6); + --im-overlay-bg: linear-gradient(14deg, rgba(30,56,97,1) 0%, rgba(206,220,233,0.118) 100%) } @@ -71,9 +75,6 @@ div[data-service] .cll .c-ld { opacity: 0; visibility: hidden; transform: translateY(10px); - transition: opacity .3s ease, - visibility .3s ease, - transform .3s ease; } div[data-service] .cll .c-ld, @@ -98,6 +99,12 @@ div[data-service].c-h-n .cll .c-ld{ transform: translateY(0); } +div[data-service].c-h-b .cll .c-ld{ + opacity: 0; + visibility: hidden; + transform: translateY(0); +} + @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } @@ -113,14 +120,11 @@ div[data-service] .cll .c-nt{ max-width: 100%; height: 100%; width: 100%; - transition: opacity .3s ease, - visibility .3s ease; position: absolute; top: 0; left: 0; bottom: 0; right: 0; - z-index: 2; } div[data-service] .cll .c-bg{ @@ -130,10 +134,6 @@ div[data-service] .cll .c-bg{ bottom: 0; left: 0; opacity: .5; - z-index: 1; - transition: opacity .3s ease, - visibility .3s ease, - transform .3s ease; } div[data-service] .cll .c-bg::before{ @@ -145,8 +145,6 @@ div[data-service] .cll .c-bg::before{ bottom: 0; z-index: 1; background: var(--im-overlay-bg); - transition: opacity .3s ease, - visibility .3s ease; } div[data-service] .cll .c-bg-i{ @@ -159,8 +157,6 @@ div[data-service] .cll .c-bg-i{ right: 0; bottom: 0; opacity: 0; - transition: opacity .5s ease, - transform .5s ease; } div[data-service] .cll .c-bg-i.loaded{ @@ -180,21 +176,13 @@ div[data-service].c-h-n .cll .c-bg{ transform: scale(1); } -div[data-service].c-h-n .cll .c-nt{ - opacity: 0; - visibility: hidden; -} - div[data-service] .cll .c-n-c{ display: flex; justify-content: center; align-items: center; height: 100%; position: relative; - z-index: 1; font-size: .9em; - transition: background-color .3s ease, - opacity .3s ease; } div[data-service] .cll .c-n-t{ @@ -222,13 +210,11 @@ div[data-service] .cll .c-n-a{ div[data-service] .cll .c-t-cn{ padding: 0 12px; - transition: opacity .3s ease, - transform .3s ease, - visibility .3s ease; + z-index: 1; } -div[data-service] .cll .c-n-c .c-la-b, -div[data-service] .cll .c-n-c .c-l-b{ +div[data-service] .cll .c-la-b, +div[data-service] .cll .c-l-b{ display: flex; justify-content: space-evenly; align-items: center; @@ -241,15 +227,10 @@ div[data-service] .cll .c-n-c .c-l-b{ color: var(--im-btn-color); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.19) 0px 4px 12px; - transition: opacity .3s ease, - transform .3s cubic-bezier(0.25, 1, 0.5, 1), - visibility .3s ease, - box-shadow .3s ease, - background-color .3s ease; } /* Play icon */ -div[data-service] .cll .c-n-c .c-l-b::before{ +div[data-service] .cll .c-l-b::before{ content: ''; display: block; border-left: 12px solid var(--im-btn-color); @@ -260,27 +241,27 @@ div[data-service] .cll .c-n-c .c-l-b::before{ background-size: contain; } -div[data-service] .cll .c-n-c .c-la-b{ +div[data-service] .cll .c-la-b{ padding: 1em; - background: rgba(225, 239, 255, .8); - color: #0d1f34; + background: var(--im-btn-s-bg); + color: var(--im-btn-s-color); } -div[data-service] .cll .c-n-c .c-la-b:hover{ - background: rgba(225, 239, 255, .95); +div[data-service] .cll .c-la-b:hover{ + background: var(--im-btn-s-hover-bg); } -div[data-service] .cll .c-n-c .c-l-b:hover{ +div[data-service] .cll .c-l-b:hover{ background: var(--im-btn-hover-bg); } -div[data-service] .cll .c-n-c .c-la-b:active{ - transition: none; - background: rgba(225, 239, 255, .6); +div[data-service] .cll .c-la-b:active{ + transition: none!important; + background: var(--im-btn-s-active-bg); } -div[data-service] .cll .c-n-c .c-l-b:active{ - transition: none; +div[data-service] .cll .c-l-b:active{ + transition: none!important; box-shadow: var(--im-btn-active-box-shadow); } @@ -304,23 +285,20 @@ div[data-service] .cll iframe{ display: block; visibility: hidden; opacity: 0; - z-index: 2; - transition: opacity .5s ease; + z-index: 1; } div[data-service].c-h-b .cll iframe{ opacity: 1; visibility: visible; - transform: scale(1); - transition-delay: .1s; + display: block!important; + height: 100%!important; } div[data-service] .cll .c-n-t a { color: var(--im-link-color); text-decoration: none; border-bottom: 1px solid var(--im-link-color); - transition: color .2s ease, - border-color .2s ease; } div[data-service] .cll .c-n-t a:hover{ @@ -372,25 +350,24 @@ div[data-service][data-ratio="9:20"]::before{ padding-top: 222.222222%; } -div[data-customwidget]::before { +div[data-widget]{ + vertical-align: top; + min-width: 296px; +} + +div[data-widget]::before { display: none; } -div[data-customwidget].c-h-b .cll .c-ld{ +div[data-widget].c-h-b .cll .c-ld{ opacity: 0; visibility: hidden; } -div[data-customwidget] .cll + *, -div[data-customwidget] .cll > *:last-child{ +div[data-widget] .cll + *, +div[data-widget] .cll > *:last-child{ margin: 0!important; -} - -div[data-customwidget]{ - vertical-align: top; - min-width: 296px; - transition: background-color .3s ease; - transition-delay: .3s; + height: 100%!important; } div[data-service] [data-placeholder] { @@ -401,11 +378,9 @@ div[data-service] [data-placeholder] { bottom: 0; opacity: 0; visibility: hidden; - transition: opacity .3s ease, - visibility .3s ease; } -@keyframes example { +@keyframes fadeIn { from { opacity: 0; visibility: hidden; @@ -414,23 +389,63 @@ div[data-service] [data-placeholder] { opacity: 1; visibility: visible; } - } +} + +div.c-an [data-placeholder]{ + animation: none; +} div[data-service] [data-placeholder][data-visible]{ display: flex; align-items: center; justify-content: center; color: var(--im-color); - animation: example .2s forwards; - animation-delay: .5s; -} - -div[data-service][data-index] [data-placeholder]{ - animation: none; + animation: fadeIn .2s forwards; + animation-delay: .4s; } div[data-service].c-h-b [data-placeholder]{ opacity: 1; visibility: visible; - z-index: 1; +} + +div.c-an .cll .c-n-t, +div.c-an .cll .c-bg, +div.c-an .cll .c-bg::before, +div.c-an .cll .c-ld, +div.c-an .cll .c-t-cn{ + transition: opacity .3s ease, + visibility .3s ease, + transform .3s ease; +} + +div.c-an .cll .c-bg-i{ + transition: opacity .5s ease, + transform .5s ease; +} + +div.c-an[data-widget]{ + transition: opacity .3s ease, + background-color .3s ease; +} + +div.c-an .cll .c-la-b, +div.c-an .cll .c-l-b{ + transition: opacity .3s ease, + transform .3s cubic-bezier(0.25, 1, 0.5, 1), + visibility .3s ease, + box-shadow .3s ease, + background-color .3s ease; +} + +div.c-an .cll .c-n-t a{ + transition: color .2s ease, + border-color .2s ease +} + +div.c-an .cll iframe, +div.c-an [data-placeholder]{ + transition: opacity .3s ease, + visibility .3s ease; + transition-delay: .1s; } \ No newline at end of file