panels_dnd.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. #panels-dnd-main {
  2. margin: 0.5em 0;
  3. }
  4. #panels-dnd-main div.panel-region {
  5. padding: 0 0 .5em 0;
  6. border: 1px dashed #ddd;
  7. background: #f8f8f8;
  8. -webkit-border-radius: 0.333em;
  9. -moz-border-radius: 0.333em;
  10. }
  11. #panels-dnd-main div.panel-region h2.label {
  12. color: #555;
  13. text-shadow: #fff 1px 1px 1px;
  14. text-align: center;
  15. font-size: 13pt;
  16. margin: 0 0 .5em 0;
  17. padding-right: 16px;
  18. vertical-align: middle;
  19. }
  20. #panels-dnd-main div.panel-region .pane-add {
  21. float: left;
  22. margin: 2px;
  23. background: #999;
  24. border: 1px solid #fff;
  25. }
  26. #panels-dnd-main div.panel-region .pane-add-link {
  27. position: relative;
  28. display: block;
  29. width: 16px;
  30. height: 16px;
  31. float: left;
  32. margin: 2px 2px 2px 4px;
  33. }
  34. div.panels-set-title-hide .panels-set-title {
  35. display: none !important;
  36. }
  37. /* Add Icon */
  38. #panels-dnd-main div.panel-region .pane-add-link {
  39. }
  40. #panels-dnd-main div.panel-region .pane-add-link img {
  41. display: none;
  42. }
  43. #panels-dnd-main div.panel-region .pane-add-link a.ctools-dropdown-image-link {
  44. border: none;
  45. width: 16px;
  46. height: 18px;
  47. float: left;
  48. background: url('../images/sprite.png') no-repeat 0 -1178px;
  49. /* background: url('../images/sprite.png') no-repeat -166px -582px; */
  50. }
  51. .panel-portlet {
  52. padding: 0em;
  53. background: #ffffff;
  54. border: 1px solid #bbb;
  55. }
  56. div.panels-set-title-hide .panel-pane-is-title {
  57. border: 1px solid #bbb;
  58. }
  59. .panel-pane-is-title {
  60. border: 2px solid #777;
  61. }
  62. /* Cog Icon */
  63. .panel-portlet .buttons a img {
  64. display: none;
  65. margin: 0;
  66. }
  67. .panel-portlet .buttons a.ctools-dropdown-image-link {
  68. border: none;
  69. width: 16px;
  70. height: 16px;
  71. margin: 0 5px 0 0;
  72. float: none;
  73. display: block;
  74. background: url('../images/sprite.png') no-repeat 0 -1178px;
  75. }
  76. #panels-dnd-main .panel-pane,
  77. #panels-dnd-main .helperclass {
  78. margin: .5em;
  79. }
  80. #panels-dnd-main-form .inline-icon-help {
  81. vertical-align: middle;
  82. margin: 2px 1px;
  83. }
  84. .panel-pane.hidden-pane {
  85. background: #f8f8f8;
  86. }
  87. .panel-portlet .pane-content {
  88. margin: .5em 0 .5em 0;
  89. padding: 0 .25em 0 .25em;
  90. display: none; /* initially hidden */
  91. }
  92. .panel-portlet .grab-title {
  93. width: 100%;
  94. height: 20px;
  95. margin: 0 0 0.5em 0;
  96. overflow: hidden;
  97. background: #b3b3b3;
  98. color: #fff;
  99. text-shadow: #555 1px 1px 1px;
  100. border-color: #999;
  101. font-weight: bold;
  102. }
  103. .panel-portlet .grabber {
  104. cursor: move;
  105. background: #b3b3b3 url('../images/bg-shade-medium.png') repeat-x 0 100%;
  106. }
  107. .panel-portlet.hidden-pane .grab-title {
  108. background-color: #888;
  109. }
  110. .panel-portlet .changed div.grab-title {
  111. background-color: #FFFFDD !important;
  112. border-bottom: 1px solid #3D9CD7 !important;
  113. color: black !important;
  114. }
  115. .panel-portlet .changed.hidden-pane div.grab-title {
  116. background-color: #B4B488 !important;
  117. border-bottom: 1px solid #3D9CD7 !important;
  118. }
  119. .panel-portlet .changed div.grab-title span.star {
  120. font-weight: bold;
  121. color: #E09010;
  122. }
  123. .panel-portlet .grabber:hover {
  124. color: #fff;
  125. background-color: #2F78A5;
  126. }
  127. .panel-portlet.hidden-pane .grab-title:hover {
  128. background-color: #666;
  129. }
  130. .panel-portlet .grabber:active {
  131. background-color: red;
  132. }
  133. .panel-portlet .grabber:hover,
  134. .panel-portlet .grabber:active {
  135. background: #858585 url('../images/bg-shade-dark.png') repeat-x 0 100%;
  136. color: #fff;
  137. text-shadow: #333 1px 1px 1px;
  138. border-color: #858585;
  139. }
  140. .panel-portlet .grab-title .text {
  141. margin-left: 3px;
  142. font-size: 90%;
  143. line-height: 20px;
  144. }
  145. .panel-portlet .buttons {
  146. float: right;
  147. padding: 0;
  148. margin: 0;
  149. }
  150. .panel-portlet .buttons input {
  151. margin: 0;
  152. padding: 0;
  153. display: inline;
  154. }
  155. .panel-portlet .buttons a img {
  156. margin: 2px 1px;
  157. }
  158. .panel-portlet .pane-title {
  159. font-size:110%;
  160. cursor: pointer;
  161. }
  162. .panel-portlet .panel-pane-collapsible {
  163. margin: 0;
  164. padding: 0;
  165. }
  166. .panel-portlet .toggle {
  167. float: left;
  168. width: 21px;
  169. height: 21px;
  170. cursor: pointer;
  171. background: url('../images/sky.png') no-repeat 6px -245px;
  172. }
  173. .panel-portlet .toggle-collapsed {
  174. background: url('../images/sky.png') no-repeat 6px -1021px;
  175. }
  176. /* CSS to guide a user to a place to drop */
  177. #panels-dnd-main .helperclass {
  178. border: 1px dashed red;
  179. }
  180. #panels-dnd-main .hoverclass {
  181. border: 1px solid red !important;
  182. }
  183. /* CSS for an area if something can be dropped in it */
  184. .panels-modal-content {
  185. background: #fff;
  186. color: #000;
  187. padding: 0;
  188. margin: 2px;
  189. border: 1px solid #000;
  190. width: 600px;
  191. text-align: left;
  192. }
  193. .panels-modal-content .modal-title {
  194. font-size: 120%;
  195. font-weight: bold;
  196. color: white;
  197. overflow: hidden;
  198. white-space: nowrap;
  199. }
  200. .panels-modal-content .modal-header {
  201. background-color: #2385c2;
  202. padding: 0 .25em 0 1em;
  203. }
  204. .panels-modal-content .modal-header a {
  205. color: white;
  206. float: right;
  207. }
  208. .panels-modal-content .modal-content {
  209. padding: 0 1em;
  210. overflow: auto;
  211. width: 575px;
  212. height: 400px;
  213. }
  214. .panels-modal-content .modal-form {
  215. }
  216. .panels-modal-content .form-checkboxes .form-item {
  217. float: left;
  218. width: 24%;
  219. }
  220. .panels-hidden,
  221. .panels-js-only {
  222. display: none;
  223. }
  224. a.close {
  225. color: white;
  226. }
  227. a.close:hover {
  228. text-decoration: none;
  229. }
  230. a.close img {
  231. position: relative;
  232. top: 1px;
  233. }
  234. .panels-section-title {
  235. clear: left;
  236. border-bottom: 1px solid #ddf;
  237. margin-bottom: .5em;
  238. text-align: left;
  239. }
  240. .panels-section-decorator {
  241. }
  242. .panels-add-content-modal .panels-modal-add-category {
  243. display: block;
  244. border-bottom: 1px solid white;
  245. padding-left: .5em;
  246. margin-left: -2px;
  247. position: relative;
  248. }
  249. .panels-add-content-modal .panels-modal-add-category.active {
  250. background: url(../images/arrow-active.png) center right no-repeat white;
  251. border-right: none;
  252. }
  253. .panels-add-content-modal {
  254. background: url(../images/bg-content-modal.png);
  255. height: 100%;
  256. margin: -1em;
  257. padding-top: 1em;
  258. padding-left: 175px;
  259. position: relative;
  260. }
  261. .panels-section-columns {
  262. height: 100%;
  263. overflow: auto;
  264. }
  265. .panels-section-column {
  266. width: 48%;
  267. float: left;
  268. }
  269. .panels-section-column .inside {
  270. padding: 0 1em;
  271. }
  272. .panels-section-column-categories {
  273. width: 173px;
  274. margin-left: -173px;
  275. }
  276. .panels-categories-description {
  277. padding: 0 1em;
  278. text-align: center;
  279. vertical-align: center;
  280. }
  281. * html .panels-section-column-categories {
  282. left: 173px;
  283. position: relative;
  284. }
  285. .panels-section-column-categories .panels-categories-box {
  286. border-top: 1px solid white;
  287. margin-bottom: 1em;
  288. }
  289. .panels-section-column-categories .inside {
  290. padding: 0;
  291. }
  292. .panels-section-column-categories .content-type-button {
  293. padding-left: 10px;
  294. }
  295. .panels-modal-add-category {
  296. color: #5b5b5b !important;
  297. font-weight: bold;
  298. line-height: 2em;
  299. }
  300. .panels-section {
  301. margin-bottom: 1em;
  302. }
  303. .panels-section-column .content-type-button {
  304. font-size: 8pt;
  305. line-height: 1em;
  306. overflow: hidden;
  307. text-align: left;
  308. }
  309. .content-type-button img {
  310. border: 2px solid white;
  311. float: left;
  312. }
  313. .content-type-button img:hover {
  314. border: 2px solid blue;
  315. }
  316. .content-type-button div {
  317. width: 85%;
  318. top: -5px;
  319. left: 2px;
  320. float: left;
  321. padding-left: 3px;
  322. padding-top: 5px;
  323. }
  324. #panels-preview .modal-throbber-wrapper {
  325. width: 100%;
  326. text-align: center;
  327. margin-left: auto;
  328. margin-right: auto;
  329. }
  330. /** modal forms CSS **/
  331. .panels-modal-content .form-item label {
  332. width: 8em;
  333. float: left;
  334. }
  335. .panels-modal-content .form-item label.option {
  336. width: auto;
  337. float: none;
  338. }
  339. .panels-modal-content .form-item .description {
  340. clear: left;
  341. }
  342. .panels-modal-content .form-item .description .tips {
  343. margin-left: 2em;
  344. }
  345. .panels-modal-content .no-float .form-item * {
  346. float: none;
  347. }
  348. .panels-modal-content .modal-form .no-float label {
  349. width: auto;
  350. }
  351. .panels-modal-content .modal-form fieldset,
  352. .panels-modal-content .modal-form .form-checkboxes {
  353. clear: left;
  354. }
  355. #edit-configuration-nid {
  356. clear: left;
  357. }
  358. .option-text-aligner .form-item {
  359. float: left;
  360. padding: .25em 1em .25em 0;
  361. margin: 0;
  362. }
  363. .option-text-aligner {
  364. clear: both;
  365. width: 100%;
  366. padding: 0;
  367. margin: 0;
  368. }
  369. #panels-dnd-main div.panel-pane div.ctools-dropdown-container-wrapper {
  370. margin-left: -158px;
  371. margin-top: -4px;
  372. }
  373. /*
  374. html.js div.panels-display-links div.ctools-dropdown-container {
  375. width: 275px;
  376. }
  377. html.js div.panels-display-links div.ctools-dropdown-container ul li li a {
  378. width: 250px;
  379. }
  380. html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  381. width: 270px;
  382. }
  383. */
  384. #panels-dnd-main .panel-pane .pane-title {
  385. padding: 0.25em 0.5em;
  386. }
  387. #panels-dnd-main .panel-pane .pane-title:after {
  388. font-size: 0.8em;
  389. color: crimson;
  390. letter-spacing: normal;
  391. display: block;
  392. }
  393. #panels-dnd-main .panel-pane.hidden-pane .pane-title:after {
  394. content: " status: hidden";
  395. }
  396. #panels-dnd-main .panel-pane.changed .pane-title:after {
  397. content: " status: changes not saved";
  398. }
  399. #panels-dnd-main .panel-pane.hidden-pane.changed .pane-title:after {
  400. content: " status: hidden & changed";
  401. }
  402. /* @end */
  403. /* @group CTools Dropdown */
  404. #panels-dnd-main .ctools-dropdown a.ctools-dropdown-text-link,
  405. html.js div.panels-display-links a.ctools-dropdown-text-link {
  406. background: url('../images/arrow-down-light.png') 0 3px no-repeat!important;
  407. padding-left: 12px;
  408. }
  409. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container,
  410. html.js div.panels-display-links div.ctools-dropdown-container {
  411. width: 160px!important;
  412. background: #fff url('../images/bg-shade-white-lrg.png') repeat-x 0 100%;
  413. border: solid 1px #ddd!important;
  414. margin: 0!important;
  415. /* padding: 0.5em!important; */
  416. -webkit-border-radius: 0.333em;
  417. -moz-border-radius: 0.333em;
  418. -webkit-box-shadow: 0.333em 0.333em 0.333em rgba(0, 0, 0, 0.25);
  419. font-size: 0.9em;
  420. font-weight: bold;
  421. }
  422. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li,
  423. html.js div.panels-display-links div.ctools-dropdown-container ul li {
  424. text-decoration: none;
  425. padding: 0;
  426. margin: 0;
  427. color: #555!important;
  428. text-shadow: #fff 1px 1px 1px;
  429. }
  430. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.text,
  431. html.js div.panels-display-links div.ctools-dropdown-container ul li span.text {
  432. font-style: normal;
  433. color: #000;
  434. font-weight: bold;
  435. }
  436. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a,
  437. html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  438. color: #555!important;
  439. font-weight: normal;
  440. width: auto;
  441. padding: 0 10px;
  442. }
  443. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.panels-text,
  444. html.js div.panels-display-links div.ctools-dropdown-container ul li span.panels-text {
  445. width: auto;
  446. padding: 0 10px;
  447. }
  448. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-italic,
  449. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-italic {
  450. font-style: italic;
  451. }
  452. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.dropdown-header,
  453. html.js div.panels-display-links div.ctools-dropdown-container ul li span.dropdown-header {
  454. background-color: #fefefe;
  455. padding: 0 10px;
  456. }
  457. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
  458. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
  459. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text,
  460. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text {
  461. width:auto;
  462. padding: 0 20px;
  463. }
  464. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container hr,
  465. html.js div.panels-display-links div.ctools-dropdown-container hr {
  466. border: 0;
  467. color: #ddd;
  468. background-color: #ddd;
  469. height: 1px;
  470. }
  471. /*
  472. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a:hover,
  473. html.js div.panels-display-links div.ctools-dropdown-container ul li a:hover {
  474. background: none!important;
  475. color: #000!important;
  476. }
  477. */
  478. /* @end */
  479. /* @group Modal */
  480. /* Account for the extra div coming from ctools_modal_form_render() */
  481. div.messages div.messages {
  482. background: none;
  483. border: none;
  484. margin: 0;
  485. padding: 0;
  486. -webkit-border-radius: 0;
  487. -moz-border-radius: 0;
  488. }
  489. div.ctools-modal-content .modal-header {
  490. background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
  491. color: #777;
  492. display: block;
  493. font-weight: 700;
  494. letter-spacing: normal;
  495. padding: 0.25em 1em;
  496. -moz-border-radius-topleft: 0.5em;
  497. -moz-border-radius-topright: 0.5em;
  498. -webkit-border-top-left-radius: 0.5em;
  499. -webkit-border-top-right-radius: 0.5em;
  500. }
  501. div.ctools-modal-content .modal-title {
  502. font-size: 120%;
  503. font-weight: bold;
  504. text-shadow: #fff 1px 1px 1px;
  505. color: #555;
  506. }
  507. div.ctools-modal-content a.close {
  508. color: #666;
  509. font-weight: normal;
  510. padding-left: 1.6em;
  511. background: url('../images/sprite.png') no-repeat -166px -1686px;
  512. }
  513. div.ctools-modal-content a.close img {
  514. display: none;
  515. }
  516. /** modal forms CSS **/
  517. div.ctools-modal-content .form-item label {
  518. width: 100%;
  519. float: none;
  520. clear: both;
  521. }
  522. div.ctools-modal-content .resizable-textarea {
  523. width: 100%;
  524. margin-left: 0;
  525. margin-right: 0;
  526. }
  527. div.ctools-modal-content {
  528. font-size: 12px;
  529. border: solid 1px #ddd;
  530. -webkit-border-radius: 0.5em;
  531. -moz-border-radius: 0.5em;
  532. -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  533. }
  534. #modalBackdrop {
  535. position: fixed!important;
  536. background-color: #000!important;
  537. }
  538. /* @end */
  539. /** Override that obnoxious float on throbber. **/
  540. #panels-dnd-main .progress-disabled {
  541. float: none;
  542. }
  543. #panels-dnd-main .progress-disabled + .ajax-progress {
  544. float: right;
  545. position: relative;
  546. top: -2em;
  547. }
  548. /** Override that obnoxious float on throbber. **/
  549. .panels-categories-box .progress-disabled {
  550. float: none;
  551. }
  552. .panels-categories-box .progress-disabled + .ajax-progress {
  553. float: right;
  554. position: relative;
  555. top: -2em;
  556. margin-bottom: -2em;
  557. }
  558. .panels-section-columns .progress-disabled {
  559. display: block;
  560. float: left;
  561. }
  562. .panels-section-columns .ajax-progress .throbber {
  563. float: right;
  564. position: relative;
  565. top: -2em;
  566. margin-bottom: -2em;
  567. }