styles.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. /**
  2. * Primary Drupal Styles
  3. * Author: Bachir Soussi Chiadmi
  4. */
  5. body {
  6. font-size: 16px;
  7. font-family: "aileron", Arial, "MS Trebuchet", sans-serif; }
  8. h1 {
  9. font-size: 1.6em; }
  10. h2 {
  11. font-size: 1.5em; }
  12. h3 {
  13. font-size: 1.4em; }
  14. h4 {
  15. font-size: 1.3em; }
  16. h5 {
  17. font-size: 1.2em; }
  18. h6 {
  19. font-size: 1.1em; }
  20. input {
  21. font-family: Arial, "MS Trebuchet", sans-serif;
  22. font-size: 0.8em; }
  23. /** layout */
  24. .footer-block .region, .header-block {
  25. display: inline-block;
  26. vertical-align: top; }
  27. #header, #main, #footer {
  28. padding: 0; }
  29. #container {
  30. width: 1024px;
  31. margin: 0 auto; }
  32. #header h1 {
  33. display: block;
  34. height: 335px;
  35. background-image: url(../../images/logo.png);
  36. background-size: contain;
  37. background-position: center;
  38. background-repeat: no-repeat;
  39. text-indent: -2000px;
  40. overflow: hidden;
  41. margin: 0; }
  42. #header h2 {
  43. text-align: center;
  44. color: #20c498; }
  45. #thematique-anchor-links {
  46. padding: 1em 0; }
  47. #thematique-anchor-links ul {
  48. display: -ms-flexbox;
  49. display: flex;
  50. -ms-flex-flow: row nowrap;
  51. flex-flow: row nowrap;
  52. -ms-flex-pack: justify;
  53. justify-content: space-between;
  54. padding: 0;
  55. margin: 0; }
  56. #thematique-anchor-links ul li {
  57. list-style: none;
  58. padding: 0 1em;
  59. margin: 0; }
  60. #thematique-anchor-links ul li a {
  61. text-decoration: none;
  62. font-weight: 600; }
  63. #thematique-anchor-links ul li a span {
  64. display: block; }
  65. #thematique-anchor-links ul li a.en_attente {
  66. color: #ddd; }
  67. #thematique-anchor-links ul li a.node-32 {
  68. color: #2f82ff; }
  69. #thematique-anchor-links ul li a.node-14 {
  70. color: #ff0000; }
  71. #thematique-anchor-links ul li a.node-38 {
  72. color: #88aa00; }
  73. #thematique-anchor-links ul li a.node-3 {
  74. color: #ff6600; }
  75. #thematique-anchor-links ul li a.node-20 {
  76. color: #ff2ad4; }
  77. #thematique-anchor-links ul li a.node-26 {
  78. color: #8800aa; }
  79. .node-thematique {
  80. background-position: center;
  81. background-size: contain;
  82. background-repeat: no-repeat; }
  83. .node-thematique.node-32 {
  84. background-image: url(../../images/fond-theme-0.png); }
  85. .node-thematique.node-32 > h2,
  86. .node-thematique.node-32 .group-video .field-name-field-description h3,
  87. .node-thematique.node-32 .group-description .field-name-field-ecouter,
  88. .node-thematique.node-32 .node-documentair .field-name-field-doc,
  89. .node-thematique.node-32 .node-episode .field-name-title-field {
  90. color: #2f82ff; }
  91. .node-thematique.node-14 {
  92. background-image: url(../../images/fond-theme-0.png); }
  93. .node-thematique.node-14 > h2,
  94. .node-thematique.node-14 .group-video .field-name-field-description h3,
  95. .node-thematique.node-14 .group-description .field-name-field-ecouter,
  96. .node-thematique.node-14 .node-documentair .field-name-field-doc,
  97. .node-thematique.node-14 .node-episode .field-name-title-field {
  98. color: #ff0000; }
  99. .node-thematique.node-38 {
  100. background-image: url(../../images/fond-theme-0.png); }
  101. .node-thematique.node-38 > h2,
  102. .node-thematique.node-38 .group-video .field-name-field-description h3,
  103. .node-thematique.node-38 .group-description .field-name-field-ecouter,
  104. .node-thematique.node-38 .node-documentair .field-name-field-doc,
  105. .node-thematique.node-38 .node-episode .field-name-title-field {
  106. color: #88aa00; }
  107. .node-thematique.node-3 {
  108. background-image: url(../../images/fond-theme-0.png); }
  109. .node-thematique.node-3 > h2,
  110. .node-thematique.node-3 .group-video .field-name-field-description h3,
  111. .node-thematique.node-3 .group-description .field-name-field-ecouter,
  112. .node-thematique.node-3 .node-documentair .field-name-field-doc,
  113. .node-thematique.node-3 .node-episode .field-name-title-field {
  114. color: #ff6600; }
  115. .node-thematique.node-20 {
  116. background-image: url(../../images/fond-theme-0.png); }
  117. .node-thematique.node-20 > h2,
  118. .node-thematique.node-20 .group-video .field-name-field-description h3,
  119. .node-thematique.node-20 .group-description .field-name-field-ecouter,
  120. .node-thematique.node-20 .node-documentair .field-name-field-doc,
  121. .node-thematique.node-20 .node-episode .field-name-title-field {
  122. color: #ff2ad4; }
  123. .node-thematique.node-26 {
  124. background-image: url(../../images/fond-theme-0.png); }
  125. .node-thematique.node-26 > h2,
  126. .node-thematique.node-26 .group-video .field-name-field-description h3,
  127. .node-thematique.node-26 .group-description .field-name-field-ecouter,
  128. .node-thematique.node-26 .node-documentair .field-name-field-doc,
  129. .node-thematique.node-26 .node-episode .field-name-title-field {
  130. color: #8800aa; }
  131. .node-thematique > h2 {
  132. font-size: 3em;
  133. font-weight: 400; }
  134. .node-thematique .content {
  135. letter-spacing: -0.25em; }
  136. .node-thematique .content .field-name-field-emvideo img {
  137. width: 100%; }
  138. .node-thematique .content > * {
  139. letter-spacing: normal; }
  140. .node-thematique .content article.main {
  141. display: inline-block;
  142. vertical-align: top;
  143. width: 69.5%; }
  144. .node-thematique .content article.main .field-name-body {
  145. position: relative;
  146. z-index: 3; }
  147. .node-thematique .content article.main .field-name-body > * {
  148. padding: 0 1em 0 0.2em; }
  149. .node-thematique .content article.main .field-name-body .summary {
  150. position: relative; }
  151. .node-thematique .content article.main .field-name-body .summary p {
  152. font-size: 1.3em; }
  153. .node-thematique .content article.main .field-name-body .value {
  154. position: absolute;
  155. height: 0;
  156. margin-bottom: 0;
  157. transition: height,margin-bottom 0.5s ease-in-out;
  158. background-color: #fff;
  159. overflow: hidden; }
  160. .node-thematique .content article.main .field-name-body:hover .summary {
  161. background-color: #fff; }
  162. .node-thematique .content article.main .field-name-body:hover .value {
  163. height: 400px;
  164. margin-bottom: 1em; }
  165. .node-thematique .content article.main .field-name-body p {
  166. padding: 0 0 1em;
  167. margin: 0; }
  168. .node-thematique .content article.main .group-video {
  169. position: relative; }
  170. .node-thematique .content article.main .group-video .group-description {
  171. cursor: pointer;
  172. box-sizing: border-box;
  173. position: absolute;
  174. z-index: 2;
  175. top: 0;
  176. left: 0;
  177. width: 90%;
  178. height: 80%;
  179. margin: 5%;
  180. padding: 5%;
  181. background-color: rgba(255, 255, 255, 0);
  182. transition: background-color 0.3s ease-in-out; }
  183. .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
  184. font-size: 1em;
  185. font-weight: 500;
  186. background-color: rgba(255, 255, 255, 0.9);
  187. transition: background-color 0.3s ease-in-out;
  188. display: inline-block; }
  189. .node-thematique .content article.main .group-video .group-description .field-name-field-description {
  190. opacity: 0;
  191. transition: opacity 0.3s ease-in-out; }
  192. .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 {
  193. font-weight: 500;
  194. font-size: 2em; }
  195. .node-thematique .content article.main .group-video:hover .group-description {
  196. background-color: rgba(255, 255, 255, 0.9); }
  197. .node-thematique .content article.main .group-video:hover .group-description .field-name-field-ecouter {
  198. background-color: rgba(255, 255, 255, 0); }
  199. .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
  200. opacity: 1; }
  201. .node-thematique .content aside.right {
  202. display: inline-block;
  203. vertical-align: top;
  204. width: 30.5%; }
  205. .node-thematique .content aside.right .field-name-field-eclairages {
  206. padding-left: 1em; }
  207. .node-thematique .content aside.right .node-documentair {
  208. padding-bottom: 1em; }
  209. .node-thematique .content aside.right .node-documentair .content {
  210. position: relative; }
  211. .node-thematique .content aside.right .node-documentair .content .group-txt {
  212. cursor: pointer;
  213. box-sizing: border-box;
  214. position: absolute;
  215. z-index: 2;
  216. overflow: hidden;
  217. top: 0;
  218. left: 0;
  219. width: 90%;
  220. max-height: 80%;
  221. margin: 5%;
  222. padding: 5%;
  223. background-color: rgba(255, 255, 255, 0.9); }
  224. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
  225. font-size: 1em;
  226. font-weight: 500; }
  227. .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
  228. font-size: 2em;
  229. font-weight: 600;
  230. height: 1px;
  231. overflow: hidden;
  232. transition: height 0.3s ease-in-out; }
  233. .node-thematique .content aside.right .node-documentair .content:hover .group-txt .field-name-title-field {
  234. height: 70%; }
  235. .node-thematique .content aside.bottom {
  236. padding-top: 1em; }
  237. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
  238. display: -ms-flexbox;
  239. display: flex;
  240. -ms-flex-flow: row nowrap;
  241. flex-flow: row nowrap;
  242. -ms-flex-pack: justify;
  243. justify-content: space-between; }
  244. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
  245. display: block;
  246. width: 19%; }
  247. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
  248. position: relative; }
  249. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
  250. cursor: pointer;
  251. box-sizing: border-box;
  252. position: absolute;
  253. z-index: 2;
  254. overflow: hidden;
  255. top: 0;
  256. left: 0;
  257. width: 90%;
  258. height: 80%;
  259. margin: 5%;
  260. padding: 5%;
  261. background-color: rgba(255, 255, 255, 0.3);
  262. opacity: 0.8;
  263. transition: opacity,background-color 0.3s ease-in-out; }
  264. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
  265. font-size: 4em;
  266. font-weight: 700;
  267. font-style: italic;
  268. text-align: center; }
  269. .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content:hover .group-txt {
  270. opacity: 1;
  271. background-color: rgba(255, 255, 255, 0.9); }
  272. #footer-bottom {
  273. text-align: center; }
  274. #footer-bottom .block {
  275. background-color: transparent;
  276. font-size: 0.7em; }
  277. #content {
  278. padding: 1em; }
  279. /** Messages. */
  280. div.messages {
  281. padding: 9px;
  282. margin: 0.5em 0 0;
  283. color: #036;
  284. background: #bdf;
  285. border: 1px solid #ace;
  286. border-radius: 5px; }
  287. div.warning {
  288. color: #840;
  289. background: #fe6;
  290. border-color: #ed5; }
  291. div.error {
  292. color: #fff;
  293. background: #e63;
  294. border-color: #d52; }
  295. div.error p.error {
  296. color: #333; }
  297. div.status {
  298. color: #360;
  299. background: #cf8;
  300. border-color: #be7; }
  301. /** Tab navigation */
  302. ul.primary, .views-admin-links ul {
  303. font: 13px/1.231 sans-serif;
  304. *font-size: small;
  305. border-collapse: collapse;
  306. padding: 0 0 0 1em;
  307. /* LTR */
  308. white-space: nowrap;
  309. list-style: none;
  310. margin: 5px;
  311. height: auto;
  312. line-height: normal; }
  313. ul.primary li, .views-admin-links li {
  314. display: inline; }
  315. ul.primary li a, .views-admin-links li a {
  316. border-width: 1px;
  317. border-style: solid solid none solid;
  318. height: auto;
  319. margin-right: 0.5em;
  320. /* LTR */
  321. padding: 0 1em;
  322. text-decoration: none;
  323. border-top-left-radius: 5px;
  324. border-top-right-radius: 5px; }
  325. /** Form */
  326. #node-form .form-region-main {
  327. border-right: 1px solid #BFBFBF;
  328. padding-right: 10px;
  329. width: 68%; }
  330. #node-form .form-region-main label {
  331. float: left;
  332. min-width: 25%; }
  333. #node-form .form-region-main input.form-text {
  334. width: 40%; }
  335. #node-form .form-region-right {
  336. padding-left: 5px; }
  337. #node-form .form-region-right label {
  338. float: left;
  339. min-width: 35%; }
  340. #node-form .form-region-right input.form-text {
  341. width: 60%; }
  342. #node-form .form-region-main label.option, #node-form .form-region-right label.option {
  343. float: none; }
  344. form:not(#views-ui-config-item-form) .form-item {
  345. position: relative;
  346. /* padding:9px;*/ }
  347. form:not(#views-ui-config-item-form) .form-item .description {
  348. position: absolute;
  349. bottom: 140%;
  350. /* right:-15px;*/
  351. z-index: 5;
  352. left: 50%;
  353. color: #1A1A1A;
  354. line-height: 1.1;
  355. background: url(../images/popup.png) 50% 100% no-repeat;
  356. width: 240px;
  357. margin: 0px 0px -15px;
  358. padding: 9px 10px 20px;
  359. display: none;
  360. border-top: 1px solid #9F9F9F; }
  361. form:not(#views-ui-config-item-form) .form-item:hover {
  362. z-index: 1;
  363. height: auto;
  364. /* Fix for flicker in IE7 */ }
  365. form:not(#views-ui-config-item-form) .form-item:hover > .description {
  366. display: block; }
  367. fieldset {
  368. border: 1px solid #D4D4D4;
  369. padding: 10px;
  370. margin-bottom: 1em;
  371. border-radius: 5px; }
  372. fieldset legend {
  373. font-size: 1.6em; }
  374. input.form-text {
  375. max-width: 95%; }
  376. /** TABLE */
  377. table {
  378. width: 100%;
  379. border-radius: 5px; }
  380. table thead th {
  381. background-color: #CCC;
  382. padding: 0.5em 1em;
  383. text-align: left; }
  384. table tbody tr.even, table tbody tr.odd {
  385. border-bottom: 0 solid #CCCCCC;
  386. padding: 0.1em 0.6em; }
  387. table tbody tr.even {
  388. background-color: #EEE; }
  389. table tbody tr.odd {
  390. background-color: #E5E5E5; }
  391. table tbody td {
  392. padding: 0.5em 1em;
  393. text-align: left; }
  394. td.active {
  395. background-color: transparent; }