@northdata/fomantic-ui 2.8.722 → 2.9.400

package/lib/semantic-ui/dist/components/dimmer.css

@@ -1,10 +1,10 @@
 /*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
+ * # Fomantic-UI 2.9.4 - Dimmer
+ * https://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
- * http://opensource.org/licenses/MIT
+ * https://opensource.org/licenses/MIT
  *
  */
 
@@ -19,8 +19,8 @@
 .ui.dimmer {
   display: none;
   position: absolute;
-  top: 0 !important;
-  left: 0 !important;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   text-align: center;
@@ -29,24 +29,13 @@
   background: rgba(0, 0, 0, 0.85);
   opacity: 0;
   line-height: 1;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-duration: 0.5s;
-          animation-duration: 0.5s;
-  -webkit-transition: background-color 0.5s linear;
-  transition: background-color 0.5s linear;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  animation-fill-mode: both;
+  animation-duration: 0.5s;
+  transition: all 0.5s linear;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   -webkit-user-select: none;
-     -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
   will-change: opacity;
@@ -56,10 +45,9 @@
 /* Dimmer Content */
 .ui.dimmer > .content {
   -webkit-user-select: text;
-     -moz-user-select: text;
       -ms-user-select: text;
           user-select: text;
-  color: #FFFFFF;
+  color: #fff;
 }
 
 /* Loose Coupling */
@@ -80,6 +68,13 @@
 .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
 }
+@supports (-moz-appearance: none) {
+  .ui.dimmer:not(.inverted) {
+    
+/* firefox: first color thumb, second track */
+    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
+  }
+}
 
 
 /*******************************
@@ -97,8 +92,6 @@
 .dimmed.dimmable > .ui.animating.dimmer,
 .dimmed.dimmable > .ui.visible.dimmer,
 .ui.active.dimmer {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   opacity: 1;
 }
@@ -109,10 +102,9 @@
 *******************************/
 
 
-/*--------------
-      Legacy
-  ---------------*/
-
+/* --------------
+        Legacy
+    --------------- */
 
 /* Animating / Active / Visible */
 .dimmed.dimmable > .ui.animating.legacy.dimmer,
@@ -121,33 +113,24 @@
   display: block;
 }
 
-/*--------------
-      Alignment
-  ---------------*/
-
+/* --------------
+        Alignment
+    --------------- */
 .ui[class*="top aligned"].dimmer {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 .ui[class*="bottom aligned"].dimmer {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
-/*--------------
-        Page
-  ---------------*/
-
+/* --------------
+          Page
+    --------------- */
 .ui.page.dimmer {
   position: fixed;
-  -webkit-transform-style: '';
-          transform-style: '';
-  -webkit-perspective: 2000px;
-          perspective: 2000px;
-  -webkit-transform-origin: center center;
-          transform-origin: center center;
+  transform-style: "";
+  perspective: 2000px;
+  transform-origin: center center;
 }
 .ui.page.dimmer.modals {
   -moz-perspective: none;
@@ -160,35 +143,32 @@ body.dimmable > .dimmer {
   position: fixed;
 }
 
-/*--------------
-      Blurring
-  ---------------*/
-
-.blurring.dimmable > :not(.dimmer) {
-  -webkit-filter: initial;
-          filter: initial;
-  -webkit-transition: 800ms -webkit-filter ease;
-  transition: 800ms -webkit-filter ease;
-  transition: 800ms filter ease;
-  transition: 800ms filter ease, 800ms -webkit-filter ease;
-}
-.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
-  -webkit-filter: blur(5px) grayscale(0.7);
-          filter: blur(5px) grayscale(0.7);
+/* --------------
+        Blurring
+    --------------- */
+@supports (not (-webkit-backdrop-filter: none)) and (not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))) {
+  .blurring.dimmable > :not(.dimmer) {
+    filter: initial;
+    transition: 800ms filter ease;
+  }
+  .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+    filter: blur(5px) grayscale(0.7);
+  }
 }
 
 /* Dimmer Color */
 .blurring.dimmable > .dimmer {
   background: rgba(0, 0, 0, 0.6);
+  -webkit-backdrop-filter: blur(5px) grayscale(0.7);
+  backdrop-filter: blur(5px) grayscale(0.7);
 }
 .blurring.dimmable > .inverted.dimmer {
   background: rgba(255, 255, 255, 0.6);
 }
 
-/*--------------
-      Aligned
-  ---------------*/
-
+/* --------------
+        Aligned
+    --------------- */
 .ui.dimmer > .top.aligned.content > * {
   vertical-align: top;
 }
@@ -196,50 +176,46 @@ body.dimmable > .dimmer {
   vertical-align: bottom;
 }
 
-/*--------------
-      Shades
-  ---------------*/
-
+/* --------------
+        Shades
+    --------------- */
 .medium.medium.medium.medium.medium.dimmer {
   background: rgba(0, 0, 0, 0.65);
 }
 .light.light.light.light.light.dimmer {
   background: rgba(0, 0, 0, 0.45);
 }
