.ui.dimmable { position: relative; } .ui.dimmer { display: none; position: absolute; top: 0!important; left: 0!important; width: 0; height: 0; text-align: center; vertical-align: middle; background-color: rgba(0,0,0,.85); opacity: 0; line-height: 1; -webkit-animation-fill-mode: both; -ms-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .5s; -ms-animation-duration: .5s; animation-duration: .5s; -webkit-transition: background-color .5s linear; transition: background-color .5s linear; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; z-index: 1000; } .ui.dimmer>.content { width: 100%; height: 100%; display: table; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } .ui.dimmer>.content>div { display: table-cell; vertical-align: middle; color: #FFF; } .ui.segment>.ui.dimmer { border-radius: 5px; } .ui.horizontal.segment>.ui.dimmer, .ui.vertical.segment>.ui.dimmer { border-radius: 5px; } .ui.dimmed.dimmable:not(body) { overflow: hidden; } .ui.dimmed.dimmable>.ui.dimmer, .ui.active.dimmer { display: block; width: 100%; height: 100%; opacity: 1; } .ui.disabled.dimmer { width: 0!important; height: 0!important; } .ui.page.dimmer { position: fixed; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 2000px; -ms-perspective: 2000px; perspective: 2000px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; } .ui.scrolling.page.dimmer { position: absolute; } .ui.dimmer>.top.aligned.content>* { vertical-align: top; } .ui.dimmer>.bottom.aligned.content>* { vertical-align: bottom; } .ui.inverted.dimmer { background-color: rgba(255,255,255,.85); } .ui.inverted.dimmer>.content>* { color: rgba(0,0,0,.8); } .ui.simple.dimmer { display: block; overflow: hidden; opacity: 1; z-index: -100; background-color: rgba(0,0,0,0); } .ui.dimmed.dimmable>.ui.simple.dimmer { overflow: visible; opacity: 1; width: 100%; height: 100%; background-color: rgba(0,0,0,.85); z-index: 1; } .ui.simple.inverted.dimmer { background-color: rgba(255,255,255,0); } .ui.dimmed.dimmable>.ui.simple.inverted.dimmer { background-color: rgba(255,255,255,.85); }