guibik.less 9.4 KB

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