CSS   18

ultibox css

Guest on 21st July 2022 01:31:19 PM

  1. html.ultibox-opened {
  2.   overflow: hidden; }
  3.  
  4. .dzsulb-main-con {
  5.   z-index: 5555;
  6.   position: fixed;
  7.   width: 100%;
  8.   height: 100%;
  9.   opacity: 0;
  10.   visibility: hidden;
  11.   top: 0;
  12.   left: 0;
  13.   transition-property: opacity, visibility;
  14.   transition-duration: 0.3s;
  15.   -moz-transition-property: opacity, visibility;
  16.   -moz-transition-duration: 0.3s;
  17.   -webkit-transition-property: opacity, visibility;
  18.   -webkit-transition-duration: 0.3s;
  19.   -o-transition-property: opacity, visibility;
  20.   -o-transition-duration: 0.3s;
  21.   -ms-transition-property: opacity, visibility;
  22.   -ms-transition-duration: 0.3s;
  23.   -ms-transition-timing-function: ease-out;
  24.   -webkit-transition-timing-function: ease-out;
  25.   -moz-transition-timing-function: ease-out;
  26.   -o-transition-timing-function: ease-out;
  27.   transition-timing-function: ease-out;
  28.   /* -- enabled from js */ }
  29.   .dzsulb-main-con .overlay-background {
  30.     background-color: rgba(50, 50, 50, 0.5);
  31.     position: absolute;
  32.     width: 100%;
  33.     height: 100%; }
  34.   .dzsulb-main-con .dzsulb-preloader {
  35.     opacity: 0;
  36.     visibility: hidden;
  37.     animation-delay: 3s;
  38.     transition-property: opacity, visibility;
  39.     transition-duration: 0.3s;
  40.     -moz-transition-property: opacity, visibility;
  41.     -moz-transition-duration: 0.3s;
  42.     -webkit-transition-property: opacity, visibility;
  43.     -webkit-transition-duration: 0.3s;
  44.     -o-transition-property: opacity, visibility;
  45.     -o-transition-duration: 0.3s;
  46.     -ms-transition-property: opacity, visibility;
  47.     -ms-transition-duration: 0.3s;
  48.     -ms-transition-timing-function: ease-out;
  49.     -webkit-transition-timing-function: ease-out;
  50.     -moz-transition-timing-function: ease-out;
  51.     -o-transition-timing-function: ease-out;
  52.     transition-timing-function: ease-out; }
  53.   .dzsulb-main-con .box-mains-con {
  54.     position: absolute;
  55.     width: 100%;
  56.     height: 100%;
  57.     top: 0;
  58.     left: 0;
  59.     pointer-events: none; }
  60.   .dzsulb-main-con .box-main {
  61.     pointer-events: auto;
  62.     max-width: 100%;
  63.     position: absolute;
  64.     top: 50%;
  65.     left: 50%;
  66.     transform: translate3d(-50%, -50%, 0); }
  67.     .dzsulb-main-con .box-main .close-btn-con {
  68.       position: absolute;
  69.       right: -15px;
  70.       top: -15px;
  71.       z-index: 5;
  72.       cursor: pointer;
  73.       width: 30px;
  74.       height: 30px; }
  75.       .dzsulb-main-con .box-main .close-btn-con:before {
  76.         content: "";
  77.         position: absolute;
  78.         top: 8%;
  79.         left: 8%;
  80.         width: 84%;
  81.         height: 84%;
  82.         background-color: rgba(200, 200, 200, 0.95);
  83.         border-radius: 50%; }
  84.       .dzsulb-main-con .box-main .close-btn-con svg {
  85.         position: absolute;
  86.         right: 0;
  87.         top: 0;
  88.         width: 100%;
  89.         height: 100%; }
  90.         .dzsulb-main-con .box-main .close-btn-con svg path {
  91.           fill: #444444; }
  92.   .dzsulb-main-con .box-main-media-con {
  93.     max-width: 100%; }
  94.     .dzsulb-main-con .box-main-media-con .box-main-media {
  95.       transition-property: width, height;
  96.       transition-duration: 0.3s;
  97.       -moz-transition-property: width, height;
  98.       -moz-transition-duration: 0.3s;
  99.       -webkit-transition-property: width, height;
  100.       -webkit-transition-duration: 0.3s;
  101.       -o-transition-property: width, height;
  102.       -o-transition-duration: 0.3s;
  103.       -ms-transition-property: width, height;
  104.       -ms-transition-duration: 0.3s;
  105.       -ms-transition-timing-function: ease-out;
  106.       -webkit-transition-timing-function: ease-out;
  107.       -moz-transition-timing-function: ease-out;
  108.       -o-transition-timing-function: ease-out;
  109.       transition-timing-function: ease-out; }
  110.       .dzsulb-main-con .box-main-media-con .box-main-media > .real-media {
  111.         width: 100%;
  112.         height: 100%; }
  113.   .dzsulb-main-con .box-main-under {
  114.     background-color: #ffffff;
  115.     padding: 10px 20px;
  116.     color: #222222; }
  117.     .dzsulb-main-con .box-main-under > h3:first-child {
  118.       margin-top: 0; }
  119.     .dzsulb-main-con .box-main-under:empty {
  120.       display: none; }
  121.   .dzsulb-main-con .box-main.scroll-mode {
  122.     top: 0;
  123.     transform: translate3d(-50%, 0, 0); }
  124.   .dzsulb-main-con.close-btn-inset .close-btn-con {
  125.     position: absolute;
  126.     right: 15px;
  127.     top: 15px; }
  128.  
  129. .dzsulb-main-con.transition-fade .transition-target {
  130.   opacity: 0;
  131.   visibility: hidden;
  132.   transition-property: opacity, visibility;
  133.   transition-duration: 0.3s;
  134.   -moz-transition-property: opacity, visibility;
  135.   -moz-transition-duration: 0.3s;
  136.   -webkit-transition-property: opacity, visibility;
  137.   -webkit-transition-duration: 0.3s;
  138.   -o-transition-property: opacity, visibility;
  139.   -o-transition-duration: 0.3s;
  140.   -ms-transition-property: opacity, visibility;
  141.   -ms-transition-duration: 0.3s;
  142.   -ms-transition-timing-function: ease-out;
  143.   -webkit-transition-timing-function: ease-out;
  144.   -moz-transition-timing-function: ease-out;
  145.   -o-transition-timing-function: ease-out;
  146.   transition-timing-function: ease-out; }
  147.  
  148. .dzsulb-main-con.transition-fade.loaded-item .transition-target {
  149.   opacity: 1;
  150.   visibility: visible; }
  151.  
  152. .dzsulb-main-con.transition-scaleup .transition-target {
  153.   opacity: 0;
  154.   visibility: hidden;
  155.   transform: scale(0);
  156.   transition-property: all;
  157.   transition-duration: 0.3s;
  158.   -moz-transition-property: all;
  159.   -moz-transition-duration: 0.3s;
  160.   -webkit-transition-property: all;
  161.   -webkit-transition-duration: 0.3s;
  162.   -o-transition-property: all;
  163.   -o-transition-duration: 0.3s;
  164.   -ms-transition-property: all;
  165.   -ms-transition-duration: 0.3s;
  166.   -ms-transition-timing-function: ease-out;
  167.   -webkit-transition-timing-function: ease-out;
  168.   -moz-transition-timing-function: ease-out;
  169.   -o-transition-timing-function: ease-out;
  170.   transition-timing-function: ease-out; }
  171.  
  172. .dzsulb-main-con.transition-scaleup.loaded-item .transition-target, .dzsulb-main-con.transition-scaledown.loaded-item .transition-target {
  173.   opacity: 1;
  174.   visibility: visible;
  175.   transform: scale(1); }
  176.  
  177. .dzsulb-main-con.transition-scaledown .transition-target {
  178.   opacity: 0;
  179.   visibility: hidden;
  180.   transform: scale(1.3);
  181.   transition-property: all;
  182.   transition-duration: 0.3s;
  183.   -moz-transition-property: all;
  184.   -moz-transition-duration: 0.3s;
  185.   -webkit-transition-property: all;
  186.   -webkit-transition-duration: 0.3s;
  187.   -o-transition-property: all;
  188.   -o-transition-duration: 0.3s;
  189.   -ms-transition-property: all;
  190.   -ms-transition-duration: 0.3s;
  191.   -ms-transition-timing-function: ease-out;
  192.   -webkit-transition-timing-function: ease-out;
  193.   -moz-transition-timing-function: ease-out;
  194.   -o-transition-timing-function: ease-out;
  195.   transition-timing-function: ease-out; }
  196.  
  197. .dzsulb-main-con.transition-slideup .transition-target {
  198.   opacity: 0;
  199.   visibility: hidden;
  200.   transform: translate3d(0, 50px, 0);
  201.   transition-property: all;
  202.   transition-duration: 0.3s;
  203.   -moz-transition-property: all;
  204.   -moz-transition-duration: 0.3s;
  205.   -webkit-transition-property: all;
  206.   -webkit-transition-duration: 0.3s;
  207.   -o-transition-property: all;
  208.   -o-transition-duration: 0.3s;
  209.   -ms-transition-property: all;
  210.   -ms-transition-duration: 0.3s;
  211.   -ms-transition-timing-function: ease-out;
  212.   -webkit-transition-timing-function: ease-out;
  213.   -moz-transition-timing-function: ease-out;
  214.   -o-transition-timing-function: ease-out;
  215.   transition-timing-function: ease-out; }
  216.  
  217. .dzsulb-main-con.transition-slideup.loaded-item .transition-target {
  218.   opacity: 1;
  219.   visibility: visible;
  220.   transform: translate3d(0, 0, 0); }
  221.  
  222. .ultibox-item {
  223.   cursor: pointer; }
  224.  
  225. .dzsulb-main-con.loading-item {
  226.   opacity: 1;
  227.   visibility: visible; }
  228.   .dzsulb-main-con.loading-item .dzsulb-preloader {
  229.     opacity: 1;
  230.     visibility: visible; }
  231.  
  232. .dzsulb-main-con.loaded-item {
  233.   opacity: 1;
  234.   visibility: visible; }
  235.   .dzsulb-main-con.loaded-item .dzsulb-preloader {
  236.     opacity: 0;
  237.     visibility: hidden; }
  238.  
  239. .feed-ultibox {
  240.   display: none; }
  241.  
  242. .dzsulb-main-con.skin-default .box-main:not(.with-description) .real-media {
  243.   border-radius: 5px; }
  244.  
  245. .preloader-fountain {
  246.   position: absolute;
  247.   width: 70px;
  248.   height: 14px;
  249.   margin: auto;
  250.   position: absolute;
  251.   top: 50%;
  252.   left: 50%;
  253.   transform: translate(-50%, -50%); }
  254.  
  255. .fountainG {
  256.   display: inline-block;
  257.   position: static;
  258.   background-color: black;
  259.   width: 14px;
  260.   height: 14px;
  261.   animation-name: bounce_fountainG;
  262.   -o-animation-name: bounce_fountainG;
  263.   -webkit-animation-name: bounce_fountainG;
  264.   animation-duration: 1.2s;
  265.   -webkit-animation-duration: 1.2s;
  266.   animation-iteration-count: infinite;
  267.   -o-animation-iteration-count: infinite;
  268.   -webkit-animation-iteration-count: infinite;
  269.   -moz-animation-iteration-count: infinite;
  270.   animation-direction: normal;
  271.   -o-animation-direction: normal;
  272.   -webkit-animation-direction: normal;
  273.   -moz-animation-direction: normal;
  274.   transform: scale(0.3);
  275.   -webkit-transform: scale(0.3);
  276.   border-radius: 9px; }
  277.  
  278. #fountainG_1 {
  279.   animation-delay: 0.6s;
  280.   -webkit-animation-delay: 0.6s; }
  281.  
  282. #fountainG_2 {
  283.   animation-delay: 0.75s;
  284.   -webkit-animation-delay: 0.75s; }
  285.  
  286. #fountainG_3 {
  287.   animation-delay: 0.9s;
  288.   -webkit-animation-delay: 0.9s; }
  289.  
  290. #fountainG_4 {
  291.   animation-delay: 1.05s;
  292.   -webkit-animation-delay: 1.05s; }
  293.  
  294. @keyframes bounce_fountainG {
  295.   0% {
  296.     transform: scale(1);
  297.     background-color: black; }
  298.   100% {
  299.     transform: scale(0.3);
  300.     background-color: #646464; } }
  301. @-webkit-keyframes bounce_fountainG {
  302.   0% {
  303.     -webkit-transform: scale(1);
  304.     background-color: black; }
  305.   100% {
  306.     -webkit-transform: scale(0.3);
  307.     background-color: #323232; } }

Raw Paste

Login or Register to edit or fork this paste. It's free.