|
|
/*! * # Semantic UI 2.0.0 - Modal * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2014 Contributors * Released under the MIT license * http://opensource.org/licenses/MIT * */
/******************************* Modal*******************************/
.ui.modal { display: none; position: fixed; z-index: 1001; top: 50%; left: 50%; text-align: left; width: 90%; margin-left: -45%; background: #ffffff; border: none; box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3); border-radius: 0.2857rem; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; will-change: top, left, margin, transform, opacity;}.ui.modal > :first-child:not(.icon),.ui.modal > .icon:first-child + * { border-top-left-radius: 0.2857rem; border-top-right-radius: 0.2857rem;}.ui.modal > :last-child { border-bottom-left-radius: 0.2857rem; border-bottom-right-radius: 0.2857rem;}
/******************************* Content*******************************/
/*-------------- Close---------------*/
.ui.modal > .close { cursor: pointer; position: absolute; top: -2.5rem; right: -2.5rem; z-index: 1; opacity: 0.8; font-size: 1.25em; color: #ffffff; width: 2.25rem; height: 2.25rem; padding: 0.625rem 0rem 0rem 0rem;}.ui.modal > .close:hover { opacity: 1;}
/*-------------- Header---------------*/
.ui.modal > .header { display: block; font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif; background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.05)) #ffffff; margin: 0em; padding: 1.2rem 2rem; box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); font-size: 1.6em; line-height: 1.3em; font-weight: bold; color: rgba(0, 0, 0, 0.85); border-bottom: 1px solid rgba(34, 36, 38, 0.15);}
/*-------------- Content---------------*/
.ui.modal > .content { display: table; table-layout: fixed; width: 100%; font-size: 1em; line-height: 1.4; padding: 2rem; background: #ffffff;}
/* Image */.ui.modal > .content > .image { display: table-cell; width: ''; vertical-align: top;}.ui.modal > .content > .image[class*="top aligned"] { vertical-align: top;}.ui.modal > .content > .image[class*="middle aligned"] { vertical-align: middle;}
/* Description */.ui.modal > .content > .description { display: table-cell; vertical-align: top;}.ui.modal > .content > .icon + .description,.ui.modal > .content > .image + .description { min-width: ''; width: 80%; padding-left: 2em;}/*rtl:ignore*/.ui.modal > .content > .image > i.icon { font-size: 8rem; margin: 0em; opacity: 1; width: auto;}
/*-------------- Actions---------------*/
.ui.modal .actions { background: #efefef; padding: 1rem 2rem; border-top: 1px solid rgba(34, 36, 38, 0.15); text-align: right;}.ui.modal .actions > .button { margin-left: 0.75em;}
/*------------------- Responsive--------------------*/
/* Modal Width */@media only screen and (max-width: 767px) { .ui.modal { width: 95%; margin: 0em 0em 0em -47.5%; }}@media only screen and (min-width: 768px) { .ui.modal { width: 88%; margin: 0em 0em 0em -44%; }}@media only screen and (min-width: 992px) { .ui.modal { width: 74%; margin: 0em 0em 0em -37%; }}@media only screen and (min-width: 1400px) { .ui.modal { width: 56%; margin: 0em 0em 0em -28%; }}@media only screen and (min-width: 1920px) { .ui.modal { width: 42%; margin: 0em 0em 0em -21%; }}
/* Tablet and Mobile */@media only screen and (max-width: 992px) { .ui.modal > .header { padding-right: 2.25rem; } .ui.modal > .close { top: 1.0035rem; right: 1rem; color: rgba(0, 0, 0, 0.8); }}
/* Mobile */@media only screen and (max-width: 767px) { .ui.modal > .header { padding: 0.75rem 1rem !important; padding-right: 2.25rem !important; } .ui.modal > .content { display: block; padding: 1rem !important; } .ui.modal > .close { top: 0.5rem !important; right: 0.5rem !important; } /*rtl:ignore*/ .ui.modal .content > .image { display: block; max-width: 100%; margin: 0em auto !important; text-align: center; padding: 0rem 0rem 1rem !important; } .ui.modal > .content > .image > i.icon { font-size: 5rem; text-align: center; } /*rtl:ignore*/ .ui.modal .content > .description { display: block; width: 100% !important; margin: 0em !important; padding: 1rem 0rem !important; box-shadow: none; } /* Let Buttons Stack */ .ui.modal > .actions { padding: 1rem 1rem 0rem !important; } .ui.modal .actions > .buttons, .ui.modal .actions > .button { margin-bottom: 1rem; }}
/******************************* Types*******************************/
.ui.basic.modal { background-color: transparent; border: none; border-radius: 0em; box-shadow: 0px 0px 0px 0px; color: #ffffff;}.ui.basic.modal > .header,.ui.basic.modal > .content,.ui.basic.modal > .actions { background-color: transparent;}.ui.basic.modal > .header { color: #ffffff;}.ui.basic.modal > .close { top: 1rem; right: 1.5rem;}
/* Tablet and Mobile */@media only screen and (max-width: 992px) { .ui.basic.modal > .close { color: #ffffff; }}
/******************************* States*******************************/
.ui.active.modal { display: block;}
/******************************* Variations*******************************/
/*-------------- Scrolling---------------*/
/* A modal that cannot fit on the page */.scrolling.dimmable.dimmed { overflow: hidden;}.scrolling.dimmable.dimmed > .dimmer { overflow: auto; -webkit-overflow-scrolling: touch;}.scrolling.dimmable > .dimmer { position: fixed;}.modals.dimmer .ui.scrolling.modal { position: static !important; margin: 3.5rem auto !important;}
/* undetached scrolling */.scrolling.undetached.dimmable.dimmed { overflow: auto; -webkit-overflow-scrolling: touch;}.scrolling.undetached.dimmable.dimmed > .dimmer { overflow: hidden;}.scrolling.undetached.dimmable .ui.scrolling.modal { position: absolute; left: 50%; margin-top: 3.5rem !important;}
/* Coupling with Sidebar */.undetached.dimmable.dimmed > .pusher { z-index: auto;}@media only screen and (max-width: 992px) { .ui.scrolling.modal { margin-top: 1rem; margin-bottom: 1rem; }}
/*-------------- Full Screen---------------*/
.ui.fullscreen.modal { width: 95% !important; left: 2.5% !important; margin: 1em auto;}.ui.fullscreen.scrolling.modal { left: 0em !important;}.ui.fullscreen.modal > .header { padding-right: 2.25rem;}.ui.fullscreen.modal > .close { top: 1.0035rem; right: 1rem; color: rgba(0, 0, 0, 0.8);}
/*-------------- Size---------------*/
.ui.modal { font-size: 1rem;}
/* Small */.ui.small.modal > .header { font-size: 1.3em;}
/* Small Modal Width */@media only screen and (max-width: 767px) { .ui.small.modal { width: 95%; margin: 0em 0em 0em -47.5%; }}@media only screen and (min-width: 768px) { .ui.small.modal { width: 52.8%; margin: 0em 0em 0em -26.4%; }}@media only screen and (min-width: 992px) { .ui.small.modal { width: 44.4%; margin: 0em 0em 0em -22.2%; }}@media only screen and (min-width: 1400px) { .ui.small.modal { width: 33.6%; margin: 0em 0em 0em -16.8%; }}@media only screen and (min-width: 1920px) { .ui.small.modal { width: 25.2%; margin: 0em 0em 0em -12.6%; }}
/* Large Modal Width */.ui.large.modal > .header { font-size: 1.6em;}@media only screen and (max-width: 767px) { .ui.large.modal { width: 95%; margin: 0em 0em 0em -47.5%; }}@media only screen and (min-width: 768px) { .ui.large.modal { width: 88%; margin: 0em 0em 0em -44%; }}@media only screen and (min-width: 992px) { .ui.large.modal { width: 88.8%; margin: 0em 0em 0em -44.4%; }}@media only screen and (min-width: 1400px) { .ui.large.modal { width: 67.2%; margin: 0em 0em 0em -33.6%; }}@media only screen and (min-width: 1920px) { .ui.large.modal { width: 50.4%; margin: 0em 0em 0em -25.2%; }}
/******************************* Theme Overrides*******************************/
/******************************* Site Overrides*******************************/
|
