@pageboard/html 0.14.19 → 0.14.21

package/ui/components/dimmer.css

@@ -0,0 +1,224 @@
+/*!
+ * # Semantic UI 2.4.0 - Dimmer
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Dimmer
+*******************************/
+
+.dimmable:not(body) {
+	position: relative;
+}
+.ui.dimmer {
+	display: none;
+	position: absolute;
+	top: 0em !important;
+	left: 0em !important;
+	width: 100%;
+	height: 100%;
+	text-align: center;
+	vertical-align: middle;
+	padding: 1em;
+	background-color: rgb(0 0 0 / 85%);
+	opacity: 0;
+	line-height: 1;
+	animation-fill-mode: both;
+	animation-duration: 0.5s;
+	transition: background-color 0.5s linear;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	user-select: none;
+	will-change: opacity;
+	z-index: 1000;
+}
+
+/* Dimmer Content */
+.ui.dimmer > .content {
+	user-select: text;
+	color: #FFFFFF;
+}
+
+/* Loose Coupling */
+.ui.segment > .ui.dimmer {
+	border-radius: inherit !important;
+}
+
+/* Scrollbars */
+.ui.dimmer:not(.inverted)::-webkit-scrollbar-track {
+	background: rgb(255 255 255 / 10%);
+}
+.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb {
+	background: rgb(255 255 255 / 25%);
+}
+.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive {
+	background: rgb(255 255 255 / 15%);
+}
+.ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
+	background: rgb(255 255 255 / 35%);
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/* Animating */
+.animating.dimmable:not(body),
+.dimmed.dimmable:not(body) {
+	overflow: hidden;
+}
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.dimmer,
+.dimmed.dimmable > .ui.visible.dimmer,
+.ui.active.dimmer {
+	display: flex;
+	opacity: 1;
+}
+
+/* Disabled */
+.ui.disabled.dimmer {
+	width: 0 !important;
+	height: 0 !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+    Legacy
+---------------*/
+
+
+/* Animating / Active / Visible */
+.dimmed.dimmable > .ui.animating.legacy.dimmer,
+.dimmed.dimmable > .ui.visible.legacy.dimmer,
+.ui.active.legacy.dimmer {
+	display: block;
+}
+
+/*--------------
+    Alignment
+---------------*/
+
+.ui[class*="top aligned"].dimmer {
+	justify-content: flex-start;
+}
+.ui[class*="bottom aligned"].dimmer {
+	justify-content: flex-end;
+}
+
+/*--------------
+      Page
+---------------*/
+
+.ui.page.dimmer {
+	position: fixed;
+	transform-style: '';
+	perspective: 2000px;
+	transform-origin: center center;
+}
+body.animating.in.dimmable,
+body.dimmed.dimmable {
+	overflow: hidden;
+}
+body.dimmable > .dimmer {
+	position: fixed;
+}
+
+/*--------------
+    Blurring
+---------------*/
+
+.blurring.dimmable > :not(.dimmer) {
+	filter: blur(0px) grayscale(0);
+	transition: 800ms filter ease;
+	transition: 800ms filter ease, 800ms filter ease;
+}
+.blurring.dimmed.dimmable > :not(.dimmer) {
+	filter: blur(5px) grayscale(0.7);
+}
+
+/* Dimmer Color */
+.blurring.dimmable > .dimmer {
+	background-color: rgb(0 0 0 / 60%);
+}
+.blurring.dimmable > .inverted.dimmer {
+	background-color: rgb(255 255 255 / 60%);
+}
+
+/*--------------
+    Aligned
+---------------*/
+
+.ui.dimmer > .top.aligned.content > * {
+	vertical-align: top;
+}
+.ui.dimmer > .bottom.aligned.content > * {
+	vertical-align: bottom;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.inverted.dimmer {
+	background-color: rgb(255 255 255 / 85%);
+}
+.ui.inverted.dimmer > .content > * {
+	color: #FFFFFF;
+}
+
+/*--------------
+     Simple
+---------------*/
+
+
+/* Displays without javascript */
+.ui.simple.dimmer {
+	display: block;
+	overflow: hidden;
+	opacity: 1;
+	width: 0%;
+	height: 0%;
+	z-index: -100;
+	background-color: rgb(0 0 0 / 0%);
+}
+.dimmed.dimmable > .ui.simple.dimmer {
+	overflow: visible;
+	opacity: 1;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0 0 0 / 85%);
+	z-index: 1;
+}
+.ui.simple.inverted.dimmer {
+	background-color: rgb(255 255 255 / 0%);
+}
+.dimmed.dimmable > .ui.simple.inverted.dimmer {
+	background-color: rgb(255 255 255 / 85%);
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+        User Overrides
+*******************************/
+