app.scss 51 KB

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