panels_dnd.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685
  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, .panel-portlet .buttons button {
  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-bottom: 1em;
  258. padding-left: 175px;
  259. position: relative;
  260. }
  261. .panels-section-columns-quickfilter {
  262. padding-top: 1em;
  263. padding-left: 1em;
  264. padding-bottom: 1em;
  265. margin-bottom: 1em;
  266. background-color: #EEEEEE;
  267. }
  268. .panels-section-columns {
  269. height: 100%;
  270. overflow: auto;
  271. }
  272. .panels-section-column {
  273. width: 48%;
  274. float: left;
  275. }
  276. .panels-section-column .inside {
  277. padding: 0 1em;
  278. }
  279. .panels-section-column-categories {
  280. width: 173px;
  281. margin-left: -173px;
  282. }
  283. .panels-categories-description {
  284. padding: 0 1em;
  285. text-align: center;
  286. vertical-align: center;
  287. }
  288. * html .panels-section-column-categories {
  289. left: 173px;
  290. position: relative;
  291. }
  292. .panels-section-column-categories .panels-categories-box {
  293. border-top: 1px solid white;
  294. margin-bottom: 1em;
  295. }
  296. .panels-section-column-categories .inside {
  297. padding: 0;
  298. }
  299. .panels-section-column-categories .content-type-button {
  300. padding-left: 10px;
  301. }
  302. .panels-modal-add-category {
  303. color: #5b5b5b !important;
  304. font-weight: bold;
  305. line-height: 2em;
  306. }
  307. .panels-section {
  308. margin-bottom: 1em;
  309. }
  310. .panels-section-column .content-type-button {
  311. font-size: 8pt;
  312. line-height: 1em;
  313. overflow: hidden;
  314. text-align: left;
  315. }
  316. .content-type-button a {
  317. display: inline-block;
  318. width: 99%;
  319. }
  320. .content-type-button a:focus {
  321. border: 1px dotted black;
  322. }
  323. .content-type-button img {
  324. border: 2px solid white;
  325. }
  326. .content-type-button img:hover {
  327. border: 2px solid blue;
  328. }
  329. .content-type-button div,
  330. .content-type-button span {
  331. width: 85%;
  332. position: relative;
  333. top: -5px;
  334. left: 3px;
  335. }
  336. #panels-preview .modal-throbber-wrapper {
  337. width: 100%;
  338. text-align: center;
  339. margin-left: auto;
  340. margin-right: auto;
  341. }
  342. /** modal forms CSS **/
  343. .panels-modal-content .form-item label {
  344. width: 8em;
  345. float: left;
  346. }
  347. .panels-modal-content .form-item label.option {
  348. width: auto;
  349. float: none;
  350. }
  351. .panels-modal-content .form-item .description {
  352. clear: left;
  353. }
  354. .panels-modal-content .form-item .description .tips {
  355. margin-left: 2em;
  356. }
  357. .panels-modal-content .no-float .form-item * {
  358. float: none;
  359. }
  360. .panels-modal-content .modal-form .no-float label {
  361. width: auto;
  362. }
  363. .panels-modal-content .modal-form fieldset,
  364. .panels-modal-content .modal-form .form-checkboxes {
  365. clear: left;
  366. }
  367. #edit-configuration-nid {
  368. clear: left;
  369. }
  370. .option-text-aligner .form-item {
  371. float: left;
  372. padding: .25em 1em .25em 0;
  373. margin: 0;
  374. }
  375. .option-text-aligner {
  376. clear: both;
  377. width: 100%;
  378. padding: 0;
  379. margin: 0;
  380. }
  381. #panels-dnd-main div.panel-pane div.ctools-dropdown-container-wrapper {
  382. margin-left: -158px;
  383. margin-top: -4px;
  384. }
  385. /*
  386. html.js div.panels-display-links div.ctools-dropdown-container {
  387. width: 275px;
  388. }
  389. html.js div.panels-display-links div.ctools-dropdown-container ul li li a {
  390. width: 250px;
  391. }
  392. html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  393. width: 270px;
  394. }
  395. */
  396. #panels-dnd-main .panel-pane .pane-title {
  397. padding: 0.25em 0.5em;
  398. }
  399. #panels-dnd-main .panel-pane .pane-title:after {
  400. font-size: 0.8em;
  401. color: crimson;
  402. letter-spacing: normal;
  403. display: block;
  404. }
  405. #panels-dnd-main .panel-pane.hidden-pane .pane-title:after {
  406. content: " status: hidden";
  407. }
  408. #panels-dnd-main .panel-pane.changed .pane-title:after {
  409. content: " status: changes not saved";
  410. }
  411. #panels-dnd-main .panel-pane.hidden-pane.changed .pane-title:after {
  412. content: " status: hidden & changed";
  413. }
  414. /* @end */
  415. /* @group CTools Dropdown */
  416. #panels-dnd-main .ctools-dropdown a.ctools-dropdown-text-link,
  417. html.js div.panels-display-links a.ctools-dropdown-text-link {
  418. background: url('../images/arrow-down-light.png') 0 3px no-repeat!important;
  419. padding-left: 12px;
  420. }
  421. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container,
  422. html.js div.panels-display-links div.ctools-dropdown-container {
  423. width: 160px!important;
  424. background: #fff url('../images/bg-shade-white-lrg.png') repeat-x 0 100%;
  425. border: solid 1px #ddd!important;
  426. margin: 0!important;
  427. /* padding: 0.5em!important; */
  428. -webkit-border-radius: 0.333em;
  429. -moz-border-radius: 0.333em;
  430. -webkit-box-shadow: 0.333em 0.333em 0.333em rgba(0, 0, 0, 0.25);
  431. font-size: 0.9em;
  432. font-weight: bold;
  433. }
  434. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li,
  435. html.js div.panels-display-links div.ctools-dropdown-container ul li {
  436. text-decoration: none;
  437. padding: 0;
  438. margin: 0;
  439. color: #555!important;
  440. text-shadow: #fff 1px 1px 1px;
  441. }
  442. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.text,
  443. html.js div.panels-display-links div.ctools-dropdown-container ul li span.text {
  444. font-style: normal;
  445. color: #000;
  446. font-weight: bold;
  447. }
  448. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a,
  449. html.js div.panels-display-links div.ctools-dropdown-container ul li a {
  450. color: #555!important;
  451. font-weight: normal;
  452. width: auto;
  453. padding: 0 10px;
  454. }
  455. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.panels-text,
  456. html.js div.panels-display-links div.ctools-dropdown-container ul li span.panels-text {
  457. width: auto;
  458. padding: 0 10px;
  459. }
  460. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-italic,
  461. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-italic {
  462. font-style: italic;
  463. }
  464. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li span.dropdown-header,
  465. html.js div.panels-display-links div.ctools-dropdown-container ul li span.dropdown-header {
  466. background-color: #fefefe;
  467. padding: 0 10px;
  468. }
  469. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
  470. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu ul li a,
  471. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text,
  472. html.js div.panels-display-links div.ctools-dropdown-container ul li .panels-sub-menu span.panels-text {
  473. width:auto;
  474. padding: 0 20px;
  475. }
  476. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container hr,
  477. html.js div.panels-display-links div.ctools-dropdown-container hr {
  478. border: 0;
  479. color: #ddd;
  480. background-color: #ddd;
  481. height: 1px;
  482. }
  483. /*
  484. html.js #panels-dnd-main div.ctools-dropdown div.ctools-dropdown-container ul li a:hover,
  485. html.js div.panels-display-links div.ctools-dropdown-container ul li a:hover {
  486. background: none!important;
  487. color: #000!important;
  488. }
  489. */
  490. /* @end */
  491. /* @group Modal */
  492. /* Account for the extra div coming from ctools_modal_form_render() */
  493. div.messages div.messages {
  494. background: none;
  495. border: none;
  496. margin: 0;
  497. padding: 0;
  498. -webkit-border-radius: 0;
  499. -moz-border-radius: 0;
  500. }
  501. div.ctools-modal-content .modal-header {
  502. background: #fff url('../images/bg-shade-light.png') repeat-x bottom left;
  503. color: #777;
  504. display: block;
  505. font-weight: 700;
  506. letter-spacing: normal;
  507. padding: 0.25em 1em;
  508. -moz-border-radius-topleft: 0.5em;
  509. -moz-border-radius-topright: 0.5em;
  510. -webkit-border-top-left-radius: 0.5em;
  511. -webkit-border-top-right-radius: 0.5em;
  512. }
  513. div.ctools-modal-content .modal-title {
  514. font-size: 120%;
  515. font-weight: bold;
  516. text-shadow: #fff 1px 1px 1px;
  517. color: #555;
  518. }
  519. div.ctools-modal-content a.close {
  520. color: #666;
  521. font-weight: normal;
  522. padding-left: 1.6em;
  523. background: url('../images/sprite.png') no-repeat -166px -1686px;
  524. }
  525. div.ctools-modal-content a.close img {
  526. display: none;
  527. }
  528. /** modal forms CSS **/
  529. div.ctools-modal-content .form-item label {
  530. width: 100%;
  531. float: none;
  532. clear: both;
  533. }
  534. div.ctools-modal-content .resizable-textarea {
  535. width: 100%;
  536. margin-left: 0;
  537. margin-right: 0;
  538. }
  539. div.ctools-modal-content {
  540. font-size: 12px;
  541. border: solid 1px #ddd;
  542. -webkit-border-radius: 0.5em;
  543. -moz-border-radius: 0.5em;
  544. -webkit-box-shadow: -1em 1em 1em rgba(0, 0, 0, 0.5);
  545. }
  546. #modalBackdrop {
  547. position: fixed!important;
  548. background-color: #000!important;
  549. }
  550. /* @end */
  551. /** Override that obnoxious float on throbber. **/
  552. #panels-dnd-main .progress-disabled {
  553. float: none;
  554. }
  555. #panels-dnd-main .progress-disabled + .ajax-progress {
  556. float: right;
  557. position: relative;
  558. top: -2em;
  559. }
  560. /** Override that obnoxious float on throbber. **/
  561. .panels-categories-box .progress-disabled {
  562. float: none;
  563. }
  564. .panels-categories-box .progress-disabled + .ajax-progress {
  565. float: right;
  566. position: relative;
  567. top: -2em;
  568. margin-bottom: -2em;
  569. }
  570. .panels-section-columns .progress-disabled {
  571. display: block;
  572. float: left;
  573. }
  574. .panels-section-columns .ajax-progress .throbber {
  575. float: right;
  576. position: relative;
  577. top: -2em;
  578. margin-bottom: -2em;
  579. }