CSS   32
modal css
Guest on 26th May 2023 12:57:58 PM


  1. .wrs_modal_overlay {
  2.     position: fixed;
  3.     font-family: arial, sans-serif;
  4.     top: 0;
  5.     right: 0;
  6.     left: 0;
  7.     bottom: 0;
  8.     background: rgba(0,0,0,0.8);
  9.     z-index: 99998;
  10.     opacity:0.65;
  11.     pointer-events: auto;
  12. }
  13.  
  14. .wrs_modal_overlay.wrs_maximized{
  15. }
  16.  
  17. .wrs_modal_overlay.wrs_minimized {
  18. }
  19.  
  20. .wrs_modal_overlay.wrs_stack {
  21. }
  22.  
  23. .wrs_modal_overlay.wrs_modal_ios {
  24. }
  25.  
  26. .wrs_modal_overlay.wrs_modal_ios.moodle {
  27.     position: fixed;
  28. }
  29.  
  30. .wrs_modal_title {
  31.     color : #FFFFFF;
  32.     padding : 5px 0px 5px 10px;
  33. }
  34.  
  35. .wrs_modal_close_button {
  36.     float : right;
  37.     cursor : pointer;
  38.     color : #FFFFFF;
  39.     padding : 5px 10px 5px 0px;
  40.     background: url('icons/general/close_icon.png');
  41.     background-size: 10px;
  42.     margin: 10px 7px 0 0;
  43. }
  44.  
  45. .wrs_modal_close_button:hover {
  46.     float : right;
  47.     cursor : pointer;
  48.     color : #FFFFFF;
  49.     padding : 5px 10px 5px 0px;
  50.     background: url('icons/hover/close_icon_h.png');
  51.     background-size: 10px;
  52.     margin: 10px 7px 0 0;
  53. }
  54.  
  55. .wrs_modal_minimize_button {
  56.     float : right;
  57.     cursor : pointer;
  58.     color : #FFFFFF;
  59.     padding : 5px 10px 5px 0px;
  60.     top: inherit;
  61.     margin: 10px 7px 0 0;
  62. }
  63.  
  64. .wrs_modal_minimize_button.wrs_maximized {
  65.     background: url('icons/general/min_icon.png');
  66.     background-size: 10px;
  67. }
  68.  
  69. .wrs_modal_minimize_button.wrs_maximized_hover {
  70.     background: url('icons/hover/min_icon_h.png');
  71.     background-size: 10px;
  72. }
  73.  
  74. .wrs_modal_minimize_button.wrs_stack {
  75.     background: url('icons/general/min_icon.png');
  76.     background-size: 10px;
  77. }
  78.  
  79. .wrs_modal_minimize_button.wrs_stack:hover {
  80.     background: url('icons/hover/min_icon_h.png');
  81.     background-size: 10px;
  82. }
  83.  
  84. .wrs_modal_minimize_button.wrs_minimized {
  85.     background: url('icons/general/max_icon.png');
  86.     background-size: 10px;
  87. }
  88.  
  89. .wrs_modal_minimize_button.wrs_minimized:hover {
  90.     background: url('icons/hover/max_icon_h.png');
  91.     background-size: 10px;
  92. }
  93.  
  94. .wrs_modal_minimize_button:hover {
  95.     background: url('icons/hover/min_icon_h.png');
  96.     background-size: 10px;
  97. }
  98.  
  99. .wrs_modal_stack_button {
  100.     color: black;
  101.     float : right;
  102.     cursor : pointer;
  103.     color : #FFFFFF;
  104.     margin: 10px 7px 0 0;
  105.     padding : 5px 10px 5px 0px;
  106.     top: inherit;
  107. }
  108.  
  109. .wrs_modal_stack_button.wrs_stack {
  110.     background: url('icons/general/fulls_icon.png');
  111.     background-size: 10px;
  112. }
  113.  
  114. .wrs_modal_stack_button.wrs_minimized {
  115.     background: url('icons/general/fulls_icon.png');
  116.     background-size: 10px;
  117. }
  118.  
  119. .wrs_modal_stack_button.wrs_maximized {
  120.     background: url('icons/general/mins_icon.png');
  121.     background-size: 10px;
  122. }
  123.  
  124. .wrs_modal_stack_button.wrs_stack:hover {
  125.     background: url('icons/hover/fulls_icon_h.png');
  126.     background-size: 10px;
  127. }
  128.  
  129. .wrs_modal_stack_button.wrs_minimized:hover {
  130.     background: url('icons/hover/fulls_icon_h.png');
  131.     background-size: 10px;
  132. }
  133.  
  134. .wrs_modal_stack_button.wrs_maximized:hover {
  135.     background: url('icons/hover/mins_icon_h.png');
  136.     background-size: 10px;
  137. }
  138.  
  139. .wrs_modal_stack_button:hover {
  140.     background: url('icons/hover/fulls_icon_h.png');
  141. }
  142.  
  143. .wrs_modal_iframe {
  144.     display : block;
  145. }
  146.  
  147. .wrs_modal_title_bar {
  148.     display : block;
  149.     background-color: #778e9a;
  150. }
  151.  
  152. .wrs_modal_dialogContainer {
  153.     overflow: hidden;
  154.     border: none;
  155.     background: #fafafa;
  156.     z-index: 99999;
  157. }
  158.  
  159.  
  160. .wrs_modal_dialogContainer.wrs_modal_desktop {
  161.     font-size: 14px;
  162. }
  163.  
  164. .wrs_modal_dialogContainer.wrs_modal_desktop.wrs_maximized {
  165.     position: fixed;
  166.     top: 50%;
  167.     left: 50%;
  168.     transform: translate(-50%, -50%);
  169. }
  170.  
  171. .wrs_modal_dialogContainer.wrs_modal_desktop.wrs_minimized {
  172.     bottom: 0;
  173.     right: 0;
  174.     position:fixed;
  175.     top: inherit;
  176.     margin: 0px;
  177.     width: 250px;
  178.     margin-right: 10px;
  179. }
  180. .wrs_modal_dialogContainer.wrs_modal_desktop.wrs_minimized.wrs_drag {
  181. }
  182.  
  183. .wrs_modal_dialogContainer.wrs_modal_desktop.wrs_stack {
  184.     position: fixed;
  185.     bottom: 0;
  186.     right: 0;
  187.     margin-right: 10px;
  188.     box-shadow: rgba(0,0,0,0.5) 0px 2px 8px
  189. }
  190.  
  191. .wrs_modal_dialogContainer.wrs_drag. {
  192.     box-shadow: rgba(0,0,0,0.5) 0px 2px 8px;
  193. }
  194.  
  195. .wrs_modal_dialogContainer.wrs_modal_desktop.wrs_drag {
  196.     box-shadow: rgba(0,0,0,0.5) 0px 2px 8px
  197. }
  198.  
  199. .wrs_modal_dialogContainer.wrs_modal_android {
  200.     margin: auto;
  201.     position: fixed;
  202.     width: 99%;
  203.     height: 99%;
  204.     overflow: hidden;
  205.     transform: translate(-50%, -50%);
  206.     top: 50%;
  207.     left: 50%;
  208. }
  209.  
  210. .wrs_modal_dialogContainer.wrs_modal_ios {
  211.     margin: auto;
  212.     position: fixed;
  213.     width: 100%;
  214.     height: 100%;
  215.     overflow: hidden;
  216.     transform: translate(-50%, -50%);
  217.     top: 50%;
  218.     left: 50%;
  219. }
  220.  
  221.  
  222.  
  223. .wrs_modal_iframeContainer.wrs_maximized {
  224. }
  225.  
  226. .wrs_modal_iframeContainer.wrs_minimized {
  227.     display : none;
  228. }
  229.  
  230. .wrs_modal_iframeContainer.wrs_modal_android {
  231.     width: 100%;
  232.     height: 100%;
  233. }
  234.  
  235.  
  236. .wrs_modal_iframe.wrs_modal_android {
  237.     margin : auto;
  238. }
  239.  
  240. .wrs_modal_iframeContainer.wrs_modal_ios {
  241.     width: 100%    !important;
  242.     height: 100%   !important;
  243. }
  244.  
  245. .wrs_modal_iframe.wrs_modal_ios {
  246.     width: 100vw    !important;
  247.     height: 100vh   !important;
  248. }
  249.  
  250. .wrs_modal_iframe.wrs_modal_android {
  251.     height: 100%;
  252.     width: 100%;
  253.     margin : auto;
  254. }
  255.  
  256. @media all and (orientation : portrait) {
  257.  
  258.     .wrs_modal_dialogContainer.wrs_modal_mobile {
  259.         width: 100vmin;
  260.         height: 100vmin;
  261.         margin: auto;
  262.         border-width: 0px;
  263.     }
  264.  
  265.     .wrs_modal_iframe.wrs_modal_mobile {
  266.         width : 100vmin;
  267.         height : 100vmin;
  268.         margin : auto;
  269.     }
  270. }
  271.  
  272.  
  273. @media all and (orientation : landscape) {
  274.  
  275.     .wrs_modal_dialogContainer.wrs_modal_mobile {
  276.         width: 100vmin;
  277.         height: 100vmin;
  278.         margin: auto;
  279.         border-width: 0px;
  280.     }
  281.  
  282.     .wrs_modal_iframe.wrs_modal_mobile {
  283.         width : 100vmin;
  284.         height : 100vmin;
  285.         margin : auto;
  286.     }
  287. }
  288.  
  289. .wrs_modal_dialogContainer.wrs_modal_badStock {
  290.     width: 100%;
  291.     height: 280px;
  292.     margin: 0px auto;
  293.     border-width: 0px;
  294. }
  295.  
  296. .wrs_modal_iframe.wrs_modal_badStock {
  297.     width : 100%;
  298.     height : 280px;
  299.     margin: 0px auto;
  300.     border-width: 0px;
  301. }
Raw Paste

Login or Register to edit or fork this paste. It's free.