-.very.light.light.light.light.dimmer {
+.very.very.very.very.light.dimmer {
   background: rgba(0, 0, 0, 0.25);
 }
 
-/*--------------
-      Inverted
-  ---------------*/
-
+/* --------------
+        Inverted
+    --------------- */
 .ui.inverted.dimmer {
   background: rgba(255, 255, 255, 0.85);
 }
 .ui.inverted.dimmer > .content,
 .ui.inverted.dimmer > .content > * {
-  color: #000000;
+  color: #000;
 }
 
-/*--------------
-     Inverted Shades
-    ---------------*/
-
+/* --------------
+         Inverted Shades
+        --------------- */
 .medium.medium.medium.medium.medium.inverted.dimmer {
   background: rgba(255, 255, 255, 0.65);
 }
 .light.light.light.light.light.inverted.dimmer {
   background: rgba(255, 255, 255, 0.45);
 }
-.very.light.light.light.light.inverted.dimmer {
+.very.very.very.very.light.inverted.dimmer {
   background: rgba(255, 255, 255, 0.25);
 }
 
-/*--------------
-       Simple
-  ---------------*/
-
+/* --------------
+         Simple
+    --------------- */
 
 /* Displays without javascript */
 .ui.simple.dimmer {
@@ -266,23 +242,21 @@ body.dimmable > .dimmer {
   background: rgba(255, 255, 255, 0.85);
 }
 
-/*--------------
-       Partially
-  ----------------*/
-
+/* --------------
+         Partially
+    ---------------- */
 .ui[class*="top dimmer"],
 .ui[class*="center dimmer"],
 .ui[class*="bottom dimmer"] {
   height: auto;
 }
 .ui[class*="bottom dimmer"] {
-  top: auto !important;
+  top: auto;
   bottom: 0;
 }
 .ui[class*="center dimmer"] {
-  top: 50% !important;
+  top: 50%;
   transform: translateY(-50%);
-  -webkit-transform: translateY(calc(-50% - 0.5px));
 }
 .ui.segment > .ui.ui[class*="top dimmer"] {
   border-bottom-left-radius: 0;
@@ -296,137 +270,58 @@ body.dimmable > .dimmer {
   border-top-right-radius: 0;
 }
 .ui[class*="center dimmer"].transition[class*="fade up"].in {
-  -webkit-animation-name: fadeInUpCenter;
-          animation-name: fadeInUpCenter;
+  animation-name: fadeInUpCenter;
 }
 .ui[class*="center dimmer"].transition[class*="fade down"].in {
-  -webkit-animation-name: fadeInDownCenter;
-          animation-name: fadeInDownCenter;
+  animation-name: fadeInDownCenter;
 }
 .ui[class*="center dimmer"].transition[class*="fade up"].out {
-  -webkit-animation-name: fadeOutUpCenter;
-          animation-name: fadeOutUpCenter;
+  animation-name: fadeOutUpCenter;
 }
 .ui[class*="center dimmer"].transition[class*="fade down"].out {
-  -webkit-animation-name: fadeOutDownCenter;
-          animation-name: fadeOutDownCenter;
+  animation-name: fadeOutDownCenter;
 }
 .ui[class*="center dimmer"].bounce.transition {
-  -webkit-animation-name: bounceCenter;
-          animation-name: bounceCenter;
-}
-@-webkit-keyframes fadeInUpCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-40%);
-    -webkit-transform: translateY(calc(-40% - 0.5px));
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
+  animation-name: bounceCenter;
 }
 @keyframes fadeInUpCenter {
   0% {
     opacity: 0;
     transform: translateY(-40%);
-    -webkit-transform: translateY(calc(-40% - 0.5px));
   }
   100% {
     opacity: 1;
     transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-@-webkit-keyframes fadeInDownCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-60%);
-    -webkit-transform: translateY(calc(-60% - 0.5px));
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
   }
 }
 @keyframes fadeInDownCenter {
   0% {
     opacity: 0;
     transform: translateY(-60%);
-    -webkit-transform: translateY(calc(-60% - 0.5px));
   }
   100% {
     opacity: 1;
     transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-@-webkit-keyframes fadeOutUpCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-45%);
-    -webkit-transform: translateY(calc(-45% - 0.5px));
   }
 }
 @keyframes fadeOutUpCenter {
   0% {
     opacity: 1;
     transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
   }
   100% {
     opacity: 0;
     transform: translateY(-45%);
-    -webkit-transform: translateY(calc(-45% - 0.5px));
-  }
-}
-@-webkit-keyframes fadeOutDownCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-55%);
-    -webkit-transform: translateY(calc(-55% - 0.5px));
   }
 }
 @keyframes fadeOutDownCenter {
   0% {
     opacity: 1;
     transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
   }
   100% {
     opacity: 0;
     transform: translateY(-55%);
-    -webkit-transform: translateY(calc(-55% - 0.5px));
-  }
-}
-@-webkit-keyframes bounceCenter {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-  40% {
-    -webkit-transform: translateY(calc(-50% - 30px));
-            transform: translateY(calc(-50% - 30px));
-  }
-  60% {
-    -webkit-transform: translateY(calc(-50% - 15px));
-            transform: translateY(calc(-50% - 15px));
   }
 }
 @keyframes bounceCenter {
@@ -436,15 +331,12 @@ body.dimmable > .dimmer {
   80%,
   100% {
     transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
   }
   40% {
-    -webkit-transform: translateY(calc(-50% - 30px));
-            transform: translateY(calc(-50% - 30px));
+    transform: translateY(calc(-50% - 30px));
   }
   60% {
-    -webkit-transform: translateY(calc(-50% - 15px));
-            transform: translateY(calc(-50% - 15px));
+    transform: translateY(calc(-50% - 15px));
   }
 }