guibik.less 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. @import 'elements.less';
  2. /** table */
  3. @grey:#E0E0E0;
  4. @greylite:#F4F4F4;
  5. /** GENERAL FORM */
  6. a{color:#0092D2;}
  7. table th{background-color: @grey;}
  8. .block,
  9. .item-list,
  10. .help-items ul,
  11. .form-item,
  12. .confirmation ul,
  13. .admin-list,
  14. .node-type-list,
  15. .admin-panel {
  16. border-width:0px;
  17. border-style:solid;
  18. border-color:#fff;
  19. }
  20. .text-format-wrapper .form-item {
  21. background:#F4F4F4;
  22. margin:0px 0px 10px;
  23. border-width:0;
  24. border-style:solid;
  25. border-color:#ddd;
  26. padding: 9px;
  27. }
  28. .form-item label {
  29. color:#1A1A1A;
  30. font-weight:normal;
  31. font-size:12px;
  32. text-transform: none;
  33. }
  34. input.form-autocomplete,
  35. input.form-text,
  36. textarea.form-textarea,
  37. select.form-select {
  38. padding:3px;
  39. border-width:1px;
  40. border-style:solid;
  41. border-color:#BFBFBF;
  42. background:#fff;
  43. color:#1A1A1A;
  44. max-width:100%;
  45. }
  46. span.autocomplete-deluxe-button{top:0.25em;}
  47. .fieldset {
  48. margin:0px 0px 10px;
  49. display:block;
  50. position:relative;
  51. min-height:28px;
  52. border: 0 solid #eee;
  53. }
  54. .item-list h3,
  55. .block .block-title,
  56. .fieldset-title,
  57. .collapsible .fieldset-legend a {
  58. display:block;
  59. font-size:14px;
  60. margin:0px;
  61. padding:4px 9px 5px;
  62. color:#1A1A1A;
  63. background:#E0E0E0;
  64. }
  65. .block .block-content,
  66. .container-inline .fieldset-content,
  67. .fieldset-content {
  68. padding:10px 9px 9px;
  69. background:#F4F4F4;
  70. }
  71. /** popup description */
  72. .page-content .form-item .description {
  73. color:#fff;
  74. border-top:1px solid #E0E0E0;
  75. /* background: #1A1A1A url() no-repeat scroll top left;*/
  76. background:url(../images/popup.png) 50% 100% no-repeat;
  77. a{text-decoration: underline;}
  78. }
  79. li{list-style: none inside url();}
  80. /** NODE FORM */
  81. .node-form{
  82. div.form-type-checkboxes>label, div.form-type-checkboxes>div.form-checkboxes{display:inline-block;}
  83. .form-item-language>label, .form-item-language>select{display: inline-block;}
  84. .form-type-textfield{
  85. &>label, &>input.form-text{display:inline-block; margin:0;}
  86. &>label{width:35%;}
  87. &>input.form-text{max-width:60%;}
  88. }
  89. fieldset.filter-wrapper{display:none;}
  90. input.fid.form-text{display:none;}
  91. .form-region-right{
  92. position:relative;
  93. fieldset.form-wrapper{max-width:100%; padding:0; margin:0;}
  94. .fieldset-wrapper{padding:0;}
  95. input.form-text{width:100%;}
  96. }
  97. tr.draggable{
  98. fieldset{
  99. legend{display:none;}
  100. .fieldset-content{
  101. padding:0;
  102. .date-padding{padding:0;}
  103. }
  104. }
  105. }
  106. }
  107. /** VERTICAL TABS */
  108. .vertical-tabs {
  109. background:@greylite;
  110. border:1px solid #BFBFBF;
  111. margin:0px 0px 10px;
  112. position:relative;
  113. }
  114. .vertical-tabs .fieldset-content,
  115. .vertical-tabs fieldset.titled .fieldset-content {
  116. border:0px;
  117. padding:10px;
  118. }
  119. .vertical-tabs .fieldset-content .fieldset-content {
  120. margin-top: 20px;
  121. }
  122. .vertical-tabs-list li a {
  123. display:block;
  124. text-shadow:#fff 0px 1px 0px;
  125. padding:5px 10px 4px 10px;
  126. border-bottom:1px solid #BFBFBF;
  127. border-right:1px solid #BFBFBF;
  128. color:#494949;
  129. background: @grey;
  130. }
  131. .vertical-tabs-list li.last a{
  132. border-bottom:0px solid #BFBFBF
  133. }
  134. .vertical-tabs-list .selected a ,
  135. .vertical-tabs-list li:hover a {
  136. background:@greylite;
  137. color:#1A1A1A;
  138. }
  139. .vertical-tabs-list .selected a{
  140. border-right:0 solid @greylite;
  141. }
  142. .vertical-tabs-list .summary { font-size:11px; }
  143. .page-admin table,
  144. .update tr.warning .version-recommended,
  145. .update tr.error .version-recommended{
  146. background-color: transparent;
  147. border:0px solid transparent;
  148. tr{
  149. border:0px solid transparent;
  150. }
  151. }
  152. .page-admin table tr.even{
  153. background: #EFEFEF;
  154. }
  155. .page-admin table tr{
  156. &.even, &.odd{
  157. td, h3 {background-color: transparent;}
  158. &:hover{ background: #D4EFEE;}
  159. &.ok{
  160. background-color: #d1f2a3;
  161. }
  162. &.warning{
  163. background-color: #e9e2a6;
  164. }
  165. &.error{
  166. background-color: #ffc4be;
  167. }
  168. }
  169. }
  170. .admin-block-description,
  171. .help-items ul li,
  172. .confirmation ul li,
  173. .item-list ul li,
  174. .prose .item-list li,
  175. .menu li {
  176. border-bottom:0 solid #f4f4f4;
  177. }
  178. form .form-actions {
  179. background:#eee;
  180. border:0 solid #ddd;
  181. padding:9px;
  182. }
  183. /** boutons */
  184. input.teaser-button,
  185. input.form-submit,
  186. .node-edit, .button, .node-delete{
  187. cursor:pointer;
  188. padding:0.3em 0.9em;
  189. color:#333;
  190. text-align:center;
  191. font-size:12px;
  192. font-weight:normal;
  193. border-width:1px;
  194. border-style:solid;
  195. border-color:#ddd #ddd #ccc;
  196. background:#bdf url();
  197. -moz-border-radius: 5px;
  198. -webkit-border-radius: 5px;
  199. border-radius: 5px;
  200. }
  201. .node-edit, .button, .node-delete{font-size:10px;padding:0.1em 0.6em;}
  202. input.form-submit:hover,
  203. .node-edit:hover, .button:hover, .node-delete:hover{
  204. border-color:#ddd #ddd #ccc;
  205. -webkit-box-shadow:#ace 0px 0px 0px;
  206. color:#bdf;
  207. background-color: #848484;
  208. }
  209. input.button-yes, .node-edit{
  210. background-color: #CCFF2F;
  211. &:hover{
  212. color:#CCFF2F;
  213. }
  214. }
  215. input.button-no, .node-delete{
  216. background-color: #EA4B4A;
  217. &:hover{
  218. color:#EA4B4A;
  219. }
  220. }
  221. /** admin module */
  222. /**
  223. *
  224. * /!\ CUSTOM HERE /!\
  225. *
  226. * Provide better display for admin menu ==============================
  227. */
  228. body.admin-vertical #admin-menu{background:#222;background-image:none;}
  229. body.admin-vertical #admin-menu-wrapper{margin-left:35px!important;}
  230. body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important;}
  231. #admin-toolbar{z-index:1000!important;}
  232. /* --- */
  233. /**
  234. * VIEW
  235. */
  236. #views-ui-edit-form{
  237. div.changed {
  238. background-color: #FFF98E;
  239. }
  240. .views-ui-display-tab-bucket h3{
  241. font-weight:bold;
  242. background-color: #D8D8D8;
  243. }
  244. .defaulted, .views-ui-display-tab-bucket .views-display-setting.even, .views-ui-display-tab-bucket .views-display-setting.odd{ //:not(.overriden)
  245. color: #666;
  246. background-color: #E0E0E0;
  247. font-style: italic;
  248. /* font-weight:bold;*/
  249. a{color: #3F80B3}
  250. }
  251. .views-ui-display-tab-bucket.overridden .views-display-setting, .views-ui-display-tab-bucket.overridden .views-display-setting,
  252. .views-display-setting.overridden{ //:not(.overriden)
  253. &, &.even, &.odd{
  254. color: #7F7F7F;
  255. background-color: #F9F9F9;
  256. font-style: normal;
  257. /* font-weight:bold;*/
  258. a{color: #3188D1;}
  259. }
  260. }
  261. }
  262. .view{
  263. .pager{
  264. padding:1em 0; margin:0; text-align: right; height:auto;
  265. ul{
  266. .inline-block; padding:0;
  267. li{
  268. height:20px;
  269. a, span{padding:1px 10px 2px;}
  270. }
  271. }
  272. }
  273. // EXPOSED
  274. .view-filters{
  275. padding:1em 0; margin:0 0 1em 0;
  276. border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
  277. &>span.title, &>form{.inline-block;width:auto;position:relative;vertical-align: top;}
  278. &>span.title{padding:0.7em 1em;}
  279. fieldset{
  280. .inline-block; padding:0 1em;
  281. .fieldset-content{padding:0;}
  282. legend{display:none;}
  283. }
  284. /* .views-exposed-form{ */
  285. label{font-weight:normal; font-size:0.75em;}
  286. .form-item{.inline-block; padding:0 0.5em 0 0;
  287. select, input{font-size:0.8em;}
  288. }
  289. /* }*/
  290. }
  291. // VBO
  292. fieldset#edit-select{
  293. padding:1em 0; margin:0 0 1em 0;
  294. border: 1px solid #CCC; .border-radius(5px,5px,5px,5px);
  295. legend, .fieldset-content{.inline-block;}
  296. legend{
  297. width:auto;
  298. *{background-color: transparent;}
  299. }
  300. .fieldset-content{
  301. padding:0;
  302. select, input{font-size:0.8em;}
  303. }
  304. }
  305. .vbo-fieldset-select-all{
  306. width:50%; text-align:left;
  307. .form-item{.inline-block;vertical-align:top;}
  308. em{padding:0 1em;}
  309. }
  310. }
  311. /** media browser */
  312. .view.inline-block-list{
  313. .views-row {
  314. .inline-block; vertical-align:top;
  315. padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3;
  316. .border-radius(5px,5px,5px,5px); border: 1px solid #ddd;
  317. .drop-shadow;
  318. .float-left{
  319. float:left;
  320. &>div{margin:0 10px 10px 0;}
  321. }
  322. }
  323. }
  324. *:focus{
  325. border: 1px solid #BDF!important;
  326. }
  327. /* Contain floats: h5bp.com/q */
  328. .clearfix:before, .clearfix:after { content: ""; display: table; }
  329. .clearfix:after { clear: both; }
  330. .clearfix { zoom: 1; }
  331. .path-admin-content-nodes span.icon { background-position:0px -30px; }
  332. /** admin view */
  333. .custom-admin{
  334. table{
  335. caption{ text-align: left; padding:2em 0 0 0; font-weight:bold;}
  336. th{line-height:1; background-color: @greylite!important;}
  337. td{padding-top:1em;padding-bottom:1em;}
  338. td.views-field-field-media{
  339. width:100px;
  340. img{max-width:100%; height:auto;}
  341. }
  342. &.has-caption{
  343. th, td.views-field-field-media, td.views-field-views-bulk-operations{
  344. background: @grey!important;
  345. }
  346. }
  347. td.views-field-title{ width:350px; }
  348. a.node-title-link{font-size:1.1em; padding:0 0 0.3em; display:inline-block;}
  349. td.views-field-field-people{width:100px;}
  350. }
  351. }
  352. #modalContent{
  353. }
  354. #modalContent div.ctools-modal-content{
  355. padding:5px;
  356. -moz-border-radius: 10px;
  357. -webkit-border-radius: 10px;
  358. border-radius: 10px;
  359. border: 1 solid #999;
  360. }
  361. #modalContent div.ctools-modal-content .modal-header,
  362. #modalContent div.ctools-modal-content .modal-header a,
  363. #modalContent div.ctools-modal-content .modal-header span{
  364. background-color: transparent; color:#000!important;
  365. }