.ui.popup { display: none; position: absolute; top: 0; right: 0; z-index: 900; border: 1px solid rgba(0,0,0,.1); max-width: 250px; background-color: #FFF; padding: .8em 1.2em; font-size: .875rem; font-weight: 400; font-style: normal; color: rgba(0,0,0,.7); border-radius: .2em; box-shadow: 0 1px 2px rgba(0,0,0,.1); } .ui.popup .header { padding: 0 0 .5em; font-size: 1.125em; line-height: 1.2; font-weight: 700; } .ui.popup:before { position: absolute; content: ""; width: .75em; height: .75rem; background-image: none; background-color: #FFF; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; box-shadow: 1px 1px 1px rgba(0,0,0,.1); } .ui.popup .ui.button { width: 100%; } .ui.popup { margin: 0; } .ui.popup.bottom { margin: .75em 0 0; } .ui.popup.top { margin: 0 0 .75em; } .ui.popup.left.center { margin: 0 .75em 0 0; } .ui.popup.right.center { margin: 0 0 0 .75em; } .ui.popup.center { margin-left: -1.25em; } .ui.bottom.center.popup:before { margin-left: -.4em; top: -.4em; left: 50%; right: auto; bottom: auto; box-shadow: -1px -1px 1px rgba(0,0,0,.2); } .ui.bottom.left.popup { margin-right: -2em; } .ui.bottom.left.popup:before { top: -.4em; right: 1em; bottom: auto; left: auto; margin-left: 0; box-shadow: -1px -1px 1px rgba(0,0,0,.2); } .ui.bottom.right.popup { margin-left: -2em; } .ui.bottom.right.popup:before { top: -.4em; left: 1em; right: auto; bottom: auto; margin-left: 0; box-shadow: -1px -1px 1px rgba(0,0,0,.2); } .ui.top.center.popup:before { top: auto; right: auto; bottom: -.4em; left: 50%; margin-left: -.4em; } .ui.top.left.popup { margin-right: -2em; } .ui.top.left.popup:before { bottom: -.4em; right: 1em; top: auto; left: auto; margin-left: 0; } .ui.top.right.popup { margin-left: -2em; } .ui.top.right.popup:before { bottom: -.4em; left: 1em; top: auto; right: auto; margin-left: 0; } .ui.left.center.popup:before { top: 50%; right: -.35em; bottom: auto; left: auto; margin-top: -.4em; box-shadow: 1px -1px 1px rgba(0,0,0,.2); } .ui.right.center.popup:before { top: 50%; left: -.35em; bottom: auto; right: auto; margin-top: -.4em; box-shadow: -1px 1px 1px rgba(0,0,0,.2); } .ui.loading.popup { display: block; visibility: hidden; } .ui.active.popup { display: block; } .ui.small.popup { font-size: .75rem; } .ui.large.popup { font-size: 1rem; } .ui.inverted.popup { background-color: #333; border: 0; color: #FFF; box-shadow: none; } .ui.inverted.popup .header { background-color: rgba(0,0,0,.2); color: #FFF; } .ui.inverted.popup:before { background-color: #333; box-shadow: none; }