app.scss 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041
  1. @import './base/reset';
  2. @import './base/variables';
  3. @import './base/colors';
  4. @import './base/grid-flex';
  5. @import './base/transitions';
  6. @import './base/layout';
  7. @import './base/fonts';
  8. // your-app.scss
  9. // @import '~@sweetalert2/themes/dark/dark.scss';
  10. /* The emerging W3C standard
  11. that is currently Firefox-only */
  12. * {
  13. scrollbar-width: thin;
  14. scrollbar-color: $grisclair rgba(255,255,255,0);
  15. }
  16. /* Works on Chrome/Edge/Safari */
  17. *::-webkit-scrollbar {
  18. width: 12px;
  19. }
  20. *::-webkit-scrollbar-track {
  21. background: rgba(255,255,255,0);
  22. }
  23. *::-webkit-scrollbar-thumb {
  24. background-color: $grisclair;
  25. border-radius: 20px;
  26. border: none;
  27. }
  28. body{
  29. color: #1a1a1a;
  30. // background-image: url('/static/img/grille-ligne-de-base.png');
  31. // background-repeat: repeat;
  32. }
  33. #root{
  34. }
  35. .red{
  36. background-color: red;
  37. color:white;
  38. }
  39. header[role="banner"]{
  40. div.wrapper{
  41. display: grid;
  42. grid-template-columns: 1fr 1fr;
  43. }
  44. h1.site-title{
  45. grid-column: 1;
  46. margin:0;
  47. font-size: 1em;
  48. }
  49. nav#header-menu{
  50. grid-column: 2;
  51. text-align: right;
  52. >ul>li{
  53. display: inline-block;
  54. margin-right: 1em;
  55. position: relative;
  56. >ul{
  57. position: absolute;
  58. top:1em; right:-1em;
  59. overflow: hidden;
  60. padding-bottom: 0.5em;
  61. background-color: white;
  62. >li{
  63. padding:0 1em;
  64. // margin-right: -1em;
  65. transition: height 0.3s ease-in-out;
  66. height:0;
  67. overflow: hidden;
  68. }
  69. }
  70. //
  71. // &:focus-within
  72. // &:hover,
  73. &.opened{
  74. >ul>li{
  75. height:1em;
  76. }
  77. }
  78. &.has-submenu{
  79. cursor: pointer;
  80. }
  81. }
  82. li>span,li>a{
  83. font-size: 0.9em;
  84. color: $bleuroi;
  85. text-transform: uppercase;
  86. }
  87. }
  88. }
  89. section[role="main-content"]{
  90. #home{
  91. header{
  92. margin:15vh 0 0;
  93. text-align: center;
  94. padding: 1em 0;
  95. h1{
  96. color: $bleuroi;
  97. font-size: 8em;
  98. font-weight: 300;
  99. margin: 0;
  100. }
  101. h2{
  102. color: $or;
  103. font-size: 2em;
  104. font-weight: 300;
  105. margin:1em 0 0;
  106. text-transform: uppercase;
  107. letter-spacing: 0.2em;
  108. sup{
  109. // line-height: 5em;
  110. vertical-align:text-top;
  111. font-size: 0.7em
  112. }
  113. }
  114. }
  115. // $filet_space:8em;
  116. // $decallage: 0.5em;
  117. section{
  118. padding-top: 8em;
  119. }
  120. @mixin teasersfilet($filet_space, $decallage){
  121. z-index: 1;
  122. &:before, &:after{
  123. z-index: 0;
  124. content: "";
  125. position: absolute;
  126. opacity: 0.4;
  127. pointer-events: none;
  128. }
  129. &:before{
  130. border:1px solid $or;
  131. width:calc(100% + #{$filet_space*2 + $decallage*2});
  132. left:- $filet_space - $default_gap/2 -$decallage;
  133. height:calc(100% + #{$filet_space});
  134. top:- $filet_space / 2;
  135. }
  136. &:after{
  137. border:1px solid $rouge;
  138. width:calc(100% + #{$filet_space*2});
  139. left:- $filet_space - $default_gap/2;
  140. height:calc(100% + #{$filet_space + $decallage*2});
  141. top:- $filet_space / 2 - $decallage;
  142. }
  143. }
  144. div.teasers>.wrapper{
  145. display: flex;
  146. flex-direction: row;
  147. flex-wrap: nowrap;
  148. position: relative;
  149. padding-right: 0;
  150. article{
  151. box-sizing: border-box;
  152. flex-basis: percentage(2 / ( $default_sum - 6) );
  153. padding-right: $default_gap;
  154. @include fontsans;
  155. h1{
  156. color: $bleuroi;
  157. }
  158. p{
  159. font-size: 0.882em;
  160. line-height: 1.2;
  161. }
  162. a.readmore span{
  163. color:$rouge;
  164. font-size:0.693em;
  165. }
  166. }
  167. // filets decoratif
  168. @include teasersfilet(8em, 0.5em);
  169. }
  170. // responsive
  171. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  172. header{
  173. h1{
  174. font-size: 5em;
  175. margin:7vh 0 0;
  176. }
  177. h2{
  178. font-size: 1em;
  179. }
  180. }
  181. section{
  182. padding-top: 4em;
  183. }
  184. div.teasers{
  185. flex-direction: column;
  186. // filets decoratif
  187. @include teasersfilet(4em, 0.5em);
  188. }
  189. }
  190. }
  191. #list-corpus, .index{
  192. >header{
  193. &>h1{
  194. @include titleSansRed;
  195. margin: 0;
  196. }
  197. }
  198. &#list-corpus{
  199. >section>.wrapper>ul{
  200. >li{
  201. margin-bottom: $base-line*2;
  202. >header{
  203. margin-bottom: 0;
  204. h2,h3,h4{
  205. display: inline-block;
  206. margin: 0;
  207. margin-bottom: $base-line/2;
  208. }
  209. }
  210. section.notice{
  211. p{
  212. margin-top:0;
  213. font-size: 1.134em;
  214. line-height: $base-line * 0.7;
  215. // margin-bottom: $base-line * 0.7;
  216. }
  217. margin-bottom: $base-line/2;
  218. }
  219. section.editions{
  220. h4{
  221. font-size: 1em;
  222. line-height: $base-line * 0.8;
  223. // margin-bottom: $base-line / 2;
  224. }
  225. }
  226. section.texts {
  227. >h4{
  228. font-size: 1em;
  229. line-height: $base-line * 0.5;
  230. margin-bottom: $base-line / 2;
  231. }
  232. ul.texts-list{
  233. padding-left: 1em;
  234. >li{
  235. list-style: circle;
  236. h3{
  237. @include title1blue;
  238. font-size: 1.512em;
  239. line-height: $base-line * 0.5;
  240. margin-bottom: $base-line * 0.5;
  241. }
  242. p{
  243. font-size: 1em;
  244. @include fontserif;
  245. font-weight: 300;
  246. margin-top:0;
  247. font-size: 1em;
  248. line-height: $base-line * 0.5;
  249. margin-bottom: $base-line / 2;
  250. }
  251. margin-bottom: $base-line;
  252. }
  253. }
  254. }
  255. }
  256. }
  257. }
  258. article.item{
  259. // margin: 2em 0 0;
  260. header{
  261. margin:0;
  262. h1{
  263. margin:0;
  264. span.title{
  265. @include title1black;
  266. color: $bleuroi;
  267. }
  268. span.quantity{
  269. @include title4black;
  270. }
  271. }
  272. }
  273. }
  274. &:not(#list-corpus){
  275. ul.item-list{
  276. li{
  277. margin-bottom: $base-line;
  278. max-height: $base-line * 3;
  279. opacity: 1;
  280. transition: all 0.3s ease-in-out;
  281. &.hidden {
  282. // display: none;
  283. max-height: 0.001px;
  284. opacity: 0;
  285. margin-bottom: 0.001px;
  286. overflow: hidden;
  287. }
  288. }
  289. }
  290. }
  291. ul.item-list{
  292. li{
  293. // margin: 0 0 2em 0;
  294. margin-bottom: $base-line;
  295. header{
  296. h2{
  297. @include title1blue;
  298. // margin:0.4em 0 0.2em;
  299. margin-bottom: $base-line / 2;
  300. }
  301. h3{
  302. margin:0;
  303. @include fontsans;
  304. font-size: 0.756em;
  305. font-weight: 500;
  306. line-height: $base-line / 2;
  307. }
  308. section.notice{
  309. @include fontsans;
  310. font-size: 0.756em;
  311. font-weight: 300;
  312. line-height: $base-line / 2;
  313. }
  314. margin-bottom: $base-line / 2;
  315. }
  316. h4{
  317. margin:0;
  318. font-weight: 300;
  319. @include fontsans;
  320. font-size: 0.756em;
  321. line-height: $base-line / 2;
  322. &.texts-quantity{
  323. color: $rouge;
  324. margin-bottom: $base-line / 4;
  325. }
  326. }
  327. section.editions{
  328. div.editions{
  329. ol{
  330. padding:0;
  331. li{
  332. margin:0.7em 1em;
  333. }
  334. }
  335. }
  336. }
  337. section.texts{
  338. ul.texts-list{
  339. // padding: 0 0 0 1em;
  340. li{
  341. margin-bottom: $base-line / 2;
  342. }
  343. h3{
  344. @include title2black;
  345. // margin: 0.7em 0 0.3em;
  346. line-height: $base-line / 2;
  347. }
  348. p{
  349. font-weight: 300;
  350. @include fontsans;
  351. font-size: 0.756em;
  352. margin: 0;
  353. line-height: $base-line / 2;
  354. }
  355. }
  356. }
  357. ul {
  358. li{
  359. // margin:0 0 0 1em;
  360. h3{
  361. margin: 0.5em 0;
  362. font-weight: 400;
  363. font-size: 1em;
  364. }
  365. }
  366. }
  367. }
  368. }
  369. .abc{
  370. ul{
  371. li{
  372. opacity: 1;
  373. transition: opacity 0.3s ease-in-out;
  374. padding: 3px;
  375. &.inactive{
  376. opacity: 0.4;
  377. }
  378. span.tout, span.letter{
  379. @include fontcaption;
  380. font-variant: small-caps;
  381. font-size: 1em;
  382. cursor: pointer;
  383. // line-height: $base-line / 2;
  384. border: 1px solid $grisclair;
  385. border-radius: 3px;
  386. padding: 0.3em;
  387. display: inline-block;
  388. text-align: center;
  389. }
  390. &:not(:first-of-type) span.letter{
  391. width: 1.1em; height: 1.1em;
  392. }
  393. span.quantity{
  394. font-size: 0.765em;
  395. }
  396. }
  397. }
  398. }
  399. }
  400. .index-item{
  401. header{
  402. h1{
  403. @include title1blue;
  404. line-height: $base-line * 1.2;
  405. // margin:0 0 0.3em;
  406. }
  407. h2{
  408. @include title1black;
  409. margin:0 0 0.3em;
  410. }
  411. section{
  412. margin-bottom: 1em;
  413. h3{
  414. @include title2black;
  415. margin:0 0 0.3em;
  416. font-weight: 600;
  417. }
  418. }
  419. p{
  420. margin: 0 0 0.5em 0;
  421. span.label{ font-weight: 600; }
  422. }
  423. .authors{
  424. a{
  425. @include title2black;
  426. color: $bleuroi;
  427. }
  428. margin:0 0 0.3em;
  429. }
  430. .mdi{
  431. color: $bleuroilight;
  432. font-size: 0.7em;
  433. }
  434. .attested-forms{
  435. ul{
  436. // >li{
  437. // margin: 0 0 1em 0;
  438. // li{
  439. // margin: 0 0 0.5em 0;
  440. // }
  441. // }
  442. }
  443. a{
  444. @include title4grey;
  445. color: $grisfonce;
  446. font-weight: 400;
  447. }
  448. }
  449. }
  450. .tabs{
  451. border-bottom: 1px solid $bleuroilight;
  452. margin-bottom: $base-line / 2;
  453. .tab{
  454. cursor: pointer;
  455. border-radius: 5px 5px 0 0;
  456. z-index: 10;
  457. display: inline-block;
  458. margin-bottom: -2px;
  459. padding: 0.3em 0.5em;
  460. border: 1px solid $bleuroilight;
  461. &.active{
  462. border-bottom: 2px solid white;
  463. }
  464. }
  465. }
  466. .occurences{
  467. >ul{
  468. >li{
  469. padding:0 0 $base-line / 2 0;
  470. h3{
  471. @include title1black;
  472. padding:0 0 $base-line / 2 0;
  473. color: $bleuroi;
  474. }
  475. >ul{
  476. >li{
  477. // padding:0 0 0.5em 0;
  478. section{
  479. h4{
  480. // @include title3black;
  481. @include title4grey;
  482. color: $grisfonce;
  483. font-weight: 400;
  484. display: inline-block;
  485. a{
  486. span.form{
  487. font-style: italic;
  488. margin-top: 0;
  489. font-size: 1.134em;
  490. line-height: $base-line * 0.7;
  491. // margin-bottom: $base-line;
  492. }
  493. }
  494. }
  495. // ? c'est quoi ça ?
  496. // span.open-close{
  497. // cursor: pointer;
  498. // display: inline-block;
  499. // svg{
  500. // transform: rotate(-90deg) scale(0.8);
  501. // transition: transform 0.3s ease-in-out;
  502. // path{
  503. // fill:$bleuroi;
  504. // }
  505. // }
  506. // }
  507. // div.text{
  508. // max-height: 0;
  509. // transition: max-height 0.3s ease-in-out;
  510. // overflow: hidden;
  511. // box-sizing: content-box;
  512. // p, h1, h2, h3, h4, h5, h6{
  513. // margin: 0.5em 0 0 0;
  514. // }
  515. // }
  516. // a.lire-plus{
  517. // color: $bleuroi;
  518. // opacity: 0;
  519. // display: inline-block;
  520. // height: 0;
  521. // overflow: hidden;
  522. // transition: height, opacity 0.3s ease-in-out;
  523. // }
  524. // &.opened{
  525. // span.open-close{
  526. // cursor: pointer;
  527. // display: inline-block;
  528. // svg{
  529. // transform: scale(0.8) rotate(0);
  530. // }
  531. // }
  532. // div.text{
  533. // max-height:100px;
  534. // }
  535. // a.lire-plus{
  536. // opacity: 1;
  537. // height:1em;
  538. // }
  539. // }
  540. }
  541. }
  542. }
  543. }
  544. }
  545. }
  546. .attested-forms-occurences{
  547. >ul{
  548. >li{
  549. margin: 0 0 1em 0;
  550. h3{
  551. @include title1black;
  552. padding:0 0 0 0;
  553. }
  554. li{
  555. // margin: 0 0 0.5em 0;
  556. h4{
  557. // @include title3black;
  558. @include title4grey;
  559. color: $grisfonce;
  560. font-weight: 400;
  561. display: inline-block;
  562. a{
  563. font-style: italic;
  564. margin-top: 0;
  565. font-size: 1.134em;
  566. line-height: $base-line * 0.7;
  567. span.edition{
  568. font-style: italic;
  569. }
  570. }
  571. }
  572. }
  573. }
  574. }
  575. }
  576. nav{
  577. h3{
  578. @include title2black;
  579. margin:0 0 0.5em;
  580. }
  581. h4{
  582. @include title3black;
  583. margin:0 0 0.5em;
  584. color: $bleuroi;
  585. }
  586. }
  587. >nav{
  588. aside.links{
  589. position: absolute;
  590. bottom: 0;
  591. overflow-wrap:anywhere;
  592. }
  593. }
  594. }
  595. #edition{
  596. >header{
  597. position: relative;
  598. span.header-title{ display:none; }
  599. h1{
  600. @include title1blue;
  601. }
  602. aside.notice{
  603. // margin-top: 0;
  604. // font-size: 1em;
  605. // line-height: $base-line *0.5;
  606. // margin-bottom: $base-line / 2;
  607. }
  608. nav.entities-hide-show{
  609. position: absolute;
  610. bottom: 1em;
  611. span{
  612. @include fontsans;
  613. font-size: 0.882em;
  614. cursor: pointer;
  615. }
  616. }
  617. aside.index-tooltip{
  618. z-index:10;
  619. margin-top: -1.75em;
  620. position:absolute;
  621. text-align: right;
  622. right: 2em;
  623. h1 {
  624. @include title2black;
  625. margin:0 0 0.5em 0;
  626. }
  627. p{
  628. margin:0 0 0.5em 0;
  629. }
  630. time{
  631. font-weight: 600;
  632. }
  633. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  634. background-color: #fff;
  635. padding: 1em;
  636. box-shadow: 0 0 10px $gris;
  637. *{
  638. pointer-events: none;
  639. }
  640. }
  641. }
  642. }
  643. // responsive
  644. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  645. >header{
  646. $top: 45px;
  647. z-index: 110;
  648. position: absolute;
  649. top:$top;
  650. left:0;
  651. background-color: #fff;
  652. width:percentage(5/$default_sum);
  653. box-sizing: border-box;
  654. padding-top: 1em;
  655. padding-bottom: 1em;
  656. height:calc(100% - #{$top});
  657. transform: translateX(-100%);
  658. transition: transform 0.3s ease-in-out;
  659. span.header-title{
  660. display: block;
  661. position: absolute;
  662. top:4.5em; right:-1em;
  663. transform: rotateZ(-90deg);
  664. transform-origin: center;
  665. @include fontsans;
  666. font-size: 0.600em;
  667. cursor: pointer;
  668. color: $bleuroi;
  669. svg{
  670. vertical-align: bottom;
  671. transform-origin: center;
  672. transform: scale(0.8) rotate(0);
  673. transition: transform 0.3s ease-in-out;
  674. path{
  675. fill: $bleuroi;
  676. }
  677. }
  678. }
  679. &.opened{
  680. box-shadow: 3px 3px 5px $grisclair;
  681. transform: translateX(0);
  682. span.header-title{
  683. svg{
  684. transform: scale(0.7) rotate(180deg);
  685. }
  686. }
  687. }
  688. }
  689. }
  690. $pagenum_w:1em;
  691. >section{
  692. padding-right: 0;
  693. >.wrapper{
  694. padding-right: $pagenum_w*3;
  695. // outline: orange solid thin;
  696. }
  697. div#text{
  698. // .infinite-loading-container{
  699. // height:0;
  700. // overflow: hidden;
  701. // }
  702. .text-wrapper{
  703. // padding-left: 1em;
  704. position: relative;
  705. }
  706. .textrefcopylink{
  707. display: block;
  708. position: absolute;
  709. z-index: 99;
  710. span.mdi-open-in-new {
  711. position: relative;
  712. z-index: 10;
  713. margin-left: 1px;
  714. }
  715. .popup{
  716. position: absolute;
  717. top:0;
  718. left: 1px;
  719. // width: 15em;
  720. background-color: #fff;
  721. border-radius: 3px;
  722. padding: 1em 1em 1em 1.5em;
  723. box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  724. display: none;
  725. opacity: 0.1;
  726. // outline: 1px solid blue;
  727. transition: opacity 2s ease-in-out;
  728. button.copy-btn{
  729. display: block;
  730. padding: 0.5em 0.2em;
  731. @include fontcaption;
  732. white-space: nowrap;
  733. border: none;
  734. background: none;
  735. cursor: pointer;
  736. }
  737. }
  738. // todo what about touch is hover will work ?
  739. &:hover .popup{
  740. display: block;
  741. opacity: 1;
  742. transition: opacity 2s ease-in-out;
  743. }
  744. }
  745. div.tei{
  746. position: relative;
  747. width: calc(100% - #{$pagenum_w});
  748. // DEBUG
  749. color:chartreuse;
  750. &>*{ color: #1A1A1A;}
  751. // @media only screen and (min-width: $small-bp + 1) {
  752. padding-right: $pagenum_w;
  753. border-left: 1px dotted $grisclair;
  754. padding-left: 1em;
  755. margin-left:1.2em;
  756. overflow: visible;
  757. &.active{
  758. border-left: 1px dotted $bleuroi;
  759. }
  760. // }
  761. // front page
  762. header{
  763. padding-top: $base-line;
  764. h1{
  765. @include teititlefrontblue;
  766. .initial{
  767. display: inline-block;
  768. text-transform: uppercase;
  769. font-size: 1.3em;
  770. line-height: $base-line*2;
  771. margin: $base-line/2 0;
  772. }
  773. margin-bottom: $base-line;
  774. }
  775. }
  776. span.metamark.tailpiece,
  777. span.metamark.simpleLine{
  778. display: block;
  779. border-top: 1px solid $gris;
  780. margin: $base-line / 2 auto;
  781. }
  782. .byline{
  783. text-align: center;
  784. font-style: italic;
  785. padding-bottom: 1em;
  786. color: $bleuroi;
  787. &:last-of-type{
  788. padding-bottom: $base-line*2;
  789. }
  790. }
  791. .docImprint{
  792. text-align: center;
  793. // padding-bottom: 1em;
  794. color: $bleuroi;
  795. font-size: 1.3em;
  796. line-height: $base-line;
  797. .pubPlace{
  798. display: block;
  799. }
  800. .publisher{
  801. display: block;
  802. }
  803. .docDate{
  804. display: block;
  805. // margin-top: $base-line / 2;
  806. font-weight: 700;
  807. }
  808. }
  809. .docEdition{
  810. display: block;
  811. text-align: center;
  812. color: $bleuroi;
  813. font-size: 1.3em;
  814. line-height: $base-line;
  815. }
  816. span.epigraph{
  817. display: block;
  818. text-align: center;
  819. color: $bleuroi;
  820. font-size: 1em;
  821. line-height: $base-line;
  822. border-top: 1px $gris solid;
  823. border-bottom: 1px $gris solid;
  824. }
  825. .imprimatur{
  826. text-align: center;
  827. font-style: italic;
  828. color: $bleuroi;
  829. font-size: 1.3em;
  830. line-height: $base-line;
  831. padding-bottom: $base-line;
  832. &:last-of-type{
  833. padding-bottom: $base-line*2;
  834. }
  835. }
  836. >h1{
  837. @include teititle1blue;
  838. }
  839. h1{ font-size: 1.512em;
  840. line-height: $base-line; }
  841. p{
  842. margin-top: 0;
  843. font-size: 1.134em;
  844. line-height: $base-line;
  845. margin-bottom: $base-line / 2;
  846. span.no-wrap{
  847. white-space: nowrap;
  848. }
  849. span.persName,
  850. span.placeName,
  851. span.objectName{
  852. font-weight: 500;
  853. }
  854. a{
  855. font-weight: 500;
  856. &.active-link{
  857. // color: $rouge;
  858. // text-decoration: underline;
  859. // line-height: $base-line/2;
  860. }
  861. // sup.mdi{
  862. // font-size: 0.630em;
  863. // vertical-align: super;
  864. // // line-height: 0.1;
  865. // padding: 0 0.2em;
  866. // }
  867. }
  868. }
  869. $bq_padd: 2em;
  870. blockquote{
  871. padding: 0 $bq_padd;
  872. margin: $base-line/2 0;
  873. line-height: $base-line;
  874. p{
  875. margin: 0;
  876. }
  877. }
  878. ul, ol{
  879. padding: 0 0 0 2em;
  880. li{
  881. list-style: disc;
  882. }
  883. }
  884. span.mdi.index-item-icon{
  885. font-size: 14px;
  886. vertical-align: super;
  887. line-height: 0;
  888. }
  889. // span[role="pageBreak"]{
  890. // display: block;
  891. // height:1.5em;
  892. // }
  893. span.simpleLine + span[role="pageBreak"]{
  894. height:0em;
  895. margin-top: -1em;
  896. }
  897. span.metamark.typographicalPiece + span[role="pageBreak"]{
  898. height:0em;
  899. }
  900. span.metamark.typographicalPiece{
  901. display: block;
  902. height: 1.5em;
  903. }
  904. span.metamark.typographicalPiece + span.metamark.typographicalPiece{
  905. display: none;
  906. }
  907. span[role="pageNum"]{
  908. font-size: 16px;
  909. position: relative;
  910. float:right;
  911. width: $pagenum_w; height:$base-line/4;
  912. border-bottom: 1px solid $bleuroilight;
  913. border-right: 1px solid $bleuroilight;
  914. // outline: solid red thin;
  915. // margin-left:calc(100% - #{$pagenum_w * 2});
  916. // margin-left: 100%;
  917. margin-right: - $pagenum_w * 1.5;
  918. &:before{
  919. // outline: solid green thin;
  920. content:attr(data-num);
  921. font-size: 0.630em;
  922. line-height: $base-line/3;
  923. position: absolute;
  924. right: 0;
  925. top:$base-line/2;
  926. color: $bleuroi;
  927. // top:0;
  928. // width: $pagenum_w*2; height: $pagenum_w;
  929. // border-top: 1px solid $bleuroilight;
  930. // border-right: 1px solid $bleuroilight;
  931. // text-indent: $pagenum_w * 2.5;
  932. }
  933. }
  934. blockquote span[role="pageNum"]{
  935. margin-right: - $pagenum_w * 1.5 - $bq_padd;
  936. // &:before{
  937. // right: -$bq_padd;
  938. // }
  939. }
  940. a.text-item-link{
  941. // float: left;
  942. position: absolute;
  943. top:0; left:0;
  944. // display: block;
  945. // width:1em; height:1em;
  946. font-size: 0.630em;
  947. .mdi{
  948. color: $bleuroi;
  949. pointer-events: none;
  950. }
  951. }
  952. figure{
  953. // outline: 1px solid red;
  954. background-color: $grisclair;
  955. margin:1em 0;
  956. img{
  957. width: 100%;
  958. }
  959. figcaption{
  960. @include fontcaption;
  961. padding: 0.5em;
  962. }
  963. }
  964. ul{
  965. line-height: $base-line;
  966. margin-bottom: $base-line/2;
  967. }
  968. }
  969. &.entities-hidden{
  970. span.mdi.index-item-icon{ display: none;}
  971. }
  972. }
  973. }
  974. >nav{
  975. $filter_m: 0.3em;
  976. $pager_h:18px;
  977. display: flex;
  978. flex-direction: column;
  979. span.nav-title{ display:none; }
  980. section#toc{
  981. $m:0.5em;
  982. box-sizing: content-box;
  983. padding:0 0 1em 1.5em;
  984. margin-bottom: $m;
  985. height:calc(100% - #{$pager_h} - #{$m} - #{$filter_m});
  986. overflow-x: hidden;
  987. overflow-y: auto;
  988. line-height: $base-line / 2;
  989. // section.tocitem{
  990. // position: relative;
  991. // &:after{
  992. // display: block;
  993. // position:absolute;
  994. // top:0; right:0;
  995. // color: red;
  996. // content: attr(type);
  997. // font-size: 11px;
  998. // border: 1px solid red;
  999. // border-radius: 3px;
  1000. // padding: 0px 2px;
  1001. // }
  1002. // }
  1003. >ul{
  1004. >li{
  1005. section.tocitem{
  1006. ul{
  1007. overflow: hidden;
  1008. max-height: 10000px;
  1009. transition: max-height 0.5s ease-in-out;
  1010. &:not(.opened):not(.init_opened){
  1011. max-height:0;
  1012. transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
  1013. }
  1014. &:not([level="1"]){
  1015. border-left: 0.5px solid $grisclair;
  1016. margin-bottom: 0em;
  1017. li{
  1018. padding:0 0 0 1em;
  1019. }
  1020. }
  1021. }
  1022. &.notitle>ul>li{
  1023. padding:0;
  1024. }
  1025. }
  1026. }
  1027. }
  1028. section.tocitem{
  1029. &[level="1"]:not([type="front"]),
  1030. &[level="2"]{
  1031. padding-top: 0.4em;
  1032. }
  1033. }
  1034. .toc-title{
  1035. @include title4grey;
  1036. color: $grismoyen;
  1037. &.active,
  1038. &:hover{
  1039. color:$grisfonce;
  1040. font-weight: 600;
  1041. }
  1042. &.loaded{
  1043. color:$grisfonce;
  1044. }
  1045. &.notitle{
  1046. color: red;
  1047. }
  1048. &.disabled{
  1049. color: $grisclair;
  1050. pointer-events: none;
  1051. }
  1052. }
  1053. h2.toc-title{
  1054. font-size: 1.1em;
  1055. color: $bleuroilight;
  1056. &:hover, &.loaded{
  1057. color: $bleuroi;
  1058. }
  1059. }
  1060. h3.toc-title{font-size: 1em;}
  1061. h4.toc-title{font-size: 0.9em;}
  1062. h5.toc-title{font-size: 0.8em;}
  1063. h6.toc-title{font-size: 0.7em;}
  1064. // span.toc-title{font-size: 0.882em;}
  1065. // >ul{
  1066. // ul{
  1067. // li{
  1068. // ul{
  1069. // overflow: hidden;
  1070. // max-height: 10000px;
  1071. // transition: max-height 0.5s ease-in-out;
  1072. // // transform: scaleY(1);
  1073. // // transform-origin: top;
  1074. // // transition: transform 0.3s ease-in-out;
  1075. // &:not(.opened){
  1076. // // height:0;
  1077. // max-height:0;
  1078. // transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
  1079. // // transform: scaleY(0);
  1080. // }
  1081. // // &.opened{
  1082. // // border: 1px solid red;
  1083. // // }
  1084. // // padding-left: 1em;
  1085. // border-left: 0.5px solid $grisclair;
  1086. // // min-height: 1em;
  1087. // margin-bottom: 0em;
  1088. // li{
  1089. // // min-height: 1em;
  1090. // // border-left: 1px solid red;
  1091. // padding:0 0 0 1em;
  1092. // }
  1093. // }
  1094. // }
  1095. // }
  1096. // .toc-title{
  1097. // @include title4grey;
  1098. // &.active,
  1099. // &:hover{
  1100. // color:$grisfonce;
  1101. // font-weight: 600;
  1102. // }
  1103. // &.loaded{
  1104. // color:$grisfonce;
  1105. // }
  1106. // &.notitle{
  1107. // color: red;
  1108. // }
  1109. // }
  1110. // h2.toc-title{font-size: 1.1em;}
  1111. // h3.toc-title{font-size: 1em;}
  1112. // h4.toc-title{font-size: 0.9em;}
  1113. // h5.toc-title{font-size: 0.8em;}
  1114. // h6.toc-title{font-size: 0.7em;}
  1115. // // span.toc-title{font-size: 0.882em;}
  1116. // }
  1117. }
  1118. div#indexes-filters{
  1119. // height:$pager_h;
  1120. overflow: hidden;
  1121. box-sizing: content-box;
  1122. padding:0 0 0 1.5em;
  1123. margin: 0 0 $filter_m 0;
  1124. select{
  1125. option{
  1126. padding:0;
  1127. }
  1128. }
  1129. }
  1130. div#page-nav{
  1131. height:$pager_h;
  1132. overflow: hidden;
  1133. box-sizing: content-box;
  1134. padding:0 0 0 1.5em;
  1135. select{
  1136. option{
  1137. padding:0;
  1138. }
  1139. }
  1140. }
  1141. }
  1142. // responsive
  1143. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1144. position: relative;
  1145. >nav{
  1146. $top: 45px;
  1147. z-index: 2;
  1148. position: absolute;
  1149. top:$top;
  1150. right:0;
  1151. background-color: #fff;
  1152. width:percentage(10/$default_sum);
  1153. box-sizing: border-box;
  1154. padding-top: 1em;
  1155. padding-bottom: 1em;
  1156. height:calc(100% - #{$top});
  1157. transform: translateX(100%);
  1158. transition: transform 0.3s ease-in-out;
  1159. span.nav-title{
  1160. display: block;
  1161. position: absolute;
  1162. top:4.5em; left:-1.8em;
  1163. transform: rotateZ(-90deg);
  1164. transform-origin: center;
  1165. @include fontsans;
  1166. font-size: 0.600em;
  1167. cursor: pointer;
  1168. color: $bleuroi;
  1169. svg{
  1170. vertical-align: bottom;
  1171. transform-origin: center;
  1172. transform: scale(0.8) rotate(180deg);
  1173. transition: transform 0.3s ease-in-out;
  1174. path{
  1175. fill: $bleuroi;
  1176. }
  1177. }
  1178. }
  1179. &.opened{
  1180. box-shadow: -3px -3px 5px $grisclair;
  1181. transform: translateX(0);
  1182. span.nav-title{
  1183. svg{
  1184. transform: scale(0.7) rotate(0);
  1185. }
  1186. }
  1187. }
  1188. }
  1189. }
  1190. }
  1191. #biblio{
  1192. >header{
  1193. &>h1{
  1194. @include titleSansRed;
  1195. margin: 0;
  1196. }
  1197. li{
  1198. margin: 0.5em 0 0;
  1199. a{
  1200. @include title2black;
  1201. &.router-link-active{
  1202. font-weight: 600;
  1203. }
  1204. }
  1205. }
  1206. }
  1207. .biblio-item{
  1208. h2{
  1209. color: $bleuroi;
  1210. }
  1211. p{
  1212. span.label{
  1213. font-weight: 600;
  1214. }
  1215. }
  1216. }
  1217. ul.item-list{
  1218. margin:0;
  1219. padding:0;
  1220. li{
  1221. padding:0;
  1222. margin:0 0 $base-line 0;
  1223. h2{
  1224. margin:0;
  1225. @include title1black;
  1226. color: $bleuroi;
  1227. }
  1228. p{
  1229. margin:0;
  1230. }
  1231. span.date{
  1232. @include title2black;
  1233. font-weight: 600;
  1234. }
  1235. aside{
  1236. overflow: hidden;
  1237. h5{
  1238. @include title2black;
  1239. margin: $base-line / 2 0;
  1240. cursor: pointer;
  1241. // padding-left: 1em;
  1242. // position: relative;
  1243. &:before{
  1244. cursor: pointer;
  1245. content:"\2304";
  1246. position: relative;
  1247. display: inline-block;
  1248. top: -4px;
  1249. // transform-origin: center;
  1250. // transform: rotateZ(-90deg);
  1251. }
  1252. }
  1253. ul{
  1254. max-height: 1px;
  1255. transition: all 0.3s ease-in-out;
  1256. padding-left: 1em;
  1257. li{
  1258. margin-bottom: $base-line / 2;
  1259. }
  1260. }
  1261. &.opened{
  1262. h5{
  1263. &:before{
  1264. top: 4px;
  1265. content:"\2303";
  1266. // transform: rotateZ(90deg);
  1267. }
  1268. }
  1269. ul{
  1270. max-height: 100em;
  1271. }
  1272. }
  1273. }
  1274. }
  1275. &.manifestations{
  1276. li{
  1277. max-height: 0.2px;
  1278. margin-bottom:0;
  1279. overflow: hidden;
  1280. transition: all 1s ease-in-out;
  1281. &.active{
  1282. max-height: 10em;
  1283. }
  1284. .wrapper{
  1285. margin-bottom: $base-line;
  1286. }
  1287. }
  1288. }
  1289. }
  1290. ul.authors-filters{
  1291. li{
  1292. @include title4black;
  1293. line-height: $base-line / 2;
  1294. span{
  1295. cursor: pointer;
  1296. color: $gris;
  1297. &.active{
  1298. color: $grisfonce;
  1299. }
  1300. }
  1301. }
  1302. }
  1303. >nav{
  1304. aside.links{
  1305. position: absolute;
  1306. bottom: 0;
  1307. }
  1308. }
  1309. }
  1310. #static{
  1311. @include fontsans;
  1312. >header{
  1313. display: flex;
  1314. flex-direction: column;
  1315. flex-wrap: nowrap;
  1316. h1{
  1317. @include titleSansRed;
  1318. margin-bottom: $base-line * 0.4;
  1319. flex: 0 0 auto;
  1320. }
  1321. nav.toc{
  1322. flex: 1 1 auto;
  1323. overflow-y: auto;
  1324. span.sommaire-title{ display:none; }
  1325. >div.wrapper{
  1326. height:100%;
  1327. overflow-y: auto;
  1328. }
  1329. li{
  1330. a{
  1331. font-size: 1em;
  1332. line-height: $base-line * 0.7;
  1333. font-weight: 300;
  1334. }
  1335. }
  1336. // responsive
  1337. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1338. $top: 80px;
  1339. z-index: 110;
  1340. position: absolute;
  1341. top:$top;
  1342. left:0;
  1343. background-color: #fff;
  1344. width:percentage(7/$default_sum);
  1345. box-sizing: border-box;
  1346. padding-top: 1em;
  1347. padding-bottom: 1em;
  1348. height:calc(100% - #{$top});
  1349. overflow-y: auto;
  1350. transform: translateX(-100%);
  1351. transition: transform 0.3s ease-in-out;
  1352. >div.wrapper{
  1353. padding-right: 2em;
  1354. height: 100%;
  1355. overflow-y: auto;
  1356. }
  1357. span.sommaire-title{
  1358. display: block;
  1359. position: absolute;
  1360. top:4.5em; right:-2em;
  1361. transform: rotateZ(-90deg);
  1362. transform-origin: center;
  1363. @include fontsans;
  1364. font-size: 0.600em;
  1365. cursor: pointer;
  1366. color: $bleuroi;
  1367. svg{
  1368. vertical-align: bottom;
  1369. transform-origin: center;
  1370. transform: scale(0.8) rotate(0);
  1371. transition: transform 0.3s ease-in-out;
  1372. path{
  1373. fill: $bleuroi;
  1374. }
  1375. }
  1376. }
  1377. &.opened{
  1378. box-shadow: 3px 3px 5px $grisclair;
  1379. transform: translateX(0);
  1380. span.sommaire-title{
  1381. svg{
  1382. transform: scale(0.7) rotate(180deg);
  1383. }
  1384. }
  1385. }
  1386. }
  1387. }
  1388. }
  1389. >section{
  1390. h1{
  1391. font-weight: 400;
  1392. color: $bleuroi;
  1393. }
  1394. p{
  1395. margin-top:0;
  1396. font-size: 1em;
  1397. line-height: $base-line * 0.7;
  1398. font-weight: 300;
  1399. }
  1400. dl{
  1401. font-size: 1em;
  1402. line-height: $base-line * 0.7;
  1403. font-weight: 300;
  1404. span.label{
  1405. font-weight: 400;
  1406. }
  1407. dd{
  1408. margin: 0;
  1409. }
  1410. margin-bottom: $base-line;
  1411. }
  1412. a{
  1413. font-size: 1em;
  1414. line-height: $base-line * 0.7;
  1415. font-weight: 300;
  1416. border-bottom: 1px dotted #1a1a1a;
  1417. // margin-bottom: $base-line * 0.5;
  1418. display: inline-block;
  1419. }
  1420. figure{
  1421. margin: 2em 0;
  1422. img{
  1423. max-width: 100%;
  1424. }
  1425. figcaption{
  1426. @include fontcaption;
  1427. padding: 1em 0;
  1428. }
  1429. }
  1430. }
  1431. }
  1432. }
  1433. footer[role="tools"]{
  1434. $list-item-h: 7em;
  1435. @mixin resultItem{
  1436. box-sizing: border-box;
  1437. // we are only on 10 colls as 2 are occupied by sides
  1438. flex-basis: percentage(2/($default_sum - 2));
  1439. max-height: $list-item-h;
  1440. overflow: hidden;
  1441. padding-bottom: 1em;
  1442. padding-right: $default_gap;
  1443. article{
  1444. max-height: 100%;
  1445. overflow: hidden;
  1446. }
  1447. article.item{
  1448. h1{
  1449. @include title3black;
  1450. font-size: 0.9em;
  1451. font-weight: 600;
  1452. max-width: 95%;
  1453. word-break:normal;
  1454. }
  1455. h2{
  1456. @include title3black;
  1457. text-transform: none;
  1458. }
  1459. span{
  1460. font-size: 0.882em;
  1461. }
  1462. // .preview{
  1463. // font-size: 0.882em;
  1464. // margin:0;
  1465. // code{
  1466. // @include fontserif;
  1467. // background-color: lighten(desaturate($rouge,20%), 20%);
  1468. // padding:0 0.2em;
  1469. // }
  1470. // }
  1471. }
  1472. }
  1473. #history{
  1474. z-index: 8;
  1475. background-color: $or;
  1476. padding:1.2em $side-padding;
  1477. max-height: $list-item-h;
  1478. @include accordeon-transition($list-item-h);
  1479. >header{
  1480. }
  1481. .history-list{
  1482. overflow-x: hidden;
  1483. .wrapper{
  1484. height:100%;
  1485. // hidding the scrollbar
  1486. overflow-y: auto;
  1487. // width:calc(100% + 1em);
  1488. padding-right: 1em;
  1489. >ul{
  1490. padding:0;
  1491. display: flex;
  1492. flex-direction: row;
  1493. flex-wrap: wrap;
  1494. }
  1495. }
  1496. li.item{
  1497. @include resultItem;
  1498. }
  1499. }
  1500. }
  1501. #results{
  1502. z-index: 9;
  1503. background-color: $gris;
  1504. padding:1.2em $side-padding;
  1505. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1506. padding:1.2em $side-padding/2;
  1507. }
  1508. max-height: $list-item-h * 3;
  1509. @include accordeon-transition($list-item-h * 3);
  1510. >header{
  1511. >*{
  1512. // padding:0 0 5px;
  1513. // line-height: $base-line / 2;
  1514. &.v-select{
  1515. padding-top:5px;
  1516. }
  1517. }
  1518. div.results-details{
  1519. line-height: $base-line * 0.5;
  1520. >*{
  1521. display: block;
  1522. }
  1523. .search-keys{
  1524. font-size: 0.756em;
  1525. font-weight: 500;
  1526. }
  1527. .results-count{
  1528. white-space:nowrap;
  1529. font-size: 0.756em;
  1530. }
  1531. }
  1532. }
  1533. .results-list{
  1534. overflow-x: hidden;
  1535. .wrapper{
  1536. position:relative;
  1537. height:100%;
  1538. // hidding the scrollbar
  1539. overflow-y: auto;
  1540. // width:calc(100% + 1em);
  1541. padding-right: 1em;
  1542. >ul{
  1543. padding:0;
  1544. display: flex;
  1545. flex-direction: row;
  1546. flex-wrap: wrap;
  1547. }
  1548. }
  1549. li.result{
  1550. @include resultItem;
  1551. }
  1552. .infinite-loading-container{
  1553. // TODO: how to center the loading
  1554. }
  1555. }
  1556. >header, section.results-list{
  1557. transition: opacity 0.2s ease-in-out;
  1558. }
  1559. &.loading {
  1560. >header, section.results-list{
  1561. transition: opacity 0.5s ease-in-out;
  1562. opacity:0.5;
  1563. pointer-events: none;
  1564. }
  1565. }
  1566. // responsive
  1567. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1568. position: relative;
  1569. >header{
  1570. padding:0 0 1em 0;
  1571. >*{
  1572. display: inline-block;
  1573. margin-right: 1em;
  1574. }
  1575. div.results-details{
  1576. >*{
  1577. display: inline-block;
  1578. &:not(:last-child){
  1579. padding-right: 1em;
  1580. }
  1581. }
  1582. }
  1583. #sorting{
  1584. width:10em;
  1585. }
  1586. }
  1587. >section.results-list{
  1588. max-height: 15em;
  1589. li.result{
  1590. flex-basis: 33%;
  1591. }
  1592. }
  1593. >nav{
  1594. position: absolute;
  1595. top:1.2em; right:1.2em;
  1596. }
  1597. }
  1598. }
  1599. #footer-bottom{
  1600. z-index: 10;
  1601. padding:0 $side-padding;
  1602. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1603. padding:0 $side-padding/2;
  1604. flex-wrap: nowrap;
  1605. }
  1606. background-color: $bleuroi;
  1607. &>*{
  1608. // disable grid gap
  1609. padding-right: 0;
  1610. flex-grow: 0;
  1611. flex-shrink: 0;
  1612. }
  1613. #footer-tabs{
  1614. ul{
  1615. padding:0; margin:0;
  1616. display: flex;
  1617. flex-direction: column;
  1618. li{
  1619. flex: 1 1 auto;
  1620. .wrapper{
  1621. box-sizing: border-box;
  1622. line-height: 0.6em;
  1623. height:2em;
  1624. width: calc(100% + $side-padding);
  1625. margin-left:-$side-padding;
  1626. padding:0.3em 0.5em 0.3em $side-padding;
  1627. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1628. padding: 0.3em 0em 0.3em 2em;
  1629. }
  1630. }
  1631. &.history .wrapper{
  1632. background-color: $or;
  1633. }
  1634. &.results .wrapper{
  1635. background-color: $gris;
  1636. }
  1637. span{
  1638. font-size: 0.693em;
  1639. font-weight: 400;
  1640. text-transform: uppercase;
  1641. cursor: pointer;
  1642. @include fade-transition;
  1643. }
  1644. }
  1645. }
  1646. }
  1647. #search{
  1648. color: #fff;
  1649. background-color: $bleuroi;
  1650. form{
  1651. padding: 0;
  1652. // display: flex;
  1653. // flex-direction: row;
  1654. // flex-wrap: wrap;
  1655. fieldset{
  1656. padding:0.7em 1em;
  1657. border: none;
  1658. box-sizing:border-box;
  1659. // width correction as row is not the same width as others in the page
  1660. // flex-basis: percentage(2/($default_sum - 1));
  1661. // flex-basis: 17.667%;
  1662. // flex-basis: percentage(2 / 11);
  1663. &:not(:first-of-type){
  1664. border-left: 1px solid $grisclair;
  1665. }
  1666. }
  1667. fieldset.search{
  1668. display: inline-flex;
  1669. align-items: center;
  1670. >div{
  1671. width:80%;
  1672. vertical-align: middle;
  1673. }
  1674. label[for="keys"]{
  1675. display: none;
  1676. }
  1677. input[type="text"]{
  1678. padding:0em 0.3em;
  1679. margin:0 0 0.3em 0;
  1680. box-sizing: border-box;
  1681. font-size: 0.756em;
  1682. line-height: 1;
  1683. width:100%;
  1684. height:1.4em;
  1685. border:none;
  1686. border-radius: 2px;
  1687. }
  1688. span.mdi{
  1689. display: inline-block;
  1690. margin:0 0 0 0.5em;
  1691. font-size: 1.2em;
  1692. line-height:1.1;
  1693. vertical-align:middle;
  1694. width:1.2em; height:1.2em;
  1695. border-radius: 0.6em;
  1696. background-color: #fff;
  1697. color: $bleuroi;
  1698. text-align: center;
  1699. font-weight: 700;
  1700. cursor: pointer;
  1701. }
  1702. }
  1703. }
  1704. fieldset.filters{
  1705. .vs__actions{
  1706. // background-color: $grisclair;
  1707. align-items:baseline;
  1708. padding-top:0.2em;
  1709. }
  1710. }
  1711. form{
  1712. transition: opacity 0.2s ease-in-out;
  1713. }
  1714. &.loading{
  1715. form{
  1716. opacity:0.5;
  1717. transition: opacity 0.5s ease-in-out;
  1718. pointer-events: none;
  1719. }
  1720. }
  1721. // responsive
  1722. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1723. form{
  1724. fieldset{
  1725. &.search{
  1726. >div{
  1727. display: inline-flex;
  1728. flex-wrap: nowrap;
  1729. width:84%;
  1730. >*{
  1731. flex-basis: 45%;
  1732. margin: 0 0.5em 0 0;
  1733. // box-sizing: content-box;
  1734. // width:auto!important;
  1735. &#keys[type="text"]{
  1736. margin-right:1.5em;
  1737. }
  1738. }
  1739. }
  1740. span.mdi{
  1741. width:1em; height:1em;
  1742. margin-top: -0.1em;
  1743. margin-left: 0;
  1744. }
  1745. }
  1746. &.filters{
  1747. border-left: none;
  1748. flex-basis: 32%;
  1749. padding: 0.2em 0 1em 1em;
  1750. }
  1751. }
  1752. }
  1753. }
  1754. }
  1755. ;
  1756. #logos{
  1757. // max-height: 100%;
  1758. position: relative;
  1759. flex-shrink: 1;
  1760. // display: flex;
  1761. // flex-direction: row;
  1762. // justify-content: flex-end;
  1763. .wrapper{
  1764. position: relative;
  1765. box-sizing: content-box;
  1766. // max-height: 50px;
  1767. padding:1em;
  1768. text-align: right;
  1769. height: 30px;
  1770. img{
  1771. // display: inline-block;
  1772. height: 100%;
  1773. padding-left: 1em;
  1774. }
  1775. }
  1776. }
  1777. }
  1778. h2{
  1779. margin:0;
  1780. font-size: 0.756em;
  1781. font-weight: 400;
  1782. text-transform: uppercase;
  1783. padding:0;
  1784. }
  1785. }
  1786. // vue-select
  1787. .v-select{
  1788. padding:0;
  1789. div[role="combobox"]{
  1790. background-color: #fff;
  1791. padding:0;
  1792. border-radius: 2px;
  1793. border: none;
  1794. }
  1795. input[type="search"]{
  1796. margin:0;
  1797. padding:0;
  1798. -webkit-appearance:textfield;
  1799. -webkit-box-sizing:content-box;
  1800. }
  1801. input::-webkit-search-decoration,
  1802. input::-webkit-search-cancel-button {
  1803. display: none;
  1804. }
  1805. .vs__search{
  1806. &, &:focus{
  1807. font-size: 0.756em;
  1808. line-height: 1;
  1809. height:1.2em;
  1810. border:none;
  1811. box-sizing: border-box;
  1812. }
  1813. }
  1814. .vs__dropdown-toggle{
  1815. input::placeholder{background-color: #fff;}
  1816. }
  1817. .vs__selected-options{
  1818. background-color: #fff;
  1819. height:18px;
  1820. >input{
  1821. height:100%;
  1822. }
  1823. }
  1824. .vs__actions{
  1825. padding:1px 3px;
  1826. button.vs__clear{
  1827. line-height: 0.5;
  1828. // height:0;
  1829. }
  1830. svg[role="presentation"]{
  1831. transform: scale(0.8);
  1832. path{
  1833. fill: $bleuroi;
  1834. }
  1835. }
  1836. }
  1837. .vs__selected{
  1838. margin:0;
  1839. padding:0.2em 0;
  1840. line-height:1;
  1841. font-size: 0.756em;
  1842. background-color: #fff;
  1843. border:none;
  1844. align-items: middle;
  1845. box-sizing: content-box;
  1846. display: inline-block;
  1847. width: calc(100% - 12px);
  1848. @include fontsans;
  1849. // &>*:not(button){
  1850. // display: inline-block;
  1851. // width:70%;
  1852. // }
  1853. button{
  1854. svg{
  1855. transform: scale(0.8);
  1856. path{
  1857. fill: $bleuroi;
  1858. }
  1859. }
  1860. &.vs__deselect{
  1861. line-height: 0;
  1862. }
  1863. }
  1864. }
  1865. // border-radius: 2px;
  1866. // border: none;
  1867. }
  1868. ul[role="listbox"]{
  1869. @include fontsans;
  1870. padding:0;
  1871. margin:0;
  1872. border:none;
  1873. position: relative;
  1874. li{
  1875. box-sizing: content-box;
  1876. padding:0.3em;
  1877. margin:0;
  1878. font-size: 0.756em;
  1879. line-height: 1;
  1880. white-space: normal;
  1881. position: relative;
  1882. *{
  1883. max-width: 100%;
  1884. }
  1885. h3{
  1886. @include title1black;
  1887. color: $bleuroi;
  1888. padding: 0.5em 0 0 0.3em;
  1889. span.hi{
  1890. font-variant-position: super;
  1891. }
  1892. }
  1893. }
  1894. }
  1895. // ___
  1896. // |_ _|__ ___ _ _ __
  1897. // | |/ _/ _ \ ' \(_-<
  1898. // |___\__\___/_||_/__/
  1899. span.mdi-close{
  1900. cursor: pointer;
  1901. }
  1902. @keyframes spin {
  1903. from {
  1904. transform:rotate(0deg);
  1905. }
  1906. to {
  1907. transform:rotate(360deg);
  1908. }
  1909. }
  1910. span.mdi-loading{
  1911. animation-name: spin;
  1912. animation-duration: 2000ms;
  1913. animation-iteration-count: infinite;
  1914. animation-timing-function: linear;
  1915. }
  1916. // _ _ _
  1917. // | | ___ __ _ __| (_)_ _ __ _
  1918. // | |__/ _ \/ _` / _` | | ' \/ _` |
  1919. // |____\___/\__,_\__,_|_|_||_\__, |
  1920. // |___/
  1921. span.loading{
  1922. @include fontsans;
  1923. font-size: 0.756em;
  1924. color: $grisfonce;
  1925. animation: pulseloading 4s infinite;
  1926. }
  1927. @keyframes pulseloading{
  1928. 0% {
  1929. opacity: 1;
  1930. }
  1931. 50%{
  1932. opacity: 0;
  1933. }
  1934. 100% {
  1935. opacity: 1;
  1936. }
  1937. }