You are here

Home » API reference » Simple modal overlay 7

simple_modal_overlay.css in Simple modal overlay 7

Styling for the Simple Modal Overlay module.

© 2014-2016 RedBottle Design, LLC, Inveniem, and House at Work. All rights reserved.

@author Guy Paddock (guy@redbottledesign.com)

File

css/simple_modal_overlay.css
View source 
  1. /**

  2.  * @file

  3.  *   Styling for the Simple Modal Overlay module.

  4.  *

  5.  *   © 2014-2016 RedBottle Design, LLC, Inveniem, and House at Work.

  6.  *   All rights reserved.

  7.  *

  8.  * @author Guy Paddock (guy@redbottledesign.com)

  9.  */

  10. 

  11. /* Background behind the overlay. */

  12. div.messages.simple-overlay {

  13.   display: none; /* Start off hidden */

  14. 

  15.   position: fixed;

  16.   top: 0;

  17.   left: 0;

  18.   z-index: 200;

  19. 

  20.   width: 100%;

  21.   height: 100%;

  22. 

  23.   margin: 0;

  24.   border: none;

  25.   padding: 10% 0;

  26. 

  27.   background: rgba(0, 0, 0, 0.6);

  28. }

  29. 

  30. /* Overlay */

  31. div.messages.simple-overlay .message-inner {

  32.   display: none; /* Start off hidden */

  33. 

  34.   position: relative;

  35.   z-index: 201;

  36. 

  37.   width: 600px;

  38. 

  39.   border-radius: 3px;

  40.   -webkit-border-radius: 3px;

  41.   -moz-border-radius: 3px;

  42.   border-color: #6bb0cb;

  43. 

  44.   margin: 0 auto;

  45.   padding: 0;

  46. 

  47.   box-shadow: 0 2px 15px #57595a;

  48.   -moz-box-shadow: 0 2px 15px #57595a;

  49.   -webkit-box-shadow: 0 2px 15px #57595a;

  50.   filter: progid:DXImageTransform.Microsoft.Shadow(color='#57595A', direction='180', strength='5');

  51. 

  52.   color: #aeaaa5;

  53.   overflow: hidden;

  54.   background-color: white;

  55. }

  56. 

  57. /* Title */

  58. div.messages.simple-overlay .message-inner .title {

  59.   float: left; /* LTR */

  60. 

  61.   width: 90%;

  62. 

  63.   padding: 1em;

  64. 

  65.   color: #2698f2;

  66.   font-weight: bold;

  67.   text-transform: uppercase;

  68. }

  69. 

  70. /* Message content area. */

  71. div.messages.simple-overlay .content {

  72.   clear: both;

  73.   position: relative;

  74. 

  75.   width: 90%;

  76. 

  77.   padding: 0 1em 1em;

  78. }

  79. 

  80. /* Close button */

  81. div.messages.simple-overlay .message-inner .simple-overlay-close {

  82.   display: block;

  83. 

  84.   position: absolute;

  85.   top: 1em;

  86.   right: 1em; /* LTR */

  87. 

  88.   width: 18px;

  89.   height: 17px;

  90. 

  91.   background: url('../images/btn_overlay-close.png') no-repeat 0 0;

  92. }