guibik.less 12 KB

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