You are here

smileys.css in Smileys 6

.smileys {
  position: relative;
  padding: 6px 10px 6px 10px;
}

.smileys strong {
  position: absolute;
  left: 25px;
  top: 6px;
}

.smileys span {
  float: left;
  width: 51px;
  height: 51px;
  text-align: center;
}

.smileys span span {
  display: block;
  margin: 0 auto;
  height: 22px;
}

.smiley-class {
  cursor: pointer;
  border: 0;
}

.smiley-content {
  border: none;
}

/* Dialog */

.smileysDialog {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  background: #fff;
  color: #222;
  border-color: #d3d3d3 #a3a3a3 #a3a3a3 #d3d3d3;
  border-style: solid;
  border-width: 2px;
  position: relative;
}

.smileysDialog .ui-dialog-content {
  border: 1px solid #d3d3d3;
  background: #fff;
  color: #222;
  overflow: auto;
}

.smileysDialog .ui-resizable-handle, .smileysDialog .ui-resizable-se {
  display: block;
  position: absolute;
  font-size: 0.1px;
  z-index: 99999;
  cursor: se-resize; 
  width: 13px; 
  height: 13px; 
  right: 0; 
  bottom: 0; 
  background: url(images/222222_11x11_icon_resize_se.gif) no-repeat 0 0;
}

body .smileysDialog .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */

body .smileysDialog .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */

.smileysDialog .ui-dialog-titlebar {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  padding: .5em 1.5em .5em .5em;
  color: #555;
  background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  border-bottom: 1px solid #d3d3d3;
  font-size: 1.1em;
  font-weight: normal;
  position: relative;
}

.smileysDialog .ui-dialog-title {

}

.smileysDialog .ui-dialog-titlebar-close {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  background: url(images/888888_11x11_icon_close.gif) 0 0 no-repeat;
  position: absolute;
  right: 8px;
  top: .7em;
  width: 11px;
  height: 11px;
  z-index: 100;
}

.smileysDialog .ui-dialog-titlebar-close-hover, .smileysDialog .ui-dialog-titlebar-close:hover {
  background: url(images/454545_11x11_icon_close.gif) 0 0 no-repeat;
}

.smileysDialog .ui-dialog-titlebar-close:active {
  background: url(images/222222_11x11_icon_close.gif) 0 0 no-repeat;
}

.smileysDialog .ui-dialog-titlebar-close span {
  display: none;
}

.smileysDialog .ui-dialog-content {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  background: #fff;
  color: #222;
}

.smileysDialog .ui-dialog-content span {
  line-height: 1.75em;
  padding: 0 .5em;
}

.smileysDialog .ui-dialog-content fieldset {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  background: none;
  border: none;
  position: relative;
  margin: 1em 0;
}

.smileysDialog .ui-dialog-content legend {
  /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  margin: .25em 0;
  padding: .15em .75em;
  line-height: 1.75em;
  background-color: #F7F7F7;
  border-color: #A0A0A0;
  border-style: solid;
  border-width: 1px 2px 2px 0;
}

.smileysDialog .ui-dialog-content p span.smileyPackageTitle {
  color: #555555;
  font-size: 12px;
  font-weight: bold;
}

.smileysDialog .ui-dialog-buttonpane {
  background: #fff url(admin/images/reorder.gif) no-repeat scroll 98% center;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: left;
  border-top: 1px solid #d3d3d3;
  background: ;
}

.smileysDialog .ui-dialog-buttonpane button {
  margin: .5em 2em .5em 8px;
  color: #555555;
  background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  font-size: 1.1em;
  float: right;
  border: 1px solid #d3d3d3;
  cursor: pointer;
  padding: .3em .4em;
  line-height: 1.4em;
}

.smileysDialog .ui-dialog-buttonpane button:hover {
  color: #212121;
  background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  border: 1px solid #999;
}

.smileysDialog .ui-dialog-buttonpane button:active {
  color: #222;
  background: #fff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
  border: 1px solid #ddd;
}

.smileysDialog .ui-dialog-titlebar,
.smileysDialog .ui-dialog-titlebar * {
  cursor: move;
}

.smileysDialog .ui-dialog-buttonpane span {
  color: #555;
  float: left;
  margin: 10px 0 0 10px;
}

File

