panels_ipe.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  1. body.panels-ipe {
  2. margin-bottom: 60px !important;
  3. }
  4. /* Hide the IPE toolbar on print output. */
  5. @media print {
  6. #panels-ipe-control-container {
  7. display: none !important;
  8. }
  9. body.panels-ipe {
  10. margin-top: 0 !important;
  11. }
  12. }
  13. /* Hide the control container when the overlay is open. */
  14. html.overlay-open #panels-ipe-control-container {
  15. display: none !important;
  16. }
  17. html.overlay-open body.panels-ipe {
  18. margin-top: 0 !important;
  19. }
  20. div.panels-ipe-handlebar-wrapper {
  21. border-bottom: 1px solid #ccc;
  22. }
  23. .panels-ipe-editing div.panels-ipe-portlet-wrapper {
  24. margin-top: 1em;
  25. border: 1px solid #ccc;
  26. width: 100%;
  27. }
  28. /* Hide empty panes when not editing them. */
  29. .panels-ipe-empty-pane {
  30. display: none;
  31. }
  32. .panels-ipe-editing .panels-ipe-empty-pane {
  33. display: block;
  34. }
  35. .panels-ipe-editing div.panels-ipe-portlet-wrapper:hover {
  36. border: 1px dashed #ccc;
  37. }
  38. .panels-ipe-editing .panels-ipe-sort-container {
  39. min-height: 40px;
  40. }
  41. .panels-ipe-editing .panels-ipe-sort-container .ui-sortable-helper {
  42. background: white;
  43. }
  44. .panels-ipe-editing div.panel-pane div.admin-links {
  45. display: none !important;
  46. }
  47. .panels-ipe-editing .panels-ipe-sort-container .ui-sortable-placeholder {
  48. border: 2px dashed #999;
  49. background-color: #ffff99;
  50. margin: 1em 0;
  51. -moz-border-radius: 0;
  52. -khtml-border-radius: 0;
  53. -webkit-border-radius: 0;
  54. border-radius: 0;
  55. }
  56. div.panels-ipe-handlebar-wrapper ul {
  57. float: left;
  58. margin: 0;
  59. padding: 0;
  60. text-align: right;
  61. }
  62. div.panels-ipe-handlebar-wrapper li {
  63. background: none;
  64. list-style-type: none;
  65. list-style-image: none;
  66. margin: 0 .5em 0 0;
  67. padding: 0;
  68. float: left;
  69. }
  70. div.panels-ipe-draghandle,
  71. div.panels-ipe-nodraghandle {
  72. background: #e9e9e9;
  73. background-image: linear-gradient(bottom, #d5d5d5 0%, #fcfcfc 100%);
  74. background-image: -o-linear-gradient(bottom, #d5d5d5 0%, #fcfcfc 100%);
  75. background-image: -moz-linear-gradient(bottom, #d5d5d5 0%, #fcfcfc 100%);
  76. background-image: -webkit-linear-gradient(bottom, #d5d5d5 0%, #fcfcfc 100%);
  77. background-image: -ms-linear-gradient(bottom, #d5d5d5 0%, #fcfcfc 100%);
  78. background-image: -webkit-gradient(
  79. linear,
  80. left bottom,
  81. left top,
  82. color-stop(0, #d5d5d5),
  83. color-stop(1, #fcfcfc)
  84. );
  85. padding: 8px 7px;
  86. }
  87. div.panels-ipe-draghandle span.panels-ipe-draghandle-icon {
  88. display: block;
  89. float: right;
  90. cursor: move;
  91. width: 34px;
  92. height: 34px;
  93. padding: 0 !important; /* override button defaults */
  94. }
  95. span.panels-ipe-draghandle-icon-inner {
  96. display: block;
  97. width: 34px;
  98. height: 34px;
  99. background: url(../images/icon-draggable.png) no-repeat 3px 3px;
  100. }
  101. div.panels-ipe-placeholder {
  102. border: 2px dashed #999;
  103. padding: .5em;
  104. position: relative;
  105. margin-top: .5em;
  106. background-color: #ecfaff;
  107. color: #999;
  108. font: 15px/1.3em "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif;
  109. text-transform: none;
  110. letter-spacing: 0;
  111. text-align: left;
  112. word-spacing: 0;
  113. }
  114. div.panels-ipe-placeholder h3 {
  115. font-weight: normal;
  116. font-size: 15px;
  117. width: 75px; /* In order to prevent the region title from running into the button, set a width. Initital width only--this will be changed by jQuery */
  118. margin: 1.154em 0;
  119. }
  120. /* Hide editor-state-on elements initially */
  121. .panels-ipe-on {
  122. display: none;
  123. }
  124. .panels-ipe-editing .panels-ipe-on {
  125. display: block;
  126. }
  127. /* Show editor-state-off elements initially */
  128. .panels-ipe-off {
  129. display: block;
  130. }
  131. div.panels-ipe-newblock {
  132. -webkit-box-shadow: 0px 0 5px 5px #ecfaff;
  133. -moz-box-shadow: 0px 0 5px 5px #ecfaff;
  134. box-shadow: 0px 0 5px 5px #ecfaff;
  135. position: absolute;
  136. right: 10px;
  137. top: 50%;
  138. margin-top: -18px; /* some initial guesses to help center the add button
  139. panels_ipe.js will evaluate the width and get this pixel-perfect */
  140. margin-left: -30px;
  141. z-index: 99;
  142. }
  143. div.panels-ipe-newblock li {
  144. padding: 0;
  145. }
  146. div.panels-ipe-handlebar-wrapper li a,
  147. div.panels-ipe-dragtitle span,
  148. div.panels-ipe-newblock a,
  149. span.panels-ipe-draghandle-icon {
  150. display: inline-block;
  151. border: 1px solid #ccc;
  152. padding: 0 8px 1px;
  153. font: bold 12px/32px 'Open Sans', 'Lucida Sans', 'Lucida Grande', verdana sans-serif;
  154. text-decoration: none;
  155. height: 33px;
  156. color: #666;
  157. cursor: pointer;
  158. outline: none;
  159. -moz-border-radius: 3px;
  160. -khtml-border-radius: 3px;
  161. -webkit-border-radius: 3px;
  162. border-radius: 3px;
  163. background: #fafafa;
  164. background-image: linear-gradient(bottom, #e9eaec 0%, #fafafa 100%);
  165. background-image: -o-linear-gradient(bottom, #e9eaec 0%, #fafafa 100%);
  166. background-image: -moz-linear-gradient(bottom, #e9eaec 0%, #fafafa 100%);
  167. background-image: -webkit-linear-gradient(bottom, #e9eaec 0%, #fafafa 100%);
  168. background-image: -ms-linear-gradient(bottom, #e9eaec 0%, #fafafa 100%);
  169. background-image: -webkit-gradient(
  170. linear,
  171. left bottom,
  172. left top,
  173. color-stop(0, #e9eaec),
  174. color-stop(1, #fafafa)
  175. );
  176. -webkit-box-shadow: 0px 3px 3px 0px #d2d2d2;
  177. -moz-box-shadow: 0px 3px 3px 0px #d2d2d2;
  178. box-shadow: 0px 3px 3px 0px #d2d2d2;
  179. }
  180. div.panels-ipe-handlebar-wrapper li a span,
  181. div.panels-ipe-newblock a span {
  182. display: block;
  183. height: 32px;
  184. width: 18px;
  185. background-position: center center;
  186. background-repeat: no-repeat;
  187. text-align: left;
  188. text-indent: -9999em;
  189. }
  190. div.panels-ipe-handlebar-wrapper li.edit a span {
  191. background-image: url(../images/icon-settings.png);
  192. }
  193. div.panels-ipe-handlebar-wrapper li.css a span {
  194. background-image: url(../images/icon-css.png);
  195. }
  196. div.panels-ipe-handlebar-wrapper li.style a span,
  197. div.panels-ipe-newblock a.style span {
  198. background-image: url(../images/icon-style.png);
  199. }
  200. div.panels-ipe-newblock a.style {
  201. margin-right: .5em;
  202. }
  203. div.panels-ipe-newblock a.add span {
  204. background-image: url(../images/icon-add.png);
  205. }
  206. div.panels-ipe-handlebar-wrapper li.delete a span {
  207. background-image: url(../images/icon-delete.png);
  208. }
  209. div.panels-ipe-handlebar-wrapper li a:hover,
  210. div.panels-ipe-dragtitle span:hover,
  211. div.panels-ipe-newblock a:hover,
  212. span.panels-ipe-draghandle-icon:hover,
  213. div.panels-ipe-handlebar-wrapper li a:focus,
  214. div.panels-ipe-newblock a:focus {
  215. background: #e6e6e6;
  216. background-image: linear-gradient(bottom, #c5c5c5 0%, #fafafa 100%);
  217. background-image: -o-linear-gradient(bottom, #c5c5c5 0%, #fafafa 100%);
  218. background-image: -moz-linear-gradient(bottom, #c5c5c5 0%, #fafafa 100%);
  219. background-image: -webkit-linear-gradient(bottom, #c5c5c5 0%, #fafafa 100%);
  220. background-image: -ms-linear-gradient(bottom, #c5c5c5 0%, #fafafa 100%);
  221. background-image: -webkit-gradient(
  222. linear,
  223. left bottom,
  224. left top,
  225. color-stop(0, #c5c5c5),
  226. color-stop(1, #fafafa)
  227. );
  228. }
  229. div.panels-ipe-handlebar-wrapper li a:active,
  230. div.panels-ipe-dragtitle span:active,
  231. div.panels-ipe-newblock a:active,
  232. span.panels-ipe-draghandle-icon:active {
  233. outline: none;
  234. background-image: linear-gradient(bottom, #ffffff 0%, #e9eaec 100%);
  235. background-image: -o-linear-gradient(bottom, #ffffff 0%, #e9eaec 100%);
  236. background-image: -moz-linear-gradient(bottom, #ffffff 0%, #e9eaec 100%);
  237. background-image: -webkit-linear-gradient(bottom, #ffffff 0%, #e9eaec 100%);
  238. background-image: -ms-linear-gradient(bottom, #ffffff 0%, #e9eaec 100%);
  239. background-image: -webkit-gradient(
  240. linear,
  241. left bottom,
  242. left top,
  243. color-stop(0, #ffffff),
  244. color-stop(1, #e9eaec)
  245. );
  246. -webkit-box-shadow: 0px 0px 0px 0px #fff;
  247. -moz-box-shadow: 0px 0px 0px 0px #fff;
  248. box-shadow: 0px 0px 0px 0px #fff;
  249. }
  250. .panels-ipe-editing .panels-ipe-portlet-content {
  251. margin: 10px 3px;
  252. overflow: hidden;
  253. }
  254. .panels-ipe-editing .panels-ipe-region {
  255. border: transparent dotted 1px;
  256. float: left;
  257. width: 100%;
  258. margin-bottom: 5px;
  259. }
  260. div.panels-ipe-draghandle {
  261. border: none;
  262. }
  263. .ui-sortable-placeholder {
  264. margin: 1em;
  265. border: 1px dotted black;
  266. visibility: visible !important;
  267. height: 50px !important;
  268. }
  269. .ui-sortable-placeholder * {
  270. visibility: hidden;
  271. }
  272. /** ============================================================================
  273. * Controller form markup
  274. */
  275. div#panels-ipe-control-container {
  276. z-index: 99999;
  277. position: fixed;
  278. bottom: 0;
  279. display: none;
  280. background-color: #000;
  281. padding: 0.5em 0;
  282. width: 100%;
  283. overflow: hidden;
  284. -moz-box-shadow: 0 3px 20px #000;
  285. -webkit-box-shadow: 0 3px 20px #000;
  286. box-shadow: 0 3px 20px #000;
  287. }
  288. .ipe-throbber {
  289. background-color: #232323;
  290. background-image: url("../images/loading-small.gif");
  291. background-position: center center;
  292. background-repeat: no-repeat;
  293. -moz-border-radius: 7px;
  294. -webkit-border-radius: 7px;
  295. border-radius: 7px;
  296. height: 24px;
  297. opacity: .9;
  298. padding: 4px;
  299. width: 24px;
  300. /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
  301. left: 49%;
  302. position: fixed;
  303. top: 48.5%;
  304. z-index: 1001;
  305. }
  306. /* Hide the drupal system throbber image */
  307. .ipe-throbber .throbber {
  308. display: none;
  309. }
  310. div.panels-ipe-pseudobutton-container,
  311. div.panels-ipe-control .form-submit {
  312. cursor: pointer;
  313. background: #666666;
  314. background-image: linear-gradient(bottom, #383838 0%, #666666 100%);
  315. background-image: -o-linear-gradient(bottom, #383838 0%, #666666 100%);
  316. background-image: -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
  317. background-image: -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
  318. background-image: -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
  319. background-image: -webkit-gradient(
  320. linear,
  321. left bottom,
  322. left top,
  323. color-stop(0, #383838),
  324. color-stop(1, #666666)
  325. );
  326. border: 0;
  327. -moz-border-radius: 3px;
  328. -webkit-border-radius: 3px;
  329. border-radius: 3px;
  330. color: #ccc;
  331. display: inline-block;
  332. font: bold 12px/33px "Open Sans", "Lucida Grande", Tahoma, Verdana, sans-serif;
  333. height: 33px;
  334. margin: 0 10px;
  335. }
  336. div.panels-ipe-control .form-submit {
  337. padding: 0 0.8em 2px 34px;
  338. }
  339. div.panels-ipe-control input.panels-ipe-save,
  340. div.panels-ipe-control input.panels-ipe-cancel,
  341. div.panels-ipe-control input.panels-ipe-save:hover,
  342. div.panels-ipe-control input.panels-ipe-cancel:hover,
  343. div.panels-ipe-control input.panels-ipe-save:focus,
  344. div.panels-ipe-control input.panels-ipe-cancel:focus,
  345. div.panels-ipe-control input.panels-ipe-save:active,
  346. div.panels-ipe-control input.panels-ipe-cancel:active {
  347. background-repeat: no-repeat;
  348. }
  349. div.panels-ipe-pseudobutton-container a {
  350. height: 33px;
  351. padding: 0 0.8em;
  352. display: inline-block;
  353. color: #ccc;
  354. text-decoration: none;
  355. }
  356. div.panels-ipe-control .panels-ipe-save {
  357. background-image: url(../images/icon-save.png);
  358. background-image: url(../images/icon-save.png), linear-gradient(bottom, #383838 0%, #666666 100%);
  359. background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
  360. background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
  361. background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
  362. background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
  363. background-image: url(../images/icon-save.png), -webkit-gradient(
  364. linear,
  365. left bottom,
  366. left top,
  367. color-stop(0, #383838),
  368. color-stop(1, #666666)
  369. );
  370. }
  371. div.panels-ipe-control .panels-ipe-cancel {
  372. background-image: url(../images/icon-close.png);
  373. background-image: url(../images/icon-close.png), linear-gradient(bottom, #383838 0%, #666666 100%);
  374. background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #383838 0%, #666666 100%);
  375. background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #383838 0%, #666666 100%);
  376. background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #383838 0%, #666666 100%);
  377. background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #383838 0%, #666666 100%);
  378. background-image: url(../images/icon-close.png), -webkit-gradient(
  379. linear,
  380. left bottom,
  381. left top,
  382. color-stop(0, #383838),
  383. color-stop(1, #666666)
  384. );
  385. }
  386. div.panels-ipe-pseudobutton-container:hover,
  387. div.panels-ipe-control .form-submit:hover,
  388. div.panels-ipe-pseudobutton-container:focus,
  389. div.panels-ipe-control .form-submit:focus {
  390. background: #999999;
  391. background-image: linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  392. background-image: -o-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  393. background-image: -moz-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  394. background-image: -webkit-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  395. background-image: -ms-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  396. background-image: -webkit-gradient(
  397. linear,
  398. left bottom,
  399. left top,
  400. color-stop(0, #3d3d3d),
  401. color-stop(1, #999999)
  402. );
  403. color: #fff;
  404. }
  405. div.panels-ipe-pseudobutton-container a:hover,
  406. div.panels-ipe-pseudobutton-container a:focus {
  407. color: #fff;
  408. }
  409. div.panels-ipe-control .panels-ipe-cancel:hover,
  410. div.panels-ipe-control .panels-ipe-cancel:focus {
  411. background-image: url(../images/icon-close.png), linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  412. background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  413. background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  414. background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  415. background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  416. background-image: url(../images/icon-close.png), -webkit-gradient(
  417. linear,
  418. left bottom,
  419. left top,
  420. color-stop(0, #3d3d3d),
  421. color-stop(1, #999999)
  422. );
  423. }
  424. div.panels-ipe-control .panels-ipe-save:hover,
  425. div.panels-ipe-control .panels-ipe-save:focus {
  426. background-image: url(../images/icon-save.png), linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  427. background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  428. background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  429. background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  430. background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #3d3d3d 0%, #999999 100%);
  431. background-image: url(../images/icon-save.png), -webkit-gradient(
  432. linear,
  433. left bottom,
  434. left top,
  435. color-stop(0, #3d3d3d),
  436. color-stop(1, #999999)
  437. );
  438. }
  439. div.panels-ipe-pseudobutton-container:active,
  440. div.panels-ipe-control .form-submit:active {
  441. background: #333;
  442. background-image: linear-gradient(bottom, #616161 0%, #333333 100%);
  443. background-image: -o-linear-gradient(bottom, #616161 0%, #333333 100%);
  444. background-image: -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
  445. background-image: -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
  446. background-image: -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
  447. background-image: -webkit-gradient(
  448. linear,
  449. left bottom,
  450. left top,
  451. color-stop(0, #616161),
  452. color-stop(1, #333333)
  453. );
  454. color: #ccc;
  455. }
  456. div.panels-ipe-pseudobutton-container a:active {
  457. color: #ccc;
  458. }
  459. div.panels-ipe-control .panels-ipe-cancel:active {
  460. background-image: url(../images/icon-close.png), linear-gradient(bottom, #616161 0%, #333333 100%);
  461. background-image: url(../images/icon-close.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%);
  462. background-image: url(../images/icon-close.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
  463. background-image: url(../images/icon-close.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
  464. background-image: url(../images/icon-close.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
  465. background-image: url(../images/icon-close.png), -webkit-gradient(
  466. linear,
  467. left bottom,
  468. left top,
  469. color-stop(0, #616161),
  470. color-stop(1, #333333)
  471. );
  472. }
  473. div.panels-ipe-control .panels-ipe-save:active {
  474. background-image: url(../images/icon-save.png), linear-gradient(bottom, #616161 0%, #333333 100%);
  475. background-image: url(../images/icon-save.png), -o-linear-gradient(bottom, #616161 0%, #333333 100%);
  476. background-image: url(../images/icon-save.png), -moz-linear-gradient(bottom, #616161 0%, #333333 100%);
  477. background-image: url(../images/icon-save.png), -webkit-linear-gradient(bottom, #616161 0%, #333333 100%);
  478. background-image: url(../images/icon-save.png), -ms-linear-gradient(bottom, #616161 0%, #333333 100%);
  479. background-image: url(../images/icon-save.png), -webkit-gradient(
  480. linear,
  481. left bottom,
  482. left top,
  483. color-stop(0, #616161),
  484. color-stop(1, #333333)
  485. );
  486. }
  487. div.panels-ipe-control .panels-ipe-save,
  488. div.panels-ipe-control .panels-ipe-cancel,
  489. div.panels-ipe-control .panels-ipe-save:hover,
  490. div.panels-ipe-control .panels-ipe-cancel:hover,
  491. div.panels-ipe-control .panels-ipe-save:active,
  492. div.panels-ipe-control .panels-ipe-cancel:active {
  493. background-repeat: no-repeat;
  494. }
  495. div.panels-ipe-pseudobutton-container a.panels-ipe-startedit {
  496. padding-left: 34px;
  497. background: url(../images/icon-configure.png) no-repeat 10px 9px;
  498. }
  499. div.panels-ipe-pseudobutton-container a.panels-ipe-change-layout {
  500. padding-left: 34px;
  501. background: url(../images/icon-change-layout.png) no-repeat 10px 9px;
  502. }
  503. div.panels-ipe-button-container {
  504. margin: 0.3em 0.5em;
  505. text-align: center;
  506. }
  507. form#panels-ipe-edit-control-form {
  508. text-align: center;
  509. }
  510. .panels-ipe-dragbar-admin-title {
  511. font-size: 0.9em;
  512. }