guibik.less 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670
  1. @import 'elements.less';
  2. //@import 'elements.less';
  3. @import "gui.less";
  4. /** table */
  5. @grey:#E0E0E0;
  6. @greylite:#F4F4F4;
  7. /** GENERAL FORM */
  8. a{color:#0092D2;}
  9. table th{background-color: @grey;}
  10. .block,
  11. .item-list,
  12. .help-items ul,
  13. .form-item,
  14. .confirmation ul,
  15. .admin-list,
  16. .node-type-list,
  17. .admin-panel {
  18. border-width:0px;
  19. border-style:solid;
  20. border-color:#fff;
  21. }
  22. .text-format-wrapper .form-item {
  23. background:#F4F4F4;
  24. margin:0px 0px 10px;
  25. border-width:0;
  26. border-style:solid;
  27. border-color:#ddd;
  28. padding: 9px;
  29. }
  30. .form-item label {
  31. color:#1A1A1A;
  32. font-weight:normal;
  33. font-size:12px;
  34. text-transform: none;
  35. }
  36. input.form-autocomplete,
  37. input.form-text,
  38. textarea.form-textarea,
  39. select.form-select {
  40. padding:3px;
  41. border-width:1px;
  42. border-style:solid;
  43. border-color:#BFBFBF;
  44. background:#fff;
  45. color:#1A1A1A;
  46. max-width:100%;
  47. }
  48. input.form-autocomplete:disabled,
  49. input.form-text:disabled,
  50. textarea.form-textarea:disabled,
  51. select.form-select:disabled{
  52. padding:3px;
  53. border-width:0px;
  54. border-style:solid;
  55. border-color:none;
  56. background:#fff;
  57. color:#1A1A1A;
  58. max-width:100%;
  59. }
  60. input.form-autocomplete:hover:disabled,
  61. input.form-text:hover:disabled,
  62. input.form-file:hover:disabled,
  63. textarea.form-textarea:hover:disabled,
  64. select.form-select:hover:disabled,
  65. input.form-autocomplete:focus:disabled,
  66. input.form-text:focus:disabled,
  67. input.form-file:focus:disabled,
  68. input.form-checkbox:focus:disabled,
  69. input.form-radio:focus:disabled,
  70. textarea.form-textarea:focus:disabled,
  71. select.form-select:focus:disabled{
  72. color: inherit;;
  73. border-color: #fff;
  74. -webkit-box-shadow: #fff 0 0 0px;
  75. -moz-box-shadow: #fff 0 0 0px;
  76. box-shadow: #fff 0 0 0px;
  77. }
  78. span.autocomplete-deluxe-button{top:0.25em;}
  79. .fieldset {
  80. &.titled{margin:20px 0px 10px!important;}
  81. display:block;
  82. position:relative;
  83. min-height:28px;
  84. border: 0 solid #eee;
  85. border-top:1px solid #4C4C4C;
  86. legend{
  87. margin-top:-0.9em;
  88. }
  89. &.collapsible legend{
  90. a.fieldset-title{
  91. padding-right:15px;
  92. &:after{
  93. content:"-";
  94. padding:0 3px 2px;
  95. margin:-5px 0 0 10px;
  96. .rounded();
  97. color:#000;
  98. background-color: #FFF;
  99. /* font-size:9px;*/
  100. line-height:0;
  101. font-weight:bold;
  102. }
  103. &:hover{color:#fff; font-weight:bold;}
  104. }
  105. }
  106. &.collapsed legend{
  107. a.fieldset-title:after{
  108. content:"+";
  109. /* padding:2px 5px 3px;
  110. .rounded();
  111. color:#fff;
  112. background-color: #1A1A1A;
  113. */ }
  114. }
  115. }
  116. .tabledrag-processed{
  117. border:0 solid #fff;
  118. padding-bottom:2em;
  119. /* border-top:1px solid #4C4C4C;*/
  120. thead{
  121. background-color: transparent;
  122. label{color:inherit; text-shadow: none; padding:0 0 0 0.5em;}
  123. th{background-color: transparent; text-transform:uppercase; font-weight:bold;}
  124. }
  125. }
  126. .item-list h3,
  127. .block .block-title,
  128. .fieldset-title,
  129. .collapsible .fieldset-legend a{
  130. display:inline-block; width:auto;
  131. .rounded();
  132. font-size:12px;
  133. font-weight:normal;
  134. text-transform: uppercase;
  135. margin:0px;
  136. padding:2px 9px 3px;
  137. color:#fff;
  138. background:#666;
  139. }
  140. .block .block-content,
  141. .container-inline .fieldset-content,
  142. .fieldset-content {
  143. padding:10px 9px 9px;
  144. background:#F4F4F4;
  145. }
  146. /** popup description */
  147. .page-content .form-item .description {
  148. color:#fff;
  149. border-top:1px solid #E0E0E0;
  150. /* background: #1A1A1A url() no-repeat scroll top left;*/
  151. background:url(../images/popup.png) 50% 100% no-repeat;
  152. a{text-decoration: underline;}
  153. }
  154. li{list-style: none inside url();}
  155. /** NODE FORM */
  156. #user-profile-form, .node-form{
  157. label{text-transform: uppercase; font-size:1em;}
  158. .fieldset-title,
  159. .vertical-tab-button strong, .horizontal-tab-button strong{text-transform: uppercase; font-size:0.8em; font-weight:bold;}
  160. div.form-type-checkboxes{
  161. &>label, &>div.form-checkboxes{.inlineblock();}
  162. }
  163. .form-item-language, .form-type-select{
  164. &>label, &>select{.inlineblock();}
  165. &>label{width:35%;}
  166. &>select{max-width:60%;}
  167. }
  168. .form-type-textfield{
  169. &>label, &>input.form-text{.inlineblock(); margin:0; vertical-align:middle;}
  170. &>label{width:35%;}
  171. &>input.form-text{max-width:60%;}
  172. }
  173. .form-type-link-field{
  174. &>label, &>input.form-text{.inlineblock(); margin:0;}
  175. &>label{width:35%;}
  176. div{.inlineblock(); margin:0; width:100%;}
  177. &>div{width:60%;}
  178. input.form-text{max-width:100%;}
  179. }
  180. .form-phone-number{
  181. .form-item{.inlineblock();}
  182. input.form-text{width:100%;}
  183. }
  184. .autocomplete-deluxe-button{
  185. margin-top:-3px;
  186. }
  187. .addressfield-container-inline{
  188. &>div.form-item{.inlineblock(); margin:0; width:30%;}
  189. }
  190. fieldset.filter-wrapper{display:none;}
  191. input.fid.form-text{display:none;}
  192. .form-region-right{
  193. position:relative;
  194. fieldset.form-wrapper{max-width:100%; padding:0; margin:0;}
  195. .fieldset-wrapper{padding:0;}
  196. input.form-text{width:100%;}
  197. }
  198. tr.draggable{
  199. fieldset{
  200. legend{display:none;}
  201. .fieldset-content{
  202. padding:0;
  203. .date-padding{padding:0;}
  204. }
  205. }
  206. }
  207. .field-widget-term-reference-tree .form-item.form-type-checkbox-tree{
  208. display: block;
  209. .term-reference-tree{
  210. &>ul.term-reference-tree-level{.inlineblock(); padding:0 2em 0 0; min-width:30%;}
  211. .term-reference-track-list-container{.inlineblock(); border-left:1px solid #848484; padding:0 0 2em 1em;}
  212. }
  213. }
  214. }
  215. /** VERTICAL TABS */
  216. .vertical-tabs {
  217. background:@greylite;
  218. border:1px solid #BFBFBF;
  219. margin:0px 0px 10px;
  220. position:relative;
  221. }
  222. .vertical-tabs .fieldset-content,
  223. .vertical-tabs fieldset.titled .fieldset-content {
  224. border:0px;
  225. padding:10px;
  226. }
  227. .vertical-tabs .fieldset-content .fieldset-content {
  228. margin-top: 20px;
  229. }
  230. .vertical-tabs-list li a {
  231. display:block;
  232. text-shadow:#fff 0px 1px 0px;
  233. padding:5px 10px 4px 10px;
  234. border-bottom:1px solid #BFBFBF;
  235. border-right:1px solid #BFBFBF;
  236. color:#494949;
  237. background: @grey;
  238. }
  239. .vertical-tabs-list li.last a{
  240. border-bottom:0px solid #BFBFBF
  241. }
  242. .vertical-tabs-list .selected a ,
  243. .vertical-tabs-list li:hover a {
  244. background:@greylite;
  245. color:#1A1A1A;
  246. }
  247. .vertical-tabs-list .selected a{
  248. border-right:0 solid @greylite;
  249. }
  250. .vertical-tabs-list .summary { font-size:11px; }
  251. .page-admin table,
  252. .update tr.warning .version-recommended,
  253. .update tr.error .version-recommended{
  254. background-color: transparent;
  255. border:0px solid transparent;
  256. tr{
  257. border:0px solid transparent;
  258. }
  259. }
  260. .page-admin table tr{
  261. &.even, &.odd{
  262. td, h3 {background-color: transparent;}
  263. &:hover{ background: #D4EFEE;}
  264. &.ok{
  265. background-color: #d1f2a3;
  266. color:#000;
  267. }
  268. &.warning{
  269. background-color: #e9e2a6;
  270. color:#000;
  271. }
  272. &.error{
  273. background-color: #ffc4be;
  274. color:#000;
  275. }
  276. }
  277. &.even{
  278. background: #EFEFEF;
  279. }
  280. &.ok, &.ok:hover{
  281. color: #468847;//#036;
  282. background-color: #dff0d8;//#bdf;
  283. // td{
  284. // border-bottom:3px solid #d6e9c6;//#ace;
  285. // }
  286. }
  287. &.warning, &.warning:hover{
  288. color: #c09853;//#840;
  289. background-color: #fcf8e3;//#fe6;
  290. // td{
  291. // border-bottom: 3px solid #fbeed5;//#ed5;
  292. // }
  293. }
  294. &.error, &.error:hover{
  295. color: #b94a48;//#fff;
  296. background-color: #f2dede;//#e63;
  297. // td{
  298. // border-bottom: 3px solid #eed3d7;
  299. // }
  300. }
  301. // td{ border:0 solid #fff;}
  302. }
  303. .admin-block-description,
  304. .help-items ul li,
  305. .confirmation ul li,
  306. .item-list ul li,
  307. .prose .item-list li,
  308. .menu li {
  309. border-bottom:0 solid #f4f4f4;
  310. }
  311. form .form-actions {
  312. background:#eee;
  313. border:0 solid #ddd;
  314. padding:9px;
  315. }
  316. /** boutons */
  317. input.teaser-button,
  318. input.form-submit,
  319. .node-edit, .button, .node-delete{
  320. cursor:pointer;
  321. padding:0.3em 0.9em;
  322. color:#333;
  323. text-align:center;
  324. font-size:12px;
  325. font-weight:normal;
  326. border-width:1px;
  327. border-style:solid;
  328. border-color:#ddd #ddd #ccc;
  329. background:#bdf url();
  330. .rounded();
  331. &.field-add-more-submit{
  332. padding:0.1em 0.4em 0;
  333. font-size:10px;
  334. }
  335. }
  336. .node-edit, .button, .node-delete{font-size:10px;padding:0.1em 0.6em;}
  337. input.form-submit:hover,
  338. .node-edit:hover, .button:hover, .node-delete:hover{
  339. border-color:#ddd #ddd #ccc;
  340. -webkit-box-shadow:#ace 0px 0px 0px;
  341. color:#bdf;
  342. background-color: #848484;
  343. }
  344. input.button-yes:not(.field-add-more-submit), .node-edit{
  345. background-color: #CCFF2F;
  346. &:hover{
  347. color:#CCFF2F;
  348. }
  349. }
  350. input.button-no, .node-delete{
  351. background-color: #EA4B4A;
  352. &:hover{
  353. color:#EA4B4A;
  354. }
  355. }
  356. /** admin module */
  357. /**
  358. *
  359. * /!\ CUSTOM HERE /!\
  360. *
  361. * Provide better display for admin menu ==============================
  362. */
  363. body.admin-vertical #admin-menu{background:#222;background-image:none;}
  364. body.admin-vertical #admin-menu-wrapper{margin-left:35px!important;}
  365. body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important;}
  366. #admin-toolbar{z-index:1000!important;}
  367. /* --- */
  368. /**
  369. * VIEW
  370. */
  371. #views-ui-edit-form{
  372. div.changed {
  373. background-color: #FFF98E;
  374. }
  375. .views-ui-display-tab-bucket h3{
  376. font-weight:bold;
  377. background-color: #D8D8D8;
  378. }
  379. .defaulted, .views-ui-display-tab-bucket .views-display-setting.even, .views-ui-display-tab-bucket .views-display-setting.odd{ //:not(.overriden)
  380. color: #666;
  381. background-color: #E0E0E0;
  382. font-style: italic;
  383. /* font-weight:bold;*/
  384. a{color: #3F80B3}
  385. }
  386. .views-ui-display-tab-bucket.overridden .views-display-setting, .views-ui-display-tab-bucket.overridden .views-display-setting,
  387. .views-display-setting.overridden{ //:not(.overriden)
  388. &, &.even, &.odd{
  389. color: #7F7F7F;
  390. background-color: #F9F9F9;
  391. font-style: normal;
  392. /* font-weight:bold;*/
  393. a{color: #3188D1;}
  394. }
  395. }
  396. }
  397. .view{
  398. .view-header{
  399. padding:0.5em; margin:0 0 1em 0;
  400. border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
  401. font-weight:bold;
  402. }
  403. .pager{
  404. padding:1em 0; margin:0; text-align: right; height:auto;
  405. ul{
  406. .inlineblock(); padding:0;
  407. li{
  408. height:20px;
  409. a, span{padding:1px 10px 2px;}
  410. }
  411. }
  412. }
  413. // EXPOSED
  414. .view-filters{
  415. padding:1em 0; margin:0 0 1em 0;
  416. border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
  417. &>span.title, &>form{.inlineblock();width:auto;position:relative;vertical-align: top;}
  418. &>span.title{padding:0.7em 1em;}
  419. fieldset{
  420. .inlineblock(); padding:0 1em;
  421. .fieldset-content{padding:0;}
  422. legend{display:none;}
  423. }
  424. /* .views-exposed-form{ */
  425. label{font-weight:normal; font-size:0.75em;}
  426. .form-item{.inlineblock(); padding:0 0.5em 0 0;
  427. select, input{font-size:0.8em;}
  428. }
  429. /* }*/
  430. }
  431. // VBO
  432. fieldset#edit-select{
  433. padding:1em 0; margin:0 0 1em 0;
  434. border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
  435. legend, .fieldset-content{.inlineblock();}
  436. legend{
  437. width:auto;
  438. *{background-color: transparent;}
  439. }
  440. .fieldset-content{
  441. padding:0;
  442. select, input{font-size:0.8em;}
  443. }
  444. }
  445. .vbo-fieldset-select-all{
  446. width:50%; text-align:left;
  447. .form-item{.inlineblock();vertical-align:top;}
  448. em{padding:0 1em;}
  449. }
  450. }
  451. /** media browser */
  452. .view.inline-block-list{
  453. .views-row {
  454. .inlineblock(); vertical-align:top;
  455. padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3;
  456. .border-radius(5px,5px,5px,5px); border: 1px solid #ddd;
  457. .drop-shadow;
  458. .float-left{
  459. float:left;
  460. &>div{margin:0 10px 10px 0;}
  461. }
  462. }
  463. }
  464. *:focus{
  465. border: 1px solid #BDF!important;
  466. }
  467. /* Contain floats: h5bp.com/q */
  468. .clearfix:before, .clearfix:after { content: ""; display: table; }
  469. .clearfix:after { clear: both; }
  470. .clearfix { zoom: 1; }
  471. .path-admin-content-nodes span.icon { background-position:0px -30px; }
  472. /** admin view */
  473. .custom-admin{
  474. table{
  475. caption{ text-align: left; padding:2em 0 0 0; font-weight:bold;}
  476. th{line-height:1; background-color: @greylite!important;}
  477. td{padding-top:1em;padding-bottom:1em;}
  478. td.views-field-field-media{
  479. width:100px;
  480. img{max-width:100%; height:auto;}
  481. }
  482. &.has-caption{
  483. th, td.views-field-field-media, td.views-field-views-bulk-operations{
  484. background: @grey!important;
  485. }
  486. }
  487. td.views-field-title{ width:350px; }
  488. a.node-title-link{font-size:1.1em; padding:0 0 0.3em; display:inline-block;}
  489. td.views-field-field-people{width:100px;}
  490. }
  491. }
  492. #modalContent{
  493. }
  494. #modalContent div.ctools-modal-content{
  495. padding:5px;
  496. -moz-border-radius: 10px;
  497. -webkit-border-radius: 10px;
  498. border-radius: 10px;
  499. border: 1 solid #999;
  500. }
  501. #modalContent div.ctools-modal-content .modal-header,
  502. #modalContent div.ctools-modal-content .modal-header a,
  503. #modalContent div.ctools-modal-content .modal-header span{
  504. background-color: transparent; color:#000!important;
  505. }
  506. /** Messages. */
  507. .messages(){
  508. padding: 9px;
  509. margin: 0.5em 0 0;
  510. color: #3a87ad;//#360;
  511. background: #d9edf7;//#cf8;
  512. border: 1px solid #bce8f1;//#be7;
  513. -moz-border-radius: 5px;
  514. -webkit-border-radius: 5px;
  515. border-radius: 5px;
  516. &.warning {
  517. color: #c09853;//#840;
  518. background-color: #fcf8e3;//#fe6;
  519. border-color: #fbeed5;//#ed5;
  520. }
  521. &.error {
  522. color: #b94a48;//#fff;
  523. background-color: #f2dede;//#e63;
  524. border-color: #eed3d7;//#d52;
  525. }
  526. &.status {
  527. color: #468847;//#036;
  528. background-color: #dff0d8;//#bdf;
  529. border-color:#d6e9c6;//#ace;
  530. }
  531. }
  532. div.messages {
  533. .messages();
  534. }
  535. #better-messages-wrapper{
  536. background-color: rgba(255,255,255,0.6); .p(10px); .rounded(5px); .drop-shadow(0, 0, 6px, 0.4);
  537. #better-messages-default{
  538. .messages-label{display:none;}
  539. div.messages{
  540. .messages(); margin:0 0 10px 0;
  541. }
  542. .footer{
  543. border:none; padding:0; margin:0;
  544. a.message-close{
  545. background: #fff url('../images/close.png') no-repeat center center;
  546. width:15px; height:15px; .rounded(3px); display:block;
  547. }
  548. }
  549. }
  550. }
  551. body.page-admin #page img{
  552. max-width: 99999px;
  553. height: auto;
  554. }