scripts/smileys.css
View source
  1. .smileys {
  2. position: relative;
  3. padding: 6px 10px 6px 10px;
  4. }
  5. .smileys strong {
  6. position: absolute;
  7. left: 25px;
  8. top: 6px;
  9. }
  10. .smileys span {
  11. float: left;
  12. width: 51px;
  13. height: 51px;
  14. text-align: center;
  15. }
  16. .smileys span span {
  17. display: block;
  18. margin: 0 auto;
  19. height: 22px;
  20. }
  21. .smiley-class {
  22. cursor: pointer;
  23. border: 0;
  24. }
  25. .smiley-content {
  26. border: none;
  27. }
  28. /* Dialog */
  29. .smileysDialog {
  30. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  31. background: #fff;
  32. color: #222;
  33. border-color: #d3d3d3 #a3a3a3 #a3a3a3 #d3d3d3;
  34. border-style: solid;
  35. border-width: 2px;
  36. position: relative;
  37. }
  38. .smileysDialog .ui-dialog-content {
  39. border: 1px solid #d3d3d3;
  40. background: #fff;
  41. color: #222;
  42. overflow: auto;
  43. }
  44. .smileysDialog .ui-resizable-handle, .smileysDialog .ui-resizable-se {
  45. display: block;
  46. position: absolute;
  47. font-size: 0.1px;
  48. z-index: 99999;
  49. cursor: se-resize;
  50. width: 13px;
  51. height: 13px;
  52. right: 0;
  53. bottom: 0;
  54. background: url(images/222222_11x11_icon_resize_se.gif) no-repeat 0 0;
  55. }
  56. body .smileysDialog .ui-resizable-disabled .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
  57. body .smileysDialog .ui-resizable-autohide .ui-resizable-handle { display: none; } /* use 'body' to make it more specific (css order) */
  58. .smileysDialog .ui-dialog-titlebar {
  59. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  60. padding: .5em 1.5em .5em .5em;
  61. color: #555;
  62. background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  63. border-bottom: 1px solid #d3d3d3;
  64. font-size: 1.1em;
  65. font-weight: normal;
  66. position: relative;
  67. }
  68. .smileysDialog .ui-dialog-title {
  69. }
  70. .smileysDialog .ui-dialog-titlebar-close {
  71. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  72. background: url(images/888888_11x11_icon_close.gif) 0 0 no-repeat;
  73. position: absolute;
  74. right: 8px;
  75. top: .7em;
  76. width: 11px;
  77. height: 11px;
  78. z-index: 100;
  79. }
  80. .smileysDialog .ui-dialog-titlebar-close-hover, .smileysDialog .ui-dialog-titlebar-close:hover {
  81. background: url(images/454545_11x11_icon_close.gif) 0 0 no-repeat;
  82. }
  83. .smileysDialog .ui-dialog-titlebar-close:active {
  84. background: url(images/222222_11x11_icon_close.gif) 0 0 no-repeat;
  85. }
  86. .smileysDialog .ui-dialog-titlebar-close span {
  87. display: none;
  88. }
  89. .smileysDialog .ui-dialog-content {
  90. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  91. background: #fff;
  92. color: #222;
  93. }
  94. .smileysDialog .ui-dialog-content span {
  95. line-height: 1.75em;
  96. padding: 0 .5em;
  97. }
  98. .smileysDialog .ui-dialog-content fieldset {
  99. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  100. background: none;
  101. border: none;
  102. position: relative;
  103. margin: 1em 0;
  104. }
  105. .smileysDialog .ui-dialog-content legend {
  106. /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
  107. margin: .25em 0;
  108. padding: .15em .75em;
  109. line-height: 1.75em;
  110. background-color: #F7F7F7;
  111. border-color: #A0A0A0;
  112. border-style: solid;
  113. border-width: 1px 2px 2px 0;
  114. }
  115. .smileysDialog .ui-dialog-content p span.smileyPackageTitle {
  116. color: #555555;
  117. font-size: 12px;
  118. font-weight: bold;
  119. }
  120. .smileysDialog .ui-dialog-buttonpane {
  121. background: #fff url(admin/images/reorder.gif) no-repeat scroll 98% center;
  122. position: absolute;
  123. bottom: 0;
  124. width: 100%;
  125. text-align: left;
  126. border-top: 1px solid #d3d3d3;
  127. background: ;
  128. }
  129. .smileysDialog .ui-dialog-buttonpane button {
  130. margin: .5em 2em .5em 8px;
  131. color: #555555;
  132. background: #e6e6e6 url(images/e6e6e6_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  133. font-size: 1.1em;
  134. float: right;
  135. border: 1px solid #d3d3d3;
  136. cursor: pointer;
  137. padding: .3em .4em;
  138. line-height: 1.4em;
  139. }
  140. .smileysDialog .ui-dialog-buttonpane button:hover {
  141. color: #212121;
  142. background: #dadada url(images/dadada_40x100_textures_02_glass_75.png) 0 50% repeat-x;
  143. border: 1px solid #999;
  144. }
  145. .smileysDialog .ui-dialog-buttonpane button:active {
  146. color: #222;
  147. background: #fff url(images/ffffff_40x100_textures_02_glass_65.png) 0 50% repeat-x;
  148. border: 1px solid #ddd;
  149. }
  150. .smileysDialog .ui-dialog-titlebar,
  151. .smileysDialog .ui-dialog-titlebar * {
  152. cursor: move;
  153. }
  154. .smileysDialog .ui-dialog-buttonpane span {
  155. color: #555;
  156. float: left;
  157. margin: 10px 0 0 10px;
  158. }