You are here

Home » API reference » Popups API (Ajax Dialogs) 6.2

blue.css in Popups API (Ajax Dialogs) 6.2 

/*  
  Blue Popup Skin
  Author: Tj Holowaychuk
  Link: http://vision-media.ca
*/ 
#popups-overlay {
  background: #fff;
  opacity:.80;
}
.popups-box {
  padding: 25px;
  width: 510px;
  border: none;
  background: transparent url(images/tile-v.png) 0 0 repeat-y;
  overflow: visible;
}       
.popups-title {
  position: absolute;
  top: -65px;
  left: -11px;
  margin: 0;
  padding: 0;
  height: 65px;
  width: 570px;
  line-height: 75px;
  background: transparent url(images/sprites.png) 0 0 no-repeat;
}
.popups-title .title {
  text-indent: 25px;
  text-shadow: #fff 1px 1px 1px;
  color: #437acf;
}
.popups-title .popups-close a {
  position: absolute;
  top: 4px;
  right: -7px;
  display: block;
  width: 16px;
  height: 16px;
  text-indent: -9999999px;
  outline: none;
  cursor: pointer;
  background: transparent url(images/sprites.png) -577px -18px no-repeat;   
}
.popups-title .popups-close a:hover {
  background-position: -577px -52px;
}
.popups-title .popups-close a:active {
  background-position: -577px -35px;   
}    
.popups-body {
  padding: 0 25px;
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden; 
}  
.popups-footer {
  position: absolute;
  bottom: -90px;
  left: -11px;
  width: 570px;
  height: 90px;
  background: transparent url(images/sprites.png) 0 -110px no-repeat; 
}

File

skins/blue/blue.css
View source 
  1. /*  

  2.   Blue Popup Skin

  3.   Author: Tj Holowaychuk

  4.   Link: http://vision-media.ca

  5. */ 

  6. #popups-overlay {

  7.   background: #fff;

  8.   opacity:.80;

  9. }

  10. .popups-box {

  11.   padding: 25px;

  12.   width: 510px;

  13.   border: none;

  14.   background: transparent url(images/tile-v.png) 0 0 repeat-y;

  15.   overflow: visible;

  16. }       

  17. .popups-title {

  18.   position: absolute;

  19.   top: -65px;

  20.   left: -11px;

  21.   margin: 0;

  22.   padding: 0;

  23.   height: 65px;

  24.   width: 570px;

  25.   line-height: 75px;

  26.   background: transparent url(images/sprites.png) 0 0 no-repeat;

  27. }

  28. .popups-title .title {

  29.   text-indent: 25px;

  30.   text-shadow: #fff 1px 1px 1px;

  31.   color: #437acf;

  32. }

  33. .popups-title .popups-close a {

  34.   position: absolute;

  35.   top: 4px;

  36.   right: -7px;

  37.   display: block;

  38.   width: 16px;

  39.   height: 16px;

  40.   text-indent: -9999999px;

  41.   outline: none;

  42.   cursor: pointer;

  43.   background: transparent url(images/sprites.png) -577px -18px no-repeat;   

  44. }

  45. .popups-title .popups-close a:hover {

  46.   background-position: -577px -52px;

  47. }

  48. .popups-title .popups-close a:active {

  49.   background-position: -577px -35px;   

  50. }    

  51. .popups-body {

  52.   padding: 0 25px;

  53.   height: 250px;

  54.   overflow-y: auto;

  55.   overflow-x: hidden; 

  56. }  

  57. .popups-footer {

  58.   position: absolute;

  59.   bottom: -90px;

  60.   left: -11px;

  61.   width: 570px;

  62.   height: 90px;

  63.   background: transparent url(images/sprites.png) 0 -110px no-repeat; 

  64. }

  65. 

  66.