You are here

context_reaction_block.css in Context 7.3

/**
 * Script placeholder markup.
 */
.script-placeholder {
  padding:100px 0px;
  text-align:center;
  }

/**
 * Browser
 */
.context-block-browser {
  width: 600px;
}

.context-block-browser .blocks {
  height:98%;
  overflow: auto;
  float: left;
  width: 320px;
}

.context-block-browser .block-browser-sidebar {
  float: left;
  width: 250px;
  padding: 0 0 0 15px;
}

.context-block-item,
.context-block-browser  .draggable-placeholder,
#admin-toolbar  .context-block-browser  .context-block-item {
  font-size:11px;
  line-height:20px;
  height:20px;

  color:#333;

  padding:3px 3px 3px 3px;
  margin:0px 1px 1px 0px;
  max-width:300px;
  white-space:nowrap;
  overflow:hidden;

  background:#efefef;
  border:1px solid #ddd;
  position:relative;

  border-radius:5px;
  -moz-border-radius:5px;
  -moz-user-select:none;
  -webkit-user-select:none;
}


  .context-block-addable { cursor: pointer; }

  .context-block-item span.icon {
    background:url(context_reaction_block.png) 0px -80px no-repeat;
    display:block;
    width:20px;
    height:20px;
    float:left;
    margin-right:5px;
  }

  .context-block-loading { max-width:none; }

  .context-block-loading span.icon {
    background-position:-20px -80px;
    float:none;
    margin:0px auto;
  }

  .context-block-browser  .draggable-placeholder { padding:2px 1px 1px 2px; }

  #admin-toolbar.horizontal  .context-block-browser  .draggable-placeholder,
  #admin-toolbar.horizontal  .context-block-browser  .context-block-item {
    width:180px;
    margin-right:1px;
    padding-right:9px;
    float:left;
  }


  .context-block-added { display:none !important; }

/**
 * Inline editing elements ============================================
 */
div.context-block-region {display: none;}
a.context-block { display:none !important; }

body.context-editing div.context-block-region {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  background:#666;
  color:#fff;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);

  display:block;
  height:40px;
  line-height:24px;

  text-align:center;
  font-size:18px;
  white-space:nowrap;
}

.context-block-region .region-name {
    width:100%;
    text-align:center;
    font-size:18px;
    color:#fff;
    white-space:nowrap;
    display:block;
    -moz-user-select:none;
    -webkit-user-select:none;
  }

body.context-editing .ui-sortable  .block { opacity:.25; }

body.context-editing .ui-sortable  .draggable {
  position:relative;
  opacity:1;
  }

body.context-editing  .draggable-placeholder {
  -moz-border-radius:5px;
  -webkit-border-radius:5px;

  background:#fff;
  border:3px dashed #666;
  opacity:.2;
  }

body.context-editing  .draggable:hover a.context-block-remove,
body.context-editing  .draggable:hover a.context-block-handle {
  background:url(context_reaction_block.png) no-repeat;
  cursor:move;
  display:block;
  width:40px;
  height:40px;
  position:absolute;
  right:35px;
  top:-5px;
  z-index:100;
  }

body.context-editing  .draggable:hover a.context-block-remove {
  background-position:-40px 0px;
  cursor:pointer;
  right:-5px;
  }

 .context-block-hidden { display:none !important; }

 .block  .context-block-empty-content {
  text-align:center;
  padding:10px;
  opacity:.5;
  background:#fff;
  color:#666;
  }

/**
 * Block visibility ===================================================
 */
#context-blockform  .context-blockform-selector {
  overflow:auto;
  }

#context-blockform span.system-blocks { color:#999; }

#context-blockform td.blocks,
#context-blockform td.selector {
  border:1px solid #ddd;
  padding:10px;
  width:50%;
  vertical-align: top;
  }

#context-blockform td.blocks  .label,
#context-blockform td.blocks td,
#context-blockform td.blocks th {
  background:#fff;
  padding:5px 5px 4px;
  border:0px;
  border-bottom:1px solid #ddd;
  }

  #context-blockform td.blocks  .label { background:#eee; }
  #context-blockform td.blocks  .label a { float:right; }

