global.css 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473
  1. /* FONTS */
  2. @font-face {
  3. font-family: 'OpenSans';
  4. src: local('fonts/openSans.woff') format('woff');
  5. }
  6. * {
  7. margin: 0;
  8. padding: 0;
  9. }
  10. html, body {
  11. height: 100%;
  12. font-size: 95%;
  13. font-family: "Cantarell", "Helvetica", "Arial", "sans-serif";
  14. }
  15. /* LIENS */
  16. a {
  17. color: #0062BE;
  18. text-decoration: none;
  19. }
  20. a:hover {
  21. text-decoration: underline;
  22. }
  23. /* LISTES */
  24. ul, ol, dl {
  25. margin: 10px 0 10px 30px;
  26. line-height: 190%;
  27. }
  28. dd {
  29. margin: 0 0 10px 30px;
  30. }
  31. /* TITRES */
  32. h1, h2, h3 {
  33. min-height: 40px;
  34. margin: 15px 0 5px;
  35. line-height: 40px;
  36. }
  37. /* IMG */
  38. img {
  39. max-width: 100%;
  40. vertical-align: middle;
  41. }
  42. a img {
  43. border: none;
  44. }
  45. /* FORMULAIRES */
  46. legend {
  47. display: block;
  48. width: 100%;
  49. margin: 20px 0 5px;
  50. padding: 5px 0;
  51. border-bottom: 1px solid #ddd;
  52. font-size: 150%;
  53. clear: both;
  54. }
  55. label {
  56. display: block;
  57. min-height: 25px;
  58. padding: 5px 0;
  59. font-size: 14px;
  60. line-height: 25px;
  61. cursor: pointer;
  62. }
  63. input, select, textarea {
  64. display: inline-block;
  65. max-width: 100%;
  66. min-height: 25px;
  67. padding: 5px;
  68. background: #fdfdfd;
  69. border: 1px solid #bbb;
  70. border-radius: 3px;
  71. color: #666;
  72. line-height: 25px;
  73. vertical-align: middle;
  74. box-shadow: 0 2px 2px #eee inset;
  75. }
  76. input[type="radio"],
  77. input[type="checkbox"] {
  78. width: 15px;
  79. min-height: 15px;
  80. }
  81. input:focus, select:focus, textarea:focus {
  82. color: #0062BE;
  83. border-color: #33BBFF;
  84. box-shadow: 0 2px 2px #DDDDFF inset;
  85. }
  86. .form-group {
  87. margin: 0;
  88. clear: both;
  89. }
  90. .form-group.form-actions {
  91. min-width: 250px;
  92. padding: 5px 0;
  93. background: #f4f4f4;
  94. border-top: 1px solid #ddd;
  95. }
  96. .form-group.form-actions .btn {
  97. margin: 0 10px;
  98. }
  99. .form-group .group-name {
  100. display: block;
  101. float: left;
  102. width: 200px;
  103. padding: 10px 0;
  104. text-align: right;
  105. }
  106. .form-group .group-controls {
  107. min-width: 250px;
  108. min-height: 25px;
  109. margin: 0 0 0 220px;
  110. padding: 5px 0;
  111. }
  112. .form-group .group-controls .control {
  113. display: block;
  114. min-height: 30px;
  115. padding: 5px 0;
  116. line-height: 25px;
  117. font-size: 14px;
  118. }
  119. .stick {
  120. display: inline-block;
  121. white-space: nowrap;
  122. font-size: 0px;
  123. vertical-align: middle;
  124. }
  125. .stick input {
  126. border-radius: 0;
  127. font-size: 14px;
  128. }
  129. .stick .btn {
  130. border-radius: 0;
  131. font-size: 14px;
  132. }
  133. .stick .btn:first-child,
  134. .stick input:first-child {
  135. border-radius: 3px 0 0 3px;
  136. }
  137. .stick .btn:last-child,
  138. .stick input:last-child {
  139. border-radius: 0 3px 3px 0;
  140. }
  141. .stick .btn + .btn,
  142. .stick .btn + input,
  143. .stick input + .btn,
  144. .stick input + input {
  145. border-left: none;
  146. }
  147. .stick input + .btn {
  148. border-top: 1px solid #bbb;
  149. }
  150. .stick .btn + .dropdown > .btn {
  151. border-left: none;
  152. border-radius: 0 3px 3px 0;
  153. }
  154. .stick .btn + .dropdown a {
  155. font-size: 12px;
  156. }
  157. .btn {
  158. display: inline-block;
  159. min-height: 37px;
  160. min-width: 15px;
  161. padding: 5px 10px;
  162. background: #fff;
  163. background: linear-gradient(#fff, #eee);
  164. border-radius: 3px;
  165. border: 1px solid #ddd;
  166. border-bottom: 1px solid #aaa;
  167. border-right: 1px solid #aaa;
  168. color: #666;
  169. text-shadow: 0px -1px 0 #ddd;
  170. line-height: 20px;
  171. vertical-align: middle;
  172. cursor: pointer;
  173. }
  174. a.btn {
  175. min-height: 25px;
  176. line-height: 25px;
  177. }
  178. .btn:hover {
  179. background: #f0f0f0;
  180. background: linear-gradient(#f8f8f8, #f0f0f0);
  181. text-decoration: none;
  182. }
  183. .btn.active,
  184. .btn:active {
  185. box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa;
  186. background: #eee;
  187. }
  188. .btn.btn-important {
  189. background: #0084CC;
  190. background: linear-gradient(#0084CC, #0045CC);
  191. color: #fff;
  192. border: 1px solid #0062B7;
  193. text-shadow: 0px -1px 0 #aaa;
  194. }
  195. .btn.btn-important:hover {
  196. background: linear-gradient(#0066CC, #0045CC);
  197. }
  198. .btn.btn-important:active {
  199. background: #0044CB;
  200. box-shadow: none;
  201. }
  202. .btn.btn-attention {
  203. background: #E95B57;
  204. background: linear-gradient(#E95B57, #BD362F);
  205. color: #fff;
  206. border: 1px solid #C44742;
  207. text-shadow: 0px -1px 0px #666;
  208. }
  209. .btn.btn-attention:hover {
  210. background: linear-gradient(#D14641, #BD362F);
  211. }
  212. .btn.btn-attention:active {
  213. background: #BD362F;
  214. box-shadow: none;
  215. }
  216. /* NAVIGATION */
  217. .nav.nav-list .nav-header,
  218. .nav.nav-list .item {
  219. display: block;
  220. height: 35px;
  221. line-height: 35px;
  222. }
  223. .nav.nav-list .item:hover {
  224. background: #fafafa;
  225. }
  226. .nav.nav-list .item:hover a {
  227. color: #003388;
  228. }
  229. .nav.nav-list .item.active {
  230. background: #0062BE;
  231. color: #fff;
  232. }
  233. .nav.nav-list .item.active a {
  234. color: #fff;
  235. }
  236. .nav.nav-list .disable {
  237. color: #aaa;
  238. background: #fafafa;
  239. text-align: center;
  240. }
  241. .nav.nav-list .item > * {
  242. display: block;
  243. padding: 0 10px;
  244. overflow: hidden;
  245. white-space: nowrap;
  246. text-overflow: ellipsis;
  247. }
  248. .nav.nav-list a:hover {
  249. text-decoration: none;
  250. }
  251. .nav.nav-list .nav-header {
  252. padding: 0 10px;
  253. color: #888;
  254. background: #f4f4f4;
  255. border-bottom: 1px solid #ddd;
  256. font-weight: bold;
  257. text-shadow: 0 0 1px #ddd;
  258. }
  259. .nav.nav-list .separator {
  260. display: block;
  261. height: 0;
  262. margin: 5px 0;
  263. border-bottom: 1px solid #ddd;
  264. }
  265. .nav.nav-list .nav-form {
  266. padding: 3px;
  267. text-align: center;
  268. }
  269. .nav-head {
  270. display: block;
  271. margin: 0;
  272. background: #fff;
  273. background: linear-gradient(#fff, #f0f0f0);
  274. border-bottom: 1px solid #ddd;
  275. text-align: right;
  276. }
  277. .nav-head .item {
  278. display: inline-block;
  279. padding: 5px 10px;
  280. }
  281. /* HORIZONTAL-LIST */
  282. .horizontal-list {
  283. display: table;
  284. table-layout: fixed;
  285. margin: 0;
  286. padding: 0;
  287. width: 100%;
  288. }
  289. .horizontal-list .item {
  290. display: table-cell;
  291. vertical-align: middle;
  292. }
  293. /* DROPDOWN */
  294. .dropdown {
  295. position: relative;
  296. display: inline-block;
  297. }
  298. .dropdown .dropdown-target {
  299. display: none;
  300. }
  301. .dropdown .dropdown-menu {
  302. display: none;
  303. min-width: 200px;
  304. margin: 5px 0 0;
  305. padding: 5px 0;
  306. position: absolute;
  307. right: 0px;
  308. background: #fff;
  309. border: 1px solid #ddd;
  310. border-radius: 5px;
  311. text-align: left;
  312. box-shadow: 3px 3px 3px #ddd;
  313. }
  314. .dropdown .dropdown-menu .dropdown-header {
  315. display: block;
  316. padding: 0 5px;
  317. color: #888;
  318. font-weight: bold;
  319. font-size: 14px;
  320. line-height: 30px;
  321. }
  322. .dropdown .dropdown-menu .item {
  323. display: block;
  324. height: 30px;
  325. font-size: 90%;
  326. line-height: 30px;
  327. }
  328. .dropdown .dropdown-menu .item > * {
  329. display: block;
  330. padding: 0 25px;
  331. line-height: 30px;
  332. }
  333. .dropdown .dropdown-menu .item:hover {
  334. background: #0062BE;
  335. color: #fff;
  336. }
  337. .dropdown .dropdown-menu .item:hover > * {
  338. color: #fff;
  339. text-decoration: none;
  340. }
  341. .dropdown .dropdown-menu .separator {
  342. display: block;
  343. height: 0;
  344. margin: 5px 0;
  345. border-bottom: 1px solid #ddd;
  346. }
  347. .dropdown .dropdown-target:target ~ .dropdown-menu {
  348. display: block;
  349. z-index: 10;
  350. }
  351. .dropdown .dropdown-close {
  352. display: inline-block;
  353. position: absolute;
  354. top: -16px; right: -16px;
  355. width: 16px;
  356. height: 16px;
  357. padding: 5px;
  358. background: #fff;
  359. border-radius: 50px;
  360. border: 1px solid #ddd;
  361. line-height: 16px;
  362. text-align: center;
  363. }
  364. .dropdown .dropdown-close:hover {
  365. background: #f4f4f4;
  366. }
  367. /* ALERTS */
  368. .alert {
  369. display: block;
  370. width: 90%;
  371. margin: 15px auto;
  372. padding: 10px 15px;
  373. background: #f4f4f4;
  374. border: 1px solid #ccc;
  375. border-right: 1px solid #aaa;
  376. border-bottom: 1px solid #aaa;
  377. border-radius: 5px;
  378. color: #aaa;
  379. text-shadow: 0 0 1px #eee;
  380. box-shadow: 1px 1px 3px #aaa inset;
  381. }
  382. .alert .alert-head {
  383. margin: 0;
  384. font-weight: bold;
  385. font-size: 110%;
  386. }
  387. /* ICONES */
  388. .icon {
  389. display: inline-block;
  390. width: 16px;
  391. height: 16px;
  392. vertical-align: middle;
  393. line-height: 16px;
  394. background: center center no-repeat;
  395. }
  396. .icon.i_refresh {
  397. background-image: url("icons/refresh.svg");
  398. }
  399. .icon.i_bookmark {
  400. background-image: url("icons/starred.svg");
  401. }
  402. .icon.i_not_bookmark {
  403. background-image: url("icons/unstarred.svg");
  404. }
  405. .icon.i_read {
  406. background-image: url("icons/read.svg");
  407. }
  408. .icon.i_unread {
  409. background-image: url("icons/unread.svg");
  410. }
  411. .icon.i_all {
  412. background-image: url("icons/all.svg");
  413. }
  414. .icon.i_close {
  415. background-image: url("icons/close.svg");
  416. }
  417. .icon.i_search {
  418. background-image: url("icons/search.svg");
  419. }
  420. .icon.i_configure {
  421. background-image: url("icons/configure.svg");
  422. }
  423. .icon.i_login {
  424. background-image: url("icons/login.svg");
  425. }
  426. .icon.i_logout {
  427. background-image: url("icons/logout.svg");
  428. }
  429. .icon.i_add {
  430. background-image: url("icons/add.svg");
  431. }
  432. .icon.i_link {
  433. background-image: url("icons/link.svg");
  434. }
  435. .icon.i_down {
  436. background-image: url("icons/down.svg");
  437. }
  438. .icon.i_up {
  439. background-image: url("icons/up.svg");
  440. }
  441. .icon.i_help {
  442. background-image: url("icons/help.svg");
  443. }
  444. .icon.i_note {
  445. background-image: url("icons/note.svg");
  446. }
  447. .icon.i_note_empty {
  448. background-image: url("icons/note_empty.svg");
  449. }
  450. .icon.i_category {
  451. background-image: url("icons/category.svg");
  452. }