reha.css 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571
  1. @charset "UTF-8";
  2. /*reha*/
  3. /*global*/
  4. /* Colors used for REHA */
  5. .field--type-link, .field--type-file, .links, .views-field-edit-node, .views-field-edit-user, .form-submit, .layout-sidebar-first #block-reha-phase1 footer {
  6. text-transform: uppercase;
  7. padding: 1rem;
  8. border: solid black 1px;
  9. margin-bottom: 1rem;
  10. background-color: white; }
  11. .field--type-link {
  12. width: fit-content; }
  13. .bouton {
  14. background-color: white !important;
  15. border: none !important;
  16. cursor: pointer; }
  17. .views-field-edit-node {
  18. width: fit-content;
  19. margin-top: 1rem; }
  20. .views-field-edit-user {
  21. width: fit-content;
  22. margin-top: 1rem; }
  23. .views-field-edit-user:hover {
  24. background-color: #fdc300; }
  25. #edit-unlock {
  26. display: none; }
  27. .mailto {
  28. text-decoration: underline; }
  29. /*marianne*/
  30. @font-face {
  31. font-family: 'Marianne';
  32. src: url("../fonts/Marianne/Marianne-Thin.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin.woff") format("woff");
  33. font-weight: 300;
  34. font-style: normal; }
  35. @font-face {
  36. font-family: 'Marianne';
  37. src: url("../fonts/Marianne/Marianne-Thin_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin_Italic.woff") format("woff");
  38. font-weight: 300;
  39. font-style: italic; }
  40. @font-face {
  41. font-family: 'Marianne';
  42. src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff");
  43. font-weight: 400;
  44. font-style: normal; }
  45. @font-face {
  46. font-family: 'Marianne';
  47. src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff");
  48. font-weight: 400;
  49. font-style: italic; }
  50. @font-face {
  51. font-family: 'Marianne';
  52. src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular.woff") format("woff");
  53. font-weight: 600;
  54. font-style: normal; }
  55. @font-face {
  56. font-family: 'Marianne';
  57. src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff");
  58. font-weight: 600;
  59. font-style: italic; }
  60. @font-face {
  61. font-family: 'Marianne';
  62. src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff");
  63. font-weight: 800;
  64. font-style: normal; }
  65. @font-face {
  66. font-family: 'Marianne';
  67. src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
  68. font-weight: 800;
  69. font-style: italic; }
  70. @font-face {
  71. font-family: 'Marianne';
  72. src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold.woff") format("woff");
  73. font-weight: 900;
  74. font-style: normal; }
  75. @font-face {
  76. font-family: 'Marianne';
  77. src: url("../fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold_Italic.woff") format("woff");
  78. font-weight: 900;
  79. font-style: italic; }
  80. @font-face {
  81. font-family: 'Marianne';
  82. src: url("../fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold.woff") format("woff");
  83. font-weight: 1000;
  84. font-style: normal; }
  85. @font-face {
  86. font-family: 'Marianne';
  87. src: url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff");
  88. font-weight: 1000;
  89. font-style: italic; }
  90. /*Font Awesome*/
  91. @font-face {
  92. font-family: 'Font Awesome';
  93. src: url("../fonts/Font Awesome/fontawesome-webfont.woff2") format("woff2");
  94. font-weight: 400;
  95. font-style: normal; }
  96. .layout-container {
  97. position: relative;
  98. width: 100vw;
  99. background-color: rgba(153, 147, 174, 0.1);
  100. font-family: 'Marianne';
  101. font-weight: 400;
  102. font-style: normal;
  103. top: 0%;
  104. left: 0%;
  105. width: 100%;
  106. overflow: hidden;
  107. display: flex;
  108. flex-flow: row wrap; }
  109. .layout-container header {
  110. flex: 0 0 100%; }
  111. .layout-container footer {
  112. flex: 0 0 100%; }
  113. .layout-content {
  114. order: 2;
  115. padding-top: 3rem;
  116. padding-bottom: 6rem;
  117. width: 70%;
  118. margin: auto; }
  119. aside {
  120. width: 20%;
  121. order: 1;
  122. margin-top: 5rem;
  123. margin-left: 10rem; }
  124. main {
  125. width: 100%;
  126. display: flex;
  127. flex-direction: row;
  128. position: relative; }
  129. .main-content {
  130. margin-top: 7rem; }
  131. ul {
  132. list-style-type: none; }
  133. a {
  134. text-decoration: none; }
  135. :link {
  136. color: black; }
  137. :visited {
  138. color: black; }
  139. html.js body {
  140. margin: 0 !important; }
  141. html.js body div.dialog-off-canvas-main-canvas div.layout-container {
  142. margin: 0 !important; }
  143. svg.mailto {
  144. display: none; }
  145. /*partials*/
  146. header {
  147. display: block;
  148. height: 150px;
  149. background-color: white;
  150. z-index: 99;
  151. width: 100vw;
  152. position: -webkit-sticky;
  153. position: sticky;
  154. top: 0;
  155. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
  156. header .region-header {
  157. display: inline-grid;
  158. align-items: center;
  159. grid-template-columns: repeat(10, 1fr); }
  160. header .region-header #block-reha-logoministere {
  161. grid-column: 1;
  162. width: fit-content;
  163. padding-left: 4rem;
  164. height: 150px; }
  165. header .region-header #block-reha-logoreha {
  166. grid-column: 2;
  167. max-height: 90%;
  168. height: 150px; }
  169. header .region-header #block-reha-logoreha .field--name-field-logo {
  170. height: 150px; }
  171. header .region-header #block-reha-logoreha .field--name-field-logo .field__item {
  172. height: 150px; }
  173. header .region-header #block-reha-logoreha .field--name-field-logo .field__item img {
  174. height: 150px;
  175. width: fit-content; }
  176. header .region-header #block-reha-connexionutilisateur {
  177. grid-column: 9;
  178. display: flex;
  179. flex-direction: column;
  180. height: fit-content; }
  181. header .region-header #block-reha-connexionutilisateur .bouton-connexion {
  182. padding-right: 3rem; }
  183. header .region-header #block-reha-connexionutilisateur .bouton-connexion :before {
  184. content: url(../images/noun-contact-2495375.svg);
  185. padding-right: 1rem; }
  186. header .region-header #block-reha-connexionutilisateur .connexion {
  187. height: 0;
  188. /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
  189. width: 100%;
  190. position: relative; }
  191. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full {
  192. display: none;
  193. right: -235px;
  194. top: 36px;
  195. position: absolute;
  196. background-color: white;
  197. width: 550px;
  198. height: 200vh;
  199. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  200. clip-path: inset(0px -10px -10px -10px);
  201. padding: 5% 10% 5% 5%; }
  202. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre {
  203. width: 100%;
  204. position: relative; }
  205. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full .titre ::after {
  206. position: relative;
  207. left: 430px; }
  208. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full #user-login-form {
  209. width: 80%;
  210. display: flex;
  211. flex-direction: column;
  212. align-items: start;
  213. padding-left: 2.5rem; }
  214. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul {
  215. font-size: 1.2rem;
  216. width: 70%;
  217. display: flex;
  218. flex-direction: column;
  219. margin-top: 0;
  220. margin-bottom: 4rem;
  221. padding-bottom: 4rem; }
  222. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .create-account-link {
  223. display: none; }
  224. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul .request-password-link {
  225. margin-bottom: 4rem; }
  226. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul:first-of-type {
  227. border-bottom: 1px solid black; }
  228. header .region-header #block-reha-connexionutilisateur .connexion .connexion-full ul:last-of-type a {
  229. text-transform: uppercase;
  230. padding: 1rem;
  231. border: solid black 1px;
  232. margin-bottom: 1rem;
  233. background-color: white; }
  234. header .region-header #block-reha-config-pages {
  235. grid-column: 10;
  236. display: flex;
  237. flex-direction: column;
  238. height: fit-content; }
  239. header .region-header #block-reha-config-pages .bouton-contact {
  240. padding-right: 4rem; }
  241. header .region-header #block-reha-config-pages .bouton-contact ::before {
  242. content: url(../images/noun-letter-1064628.svg);
  243. padding-right: 1rem; }
  244. header .region-header #block-reha-config-pages .contacts {
  245. height: 0;
  246. /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
  247. width: 100%; }
  248. header .region-header #block-reha-config-pages .contacts .contacts-full {
  249. display: none;
  250. background-color: white;
  251. position: absolute;
  252. right: 0px;
  253. top: 100%;
  254. width: 550px;
  255. padding-left: 3.5rem;
  256. padding-top: 1rem;
  257. height: 200vh;
  258. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  259. clip-path: inset(0px -10px -10px -10px); }
  260. header .region-header #block-reha-config-pages .contacts .contacts-full .titre {
  261. padding-left: 3rem; }
  262. header .region-header #block-reha-config-pages .contacts .contacts-full .titre ::after {
  263. left: 320px; }
  264. header .region-header #block-reha-config-pages .contacts .contacts-full .field__item {
  265. display: flex;
  266. flex-direction: column;
  267. padding-left: 3rem; }
  268. header .region-header #block-reha-views-block-current-user-block-block-1 {
  269. grid-column: 9;
  270. display: flex;
  271. flex-direction: column;
  272. height: fit-content; }
  273. header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected {
  274. padding-right: 3rem; }
  275. header .region-header #block-reha-views-block-current-user-block-block-1 .bouton-connected :before {
  276. content: url(../images/noun-contact-2495375.svg);
  277. padding-right: 1rem; }
  278. header .region-header #block-reha-views-block-current-user-block-block-1 .connected {
  279. height: 0;
  280. /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
  281. width: 100%;
  282. position: relative; }
  283. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full {
  284. display: none;
  285. right: -267px;
  286. top: 36px;
  287. position: absolute;
  288. background-color: white;
  289. width: 550px;
  290. height: 200vh;
  291. box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  292. clip-path: inset(0px -10px -10px -10px);
  293. padding: 5% 10% 5% 45%; }
  294. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer {
  295. font-weight: 400;
  296. font-size: 1rem;
  297. margin-top: 2rem;
  298. border-top: 1px solid black;
  299. padding-top: 1.5rem; }
  300. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul {
  301. width: 45%;
  302. display: flex;
  303. flex-direction: column-reverse;
  304. padding-left: 0; }
  305. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:first-of-type {
  306. margin-top: 4rem;
  307. border-bottom: 1px solid black; }
  308. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li {
  309. text-transform: uppercase;
  310. padding: 1rem;
  311. border: solid black 1px;
  312. margin-bottom: 1rem;
  313. background-color: white; }
  314. header .region-header #block-reha-views-block-current-user-block-block-1 .connected .connected-full footer ul li:hover {
  315. background-color: #fdc300; }
  316. header html.js body div.dialog-off-canvas-main-canvas div.layout-container header div.region.region-header div#block-reha-views-block-current-user-block-block-1.views-element-container.block.block-views.block-views-blockcurrent-user-block-block-1 div.connected div.connected-full div div.js-view-dom-id-426705c0f405ba1cfc7a9eac64ddbe6f543fe3a21a71f2a99ef49ced31b93bc1 footer ul li {
  317. border-top: 1px solid black; }
  318. header .bouton {
  319. align-self: flex-end;
  320. width: fit-content; }
  321. header .bouton h2 {
  322. text-transform: lowercase;
  323. display: inline-flex; }
  324. header .titre {
  325. display: inline-flex;
  326. font-weight: 800;
  327. font-size: 1.8rem;
  328. position: relative; }
  329. header .titre ::after {
  330. content: url(../images/noun-cross-1151731.svg);
  331. float: right;
  332. position: relative;
  333. left: 90px;
  334. cursor: pointer; }
  335. footer {
  336. background-color: white;
  337. padding-top: 3rem;
  338. font-family: "Marianne";
  339. font-weight: 800;
  340. font-size: 1.3rem;
  341. text-transform: lowercase; }
  342. footer div {
  343. display: flex;
  344. flex-direction: row; }
  345. footer h2 {
  346. font-size: 1.3rem; }
  347. footer section:not(:first-of-type) {
  348. border-left: #fdc300 solid 5px;
  349. padding-left: 2rem; }
  350. footer section:not(:last-of-type) {
  351. padding-right: 5rem; }
  352. #footer-left {
  353. margin-left: 10rem; }
  354. #footer-left div {
  355. display: flex;
  356. flex-direction: column;
  357. padding-right: 2rem; }
  358. #footer-left div #block-reha-pieddepage ul {
  359. padding-left: 0; }
  360. #footer-middle #block-reha-operateurduprogramme {
  361. display: flex;
  362. flex-direction: column; }
  363. #footer-right #block-reha-config-pages-2 {
  364. display: flex;
  365. flex-direction: column; }
  366. #footer-right #block-reha-config-pages-2 .field--name-field-partenaires .field__items {
  367. display: flex;
  368. flex-direction: row;
  369. flex-wrap: wrap; }
  370. #footer-right #block-reha-config-pages-2 .field--name-field-partenaires .field__items img {
  371. max-width: 150px;
  372. height: fit-content;
  373. padding: 1rem; }
  374. .form-item {
  375. display: flex;
  376. flex-direction: column; }
  377. label {
  378. padding-bottom: 0.5rem; }
  379. input {
  380. height: 2rem;
  381. width: 50%; }
  382. .form-submit {
  383. height: 4rem !important;
  384. margin-bottom: 1rem;
  385. font-size: 1.2rem;
  386. font-weight: 300;
  387. width: fit-content; }
  388. #user-login-form {
  389. padding-left: 2rem; }
  390. #user-login-form .form-item {
  391. flex-direction: row;
  392. padding-bottom: 1rem;
  393. padding-left: 0.2;
  394. width: 80%; }
  395. #user-login-form .form-item label {
  396. padding-right: 0.5rem;
  397. flex: 1 1 auto; }
  398. #edit-persistent-login {
  399. height: 1.5rem; }
  400. .layout-sidebar-first #block-reha-phase1 {
  401. border: solid #fdc300 1px;
  402. font-weight: 800;
  403. padding: 1rem;
  404. width: 80%; }
  405. .layout-sidebar-first #block-reha-phase1 h2 {
  406. margin-top: 0;
  407. margin-bottom: 0;
  408. text-transform: lowercase;
  409. font-weight: 1000;
  410. line-height: 1rem;
  411. font-size: 1.5rem; }
  412. .layout-sidebar-first #block-reha-phase1 p {
  413. font-size: 1.5rem;
  414. line-height: 1.8rem;
  415. margin-top: 0.8rem; }
  416. .layout-sidebar-first #block-reha-phase1 footer {
  417. width: fit-content; }
  418. /*pages*/
  419. .home-page-layout-content .layout--onecol {
  420. width: 90%;
  421. margin: auto;
  422. font-size: 1.3rem;
  423. font-weight: 400;
  424. font-style: normal; }
  425. .home-page-layout-content .layout--onecol h4 {
  426. font-size: 5rem;
  427. font-weight: normal;
  428. margin: 0; }
  429. .home-page-layout-content .layout--onecol h5 {
  430. font-size: 5rem;
  431. font-weight: 900;
  432. margin: 0;
  433. line-height: 0.6; }
  434. .home-page-layout-content .layout--onecol .block-region-content {
  435. display: grid;
  436. grid-column: repeat(2, 1fr); }
  437. .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-1 {
  438. grid-column: 1 /span 2;
  439. grid-row: 1;
  440. margin-bottom: 2rem; }
  441. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f {
  442. grid-column: 1;
  443. grid-row: 2 /span 2;
  444. width: 85%;
  445. border: solid #fdc300 1px;
  446. background-color: white;
  447. font-weight: 800;
  448. padding: 2rem;
  449. margin-right: 1rem; }
  450. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f h2 {
  451. margin-top: 0;
  452. margin-bottom: 0;
  453. text-transform: lowercase;
  454. font-weight: 900;
  455. line-height: 1rem;
  456. font-size: 1.8rem; }
  457. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description {
  458. margin-top: 0;
  459. font-size: 2rem;
  460. line-height: 2.2rem; }
  461. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--name-field-description p {
  462. margin-top: 0.8rem; }
  463. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link {
  464. padding: 0;
  465. margin: 0;
  466. border: none;
  467. font-weight: 400;
  468. background-color: inherit; }
  469. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f .field--type-link .field__item ::after {
  470. justify-self: unset;
  471. padding-left: 1rem;
  472. content: url(../images/noun-arrow-1569918.svg); }
  473. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f:hover {
  474. background-color: #fdc300; }
  475. .home-page-layout-content .layout--onecol .block-region-content .block-block-content5ae07b35-3c0b-48f5-b51b-f0f0e4c1765f:hover .field--type-link .field__item ::after {
  476. justify-self: unset;
  477. padding-left: 1rem;
  478. content: url(../images/noun-arrow-1569918_hover.svg); }
  479. .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d {
  480. margin-bottom: 1rem;
  481. grid-column: 2;
  482. grid-row: 2;
  483. width: 90%;
  484. display: flex;
  485. justify-content: flex-end;
  486. align-items: center; }
  487. .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d .field--type-file {
  488. width: 100%;
  489. margin: 0; }
  490. .home-page-layout-content .layout--onecol .block-region-content .block-block-content08189a6a-2ca1-42c3-a780-d7ad0c65619d :hover {
  491. background-color: #fdc300; }
  492. .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 {
  493. grid-column: 2;
  494. grid-row: 3;
  495. width: 90%;
  496. display: flex;
  497. justify-content: flex-end;
  498. align-items: center; }
  499. .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 .field--type-file {
  500. width: 100%;
  501. margin: 0; }
  502. .home-page-layout-content .layout--onecol .block-region-content .block-block-content259faa3e-f66e-4776-9f4e-9a3aa26e8252 :hover {
  503. background-color: #fdc300; }
  504. .home-page-layout-content .layout--onecol .block-region-content .block-views-blockhome-block-2 {
  505. grid-column: 1 /span 2;
  506. grid-row: 4;
  507. margin-top: 2rem; }
  508. .user--register h1 {
  509. font-size: 3rem !important;
  510. font-weight: 600; }
  511. .node-type-operation footer {
  512. display: none; }
  513. .node-type-operation .views-field-edit-node {
  514. background-color: rgba(153, 147, 174, 0) !important; }
  515. html.js body div.dialog-off-canvas-main-canvas div.layout-container main div.layout-content div.region.region-content div#block-reha-contenudelapageprincipale.block.block-system.block-system-main-block div.views-element-container div.js-view-dom-id-586565a78462afa14f00a79092967e0998bcad1d346481ed34544a2c80124f64 footer {
  516. background-color: rgba(153, 147, 174, 0) !important; }
  517. #block-reha-contenudelapageprincipale #node-operation-form #edit-field-fiche-candidature-wrapper {
  518. width: fit-content; }
  519. #block-reha-contenudelapageprincipale #node-operation-form #edit-field-dossier-de-candidature-wrapper {
  520. width: 40%; }