#context-ui-items #context-blockform {
  font-size:11px;
  line-height:15px;
  }

#context-ui-items #context-blockform  .form-checkboxes {
  height:auto;
  overflow:visible;
  padding:0px;
  margin:0px;
  border:0px;
  }

#context-ui-items #context-blockform  .form-item { padding:0px; }

#context-ui-items #context-blockform label {
  background:#eee;
  display:block;
  padding:5px;
  line-height:15px;
  }

#context-ui-items #context-blockform label.option {
  background:#fff;
  display:block;
  border:0px;
  }

#context-blockform .tabledrag-toggle-weight-wrapper {
  margin-bottom:0;
  }

a.context-ui-add-link, a:link.context-ui-add-link, a:visited.context-ui-add-link {
  display:block;
  width:100%;
  text-align:center;
  font-size:12px;
  color:#fff;
  cursor: pointer;
  line-height:14px;
}

.editing-context-label {
  position: fixed;
  top:70px;
  background:#fff;
  color:#222;
  padding:10px;
  font-weight:bold;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter:alpha(opacity=50);
  border:1px solid #ddd;
  border-left:0;
  border-radius:0 6px 6px 0;
}

.context-help {
  font-size:12px;
  font-weight:normal;
}

.context-editor-title {
  font-size:24px;
  margin:10px 0px;
  padding:0;
}

File

plugins/context_reaction_block.css
View source
  1. /**
  2. * Script placeholder markup.
  3. */
  4. .script-placeholder {
  5. padding:100px 0px;
  6. text-align:center;
  7. }
  8. /**
  9. * Browser
  10. */
  11. .context-block-browser {
  12. width: 600px;
  13. }
  14. .context-block-browser .blocks {
  15. height:98%;
  16. overflow: auto;
  17. float: left;
  18. width: 320px;
  19. }
  20. .context-block-browser .block-browser-sidebar {
  21. float: left;
  22. width: 250px;
  23. padding: 0 0 0 15px;
  24. }
  25. .context-block-item,
  26. .context-block-browser .draggable-placeholder,
  27. #admin-toolbar .context-block-browser .context-block-item {
  28. font-size:11px;
  29. line-height:20px;
  30. height:20px;
  31. color:#333;
  32. padding:3px 3px 3px 3px;
  33. margin:0px 1px 1px 0px;
  34. max-width:300px;
  35. white-space:nowrap;
  36. overflow:hidden;
  37. background:#efefef;
  38. border:1px solid #ddd;
  39. position:relative;
  40. border-radius:5px;
  41. -moz-border-radius:5px;
  42. -moz-user-select:none;
  43. -webkit-user-select:none;
  44. }
  45. .context-block-addable { cursor: pointer; }
  46. .context-block-item span.icon {
  47. background:url(context_reaction_block.png) 0px -80px no-repeat;
  48. display:block;
  49. width:20px;
  50. height:20px;
  51. float:left;
  52. margin-right:5px;
  53. }
  54. .context-block-loading { max-width:none; }
  55. .context-block-loading span.icon {
  56. background-position:-20px -80px;
  57. float:none;
  58. margin:0px auto;
  59. }
  60. .context-block-browser .draggable-placeholder { padding:2px 1px 1px 2px; }
  61. #admin-toolbar.horizontal .context-block-browser .draggable-placeholder,
  62. #admin-toolbar.horizontal .context-block-browser .context-block-item {
  63. width:180px;
  64. margin-right:1px;
  65. padding-right:9px;
  66. float:left;
  67. }
  68. .context-block-added { display:none !important; }
  69. /**
  70. * Inline editing elements ============================================
  71. */
  72. div.context-block-region {display: none;}
  73. a.context-block { display:none !important; }
  74. body.context-editing div.context-block-region {
  75. -moz-border-radius:5px;
  76. -webkit-border-radius:5px;
  77. background:#666;
  78. color:#fff;
  79. opacity: 0.5;
  80. -moz-opacity: 0.5;
  81. filter:alpha(opacity=50);
  82. display:block;
  83. height:40px;
  84. line-height:24px;
  85. text-align:center;
  86. font-size:18px;
  87. white-space:nowrap;
  88. }
  89. .context-block-region .region-name {
  90. width:100%;
  91. text-align:center;
  92. font-size:18px;
  93. color:#fff;
  94. white-space:nowrap;
  95. display:block;
  96. -moz-user-select:none;
  97. -webkit-user-select:none;
  98. }
  99. body.context-editing .ui-sortable .block { opacity:.25; }
  100. body.context-editing .ui-sortable .draggable {
  101. position:relative;
  102. opacity:1;
  103. }
  104. body.context-editing .draggable-placeholder {
  105. -moz-border-radius:5px;
  106. -webkit-border-radius:5px;
  107. background:#fff;
  108. border:3px dashed #666;
  109. opacity:.2;
  110. }
  111. body.context-editing .draggable:hover a.context-block-remove,
  112. body.context-editing .draggable:hover a.context-block-handle {
  113. background:url(context_reaction_block.png) no-repeat;
  114. cursor:move;
  115. display:block;
  116. width:40px;
  117. height:40px;
  118. position:absolute;
  119. right:35px;
  120. top:-5px;
  121. z-index:100;
  122. }
  123. body.context-editing .draggable:hover a.context-block-remove {
  124. background-position:-40px 0px;
  125. cursor:pointer;
  126. right:-5px;
  127. }
  128. .context-block-hidden { display:none !important; }
  129. .block .context-block-empty-content {
  130. text-align:center;
  131. padding:10px;
  132. opacity:.5;
  133. background:#fff;
  134. color:#666;
  135. }
  136. /**
  137. * Block visibility ===================================================
  138. */
  139. #context-blockform .context-blockform-selector {
  140. overflow:auto;
  141. }
  142. #context-blockform span.system-blocks { color:#999; }
  143. #context-blockform td.blocks,
  144. #context-blockform td.selector {
  145. border:1px solid #ddd;
  146. padding:10px;
  147. width:50%;
  148. vertical-align: top;
  149. }
  150. #context-blockform td.blocks .label,
  151. #context-blockform td.blocks td,
  152. #context-blockform td.blocks th {
  153. background:#fff;
  154. padding:5px 5px 4px;
  155. border:0px;
  156. border-bottom:1px solid #ddd;
  157. }
  158. #context-blockform td.blocks .label { background:#eee; }
  159. #context-blockform td.blocks .label a { float:right; }
  160. #context-ui-items #context-blockform {
  161. font-size:11px;
  162. line-height:15px;
  163. }
  164. #context-ui-items #context-blockform .form-checkboxes {
  165. height:auto;
  166. overflow:visible;
  167. padding:0px;
  168. margin:0px;
  169. border:0px;
  170. }
  171. #context-ui-items #context-blockform .form-item { padding:0px; }
  172. #context-ui-items #context-blockform label {
  173. background:#eee;
  174. display:block;
  175. padding:5px;
  176. line-height:15px;
  177. }
  178. #context-ui-items #context-blockform label.option {
  179. background:#fff;
  180. display:block;
  181. border:0px;
  182. }
  183. #context-blockform .tabledrag-toggle-weight-wrapper {
  184. margin-bottom:0;
  185. }
  186. a.context-ui-add-link, a:link.context-ui-add-link, a:visited.context-ui-add-link {
  187. display:block;
  188. width:100%;
  189. text-align:center;
  190. font-size:12px;
  191. color:#fff;
  192. cursor: pointer;
  193. line-height:14px;
  194. }
  195. .editing-context-label {
  196. position: fixed;
  197. top:70px;
  198. background:#fff;
  199. color:#222;
  200. padding:10px;
  201. font-weight:bold;
  202. opacity: 0.5;
  203. -moz-opacity: 0.5;
  204. filter:alpha(opacity=50);
  205. border:1px solid #ddd;
  206. border-left:0;
  207. border-radius:0 6px 6px 0;
  208. }
  209. .context-help {
  210. font-size:12px;
  211. font-weight:normal;
  212. }
  213. .context-editor-title {
  214. font-size:24px;
  215. margin:10px 0px;
  216. padding:0;
  217. }