app.scss 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485
  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. text-align: center;
  93. h1{
  94. color: $bleuroi;
  95. font-size: 8em;
  96. font-weight: 300;
  97. margin:15vh 0 0;
  98. }
  99. h2{
  100. color: $or;
  101. font-size: 2em;
  102. font-weight: 300;
  103. margin:1em 0 0;
  104. text-transform: uppercase;
  105. letter-spacing: 0.2em;
  106. sup{
  107. // line-height: 5em;
  108. vertical-align:text-top;
  109. font-size: 0.7em
  110. }
  111. }
  112. }
  113. // $filet_space:8em;
  114. // $decallage: 0.5em;
  115. section{
  116. padding-top: 8em;
  117. }
  118. @mixin teasersfilet($filet_space, $decallage){
  119. &:before, &:after{
  120. z-index: 0;
  121. content: "";
  122. position: absolute;
  123. opacity: 0.4;
  124. }
  125. &:before{
  126. border:1px solid $or;
  127. width:calc(100% + #{$filet_space*2 + $decallage*2});
  128. left:- $filet_space - $default_gap/2 -$decallage;
  129. height:calc(100% + #{$filet_space});
  130. top:- $filet_space / 2;
  131. }
  132. &:after{
  133. border:1px solid $rouge;
  134. width:calc(100% + #{$filet_space*2});
  135. left:- $filet_space - $default_gap/2;
  136. height:calc(100% + #{$filet_space + $decallage*2});
  137. top:- $filet_space / 2 - $decallage;
  138. }
  139. }
  140. div.teasers{
  141. display: flex;
  142. flex-direction: row;
  143. flex-wrap: nowrap;
  144. position: relative;
  145. padding-right: 0;
  146. article{
  147. box-sizing: border-box;
  148. flex-basis: percentage(2 / ( $default_sum - 6) );
  149. padding-right: $default_gap;
  150. @include fontsans;
  151. h1{
  152. color: $bleuroi;
  153. }
  154. p{
  155. font-size: 0.882em;
  156. line-height: 1.2;
  157. }
  158. span{
  159. color:$rouge;
  160. font-size:0.693em;
  161. }
  162. }
  163. // filets decoratif
  164. @include teasersfilet(8em, 0.5em);
  165. }
  166. // responsive
  167. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  168. header{
  169. h1{
  170. font-size: 5em;
  171. margin:7vh 0 0;
  172. }
  173. h2{
  174. font-size: 1em;
  175. }
  176. }
  177. section{
  178. padding-top: 4em;
  179. }
  180. div.teasers{
  181. flex-direction: column;
  182. // filets decoratif
  183. @include teasersfilet(4em, 0.5em);
  184. }
  185. }
  186. }
  187. #list-corpus, .index{
  188. >header{
  189. &>h1{
  190. @include titleSansRed;
  191. margin: 0;
  192. }
  193. }
  194. article.item{
  195. // margin: 2em 0 0;
  196. header{
  197. margin:0;
  198. h1{
  199. margin:0;
  200. span.title{
  201. @include title1black;
  202. color: $bleuroi;
  203. }
  204. span.quantity{
  205. @include title4black;
  206. }
  207. }
  208. }
  209. }
  210. &:not(#list-corpus){
  211. ul.item-list{
  212. li{
  213. // margin: 0 0 2em 0;
  214. max-height: $base-line * 3;
  215. opacity: 1;
  216. transition: all 0.3s ease-in-out;
  217. &.hidden {
  218. // display: none;
  219. max-height: 0.01px;
  220. opacity: 0;
  221. }
  222. }
  223. }
  224. }
  225. ul.item-list{
  226. li{
  227. // margin: 0 0 2em 0;
  228. header{
  229. h2{
  230. @include title1blue;
  231. // margin:0.4em 0 0.2em;
  232. margin-bottom: $base-line / 2;
  233. }
  234. h3{
  235. margin:0;
  236. @include fontsans;
  237. font-size: 0.756em;
  238. font-weight: 500;
  239. line-height: $base-line / 2;
  240. }
  241. margin-bottom: $base-line / 2;
  242. }
  243. h4{
  244. margin:0;
  245. font-weight: 300;
  246. @include fontsans;
  247. font-size: 0.756em;
  248. line-height: $base-line / 2;
  249. &.texts-quantity{
  250. color: $rouge;
  251. // margin: 0.3em 0 0;
  252. }
  253. }
  254. section.editions{
  255. div.editions{
  256. ol{
  257. padding:0;
  258. li{
  259. margin:0.7em 1em;
  260. }
  261. }
  262. }
  263. }
  264. section.texts{
  265. ul.texts-list{
  266. padding: 0 0 0 1em;
  267. li{
  268. margin-bottom: $base-line / 2;
  269. }
  270. h3{
  271. @include title2black;
  272. // margin: 0.7em 0 0.3em;
  273. line-height: $base-line / 2;
  274. }
  275. p{
  276. font-weight: 300;
  277. @include fontsans;
  278. font-size: 0.756em;
  279. margin: 0;
  280. line-height: $base-line / 2;
  281. }
  282. }
  283. }
  284. ul {
  285. li{
  286. margin:0 0 0 1em;
  287. h3{
  288. margin: 0.5em 0;
  289. font-weight: 400;
  290. font-size: 1em;
  291. }
  292. }
  293. }
  294. }
  295. }
  296. .abc{
  297. ul{
  298. li{
  299. opacity: 1;
  300. transition: opacity 0.3s ease-in-out;
  301. padding: 3px;
  302. &.inactive{
  303. opacity: 0.4;
  304. }
  305. span{
  306. @include fontcaption;
  307. font-variant: small-caps;
  308. font-size: 1em;
  309. cursor: pointer;
  310. // line-height: $base-line / 2;
  311. border: 1px solid $grisclair;
  312. border-radius: 3px;
  313. padding: 0.3em;
  314. display: inline-block;
  315. text-align: center;
  316. }
  317. &:not(:first-of-type) span{
  318. width: 1.1em; height: 1.1em;
  319. }
  320. }
  321. }
  322. }
  323. }
  324. #corpus{
  325. }
  326. .index{
  327. }
  328. .index-item{
  329. header{
  330. h1{
  331. @include title1black;
  332. margin:0 0 0.3em;
  333. }
  334. p{
  335. margin: 0 0 0.5em 0;
  336. }
  337. h3{
  338. @include title2black;
  339. margin:0;
  340. }
  341. .authors{
  342. a{
  343. @include title2black;
  344. color: $bleuroi;
  345. }
  346. margin:0 0 0.3em;
  347. }
  348. .mdi{
  349. color: $bleuroilight;
  350. font-size: 0.7em;
  351. }
  352. .attested-forms{
  353. ul{
  354. // >li{
  355. // margin: 0 0 1em 0;
  356. // li{
  357. // margin: 0 0 0.5em 0;
  358. // }
  359. // }
  360. }
  361. a{
  362. @include title4grey;
  363. color: $grisfonce;
  364. font-weight: 400;
  365. }
  366. }
  367. }
  368. .tabs{
  369. border-bottom: 1px solid $bleuroilight;
  370. margin-bottom: $base-line / 2;
  371. .tab{
  372. cursor: pointer;
  373. border-radius: 5px 5px 0 0;
  374. z-index: 10;
  375. display: inline-block;
  376. margin-bottom: -2px;
  377. padding: 0.3em 0.5em;
  378. border: 1px solid $bleuroilight;
  379. &.active{
  380. border-bottom: 2px solid white;
  381. }
  382. }
  383. }
  384. .occurences{
  385. >ul{
  386. >li{
  387. padding:0 0 $base-line / 2 0;
  388. h3{
  389. @include title1black;
  390. padding:0 0 $base-line / 2 0;
  391. color: $bleuroi;
  392. }
  393. >ul{
  394. >li{
  395. // padding:0 0 0.5em 0;
  396. section{
  397. h4{
  398. // @include title3black;
  399. @include title4grey;
  400. color: $grisfonce;
  401. font-weight: 400;
  402. display: inline-block;
  403. a{
  404. span.form{
  405. font-style: italic;
  406. }
  407. }
  408. }
  409. // ? c'est quoi ça ?
  410. // span.open-close{
  411. // cursor: pointer;
  412. // display: inline-block;
  413. // svg{
  414. // transform: rotate(-90deg) scale(0.8);
  415. // transition: transform 0.3s ease-in-out;
  416. // path{
  417. // fill:$bleuroi;
  418. // }
  419. // }
  420. // }
  421. // div.text{
  422. // max-height: 0;
  423. // transition: max-height 0.3s ease-in-out;
  424. // overflow: hidden;
  425. // box-sizing: content-box;
  426. // p, h1, h2, h3, h4, h5, h6{
  427. // margin: 0.5em 0 0 0;
  428. // }
  429. // }
  430. // a.lire-plus{
  431. // color: $bleuroi;
  432. // opacity: 0;
  433. // display: inline-block;
  434. // height: 0;
  435. // overflow: hidden;
  436. // transition: height, opacity 0.3s ease-in-out;
  437. // }
  438. // &.opened{
  439. // span.open-close{
  440. // cursor: pointer;
  441. // display: inline-block;
  442. // svg{
  443. // transform: scale(0.8) rotate(0);
  444. // }
  445. // }
  446. // div.text{
  447. // max-height:100px;
  448. // }
  449. // a.lire-plus{
  450. // opacity: 1;
  451. // height:1em;
  452. // }
  453. // }
  454. }
  455. }
  456. }
  457. }
  458. }
  459. }
  460. .attested-forms-occurences{
  461. >ul{
  462. >li{
  463. margin: 0 0 1em 0;
  464. h3{
  465. @include title1black;
  466. padding:0 0 0 0;
  467. }
  468. li{
  469. // margin: 0 0 0.5em 0;
  470. h4{
  471. // @include title3black;
  472. @include title4grey;
  473. color: $grisfonce;
  474. font-weight: 400;
  475. display: inline-block;
  476. a{
  477. span.edition{
  478. font-style: italic;
  479. }
  480. }
  481. }
  482. }
  483. }
  484. }
  485. }
  486. nav{
  487. h3{
  488. @include title2black;
  489. margin:0 0 0.5em;
  490. }
  491. h4{
  492. @include title3black;
  493. margin:0 0 0.5em;
  494. color: $bleuroi;
  495. }
  496. }
  497. }
  498. #edition{
  499. >header{
  500. position: relative;
  501. h1{
  502. @include title1black;
  503. }
  504. aside.index-tooltip{
  505. z-index:10;
  506. margin-top: -1.75em;
  507. position:absolute;
  508. text-align: right;
  509. right: 2em;
  510. h1 {
  511. @include title2black;
  512. margin:0 0 0.5em 0;
  513. }
  514. p{
  515. margin:0 0 0.5em 0;
  516. }
  517. time{
  518. font-weight: 600;
  519. }
  520. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  521. background-color: #fff;
  522. padding: 1em;
  523. box-shadow: 0 0 10px $gris;
  524. *{
  525. pointer-events: none;
  526. }
  527. }
  528. }
  529. }
  530. $pagenum_w:1em;
  531. >section{
  532. padding-right: 0;
  533. >.wrapper{
  534. padding-right: $pagenum_w*3;
  535. // outline: orange solid thin;
  536. }
  537. div#text{
  538. // .infinite-loading-container{
  539. // height:0;
  540. // overflow: hidden;
  541. // }
  542. .text-wrapper{
  543. // padding-left: 1em;
  544. position: relative;
  545. }
  546. .textrefcopylink{
  547. display: block;
  548. position: absolute;
  549. z-index: 99;
  550. span.mdi-open-in-new {
  551. position: relative;
  552. z-index: 10;
  553. margin-left: 1px;
  554. }
  555. .popup{
  556. position: absolute;
  557. top:0;
  558. left: 1px;
  559. // width: 15em;
  560. background-color: #fff;
  561. border-radius: 3px;
  562. padding: 1em 1em 1em 1.5em;
  563. box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  564. display: none;
  565. opacity: 0.1;
  566. // outline: 1px solid blue;
  567. transition: opacity 2s ease-in-out;
  568. button.copy-btn{
  569. display: block;
  570. padding: 0.5em 0.2em;
  571. @include fontcaption;
  572. white-space: nowrap;
  573. border: none;
  574. background: none;
  575. cursor: pointer;
  576. }
  577. }
  578. &:hover .popup{
  579. display: block;
  580. opacity: 1;
  581. transition: opacity 2s ease-in-out;
  582. }
  583. }
  584. div.tei{
  585. position: relative;
  586. width: calc(100% - #{$pagenum_w});
  587. // DEBUG
  588. color:chartreuse;
  589. &>*{ color: #1A1A1A;}
  590. // @media only screen and (min-width: $small-bp + 1) {
  591. padding-right: $pagenum_w;
  592. border-left: 1px dotted $grisclair;
  593. padding-left: 1em;
  594. margin-left:1.2em;
  595. overflow: visible;
  596. &.active{
  597. border-left: 1px dotted $bleuroi;
  598. }
  599. // }
  600. // front page
  601. header{
  602. padding-top: $base-line;
  603. h1{
  604. @include teititlefrontblue;
  605. .initial{
  606. display: inline-block;
  607. text-transform: uppercase;
  608. font-size: 1.3em;
  609. line-height: $base-line*2;
  610. margin: $base-line/2 0;
  611. }
  612. margin-bottom: $base-line;
  613. }
  614. }
  615. span.metamark.tailpiece,
  616. span.metamark.simpleLine{
  617. display: block;
  618. border-top: 1px solid $gris;
  619. margin: $base-line / 2 auto;
  620. }
  621. .byline{
  622. text-align: center;
  623. font-style: italic;
  624. padding-bottom: 1em;
  625. }
  626. .docImprint{
  627. text-align: center;
  628. // padding-bottom: 1em;
  629. .pubPlace{
  630. display: block;
  631. }
  632. .publisher{
  633. display: block;
  634. }
  635. .docDate{
  636. display: block;
  637. margin-top: $base-line / 2;
  638. }
  639. }
  640. .imprimatur{
  641. text-align: center;
  642. font-style: italic;
  643. padding-bottom: $base-line;
  644. }
  645. >h1{
  646. @include teititle1blue;
  647. }
  648. span.placeName,
  649. span.objectName,
  650. span.persName{
  651. font-weight: 500;
  652. }
  653. span.mdi.index-item-icon{
  654. font-size: 0.630em;
  655. vertical-align: super;
  656. }
  657. span.no-wrap{
  658. // white-space: nowrap;
  659. }
  660. h1{ font-size: 1.512em;
  661. line-height: $base-line; }
  662. p{
  663. margin-top: 0;
  664. font-size: 1.134em;
  665. line-height: $base-line;
  666. margin-bottom: $base-line / 2;
  667. span.persName,
  668. span.placeName,
  669. span.objectName{
  670. font-weight: 600;
  671. }
  672. a{
  673. font-weight: 600;
  674. &.active-link{
  675. color: $rouge;
  676. // text-decoration: underline;
  677. line-height: $base-line/2;
  678. }
  679. sup.mdi{
  680. font-size: 0.630em;
  681. vertical-align: super;
  682. // line-height: 0.1;
  683. padding: 0 0.2em;
  684. }
  685. }
  686. }
  687. span[role="pageNum"]{
  688. font-size: 16px;
  689. position: relative;
  690. float:right;
  691. width: $pagenum_w; height:$base-line/4;
  692. border-bottom: 1px solid $bleuroilight;
  693. border-right: 1px solid $bleuroilight;
  694. // outline: solid red thin;
  695. // margin-left:calc(100% - #{$pagenum_w * 2});
  696. // margin-left: 100%;
  697. margin-right: - $pagenum_w * 1.5;
  698. &:before{
  699. // outline: solid green thin;
  700. content:attr(data-num);
  701. font-size: 0.630em;
  702. line-height: $base-line/3;
  703. position: absolute;
  704. right: 0;
  705. top:$base-line/2;
  706. color: $bleuroi;
  707. // top:0;
  708. // width: $pagenum_w*2; height: $pagenum_w;
  709. // border-top: 1px solid $bleuroilight;
  710. // border-right: 1px solid $bleuroilight;
  711. // text-indent: $pagenum_w * 2.5;
  712. }
  713. }
  714. a.text-item-link{
  715. // float: left;
  716. position: absolute;
  717. top:0; left:0;
  718. // display: block;
  719. // width:1em; height:1em;
  720. font-size: 0.630em;
  721. .mdi{
  722. color: $bleuroi;
  723. pointer-events: none;
  724. }
  725. }
  726. figure{
  727. // outline: 1px solid red;
  728. background-color: $grisclair;
  729. margin:1em 0;
  730. img{
  731. width: 100%;
  732. }
  733. figcaption{
  734. @include fontcaption;
  735. padding: 0.5em;
  736. }
  737. }
  738. ul{
  739. line-height: $base-line;
  740. margin-bottom: $base-line/2;
  741. }
  742. blockquote{
  743. margin: $base-line/2 1em;
  744. line-height: $base-line;
  745. p{
  746. margin: 0;
  747. }
  748. }
  749. }
  750. }
  751. }
  752. >nav{
  753. $pager_h:2em;
  754. display: flex;
  755. flex-direction: column;
  756. span.nav-title{ display:none; }
  757. section#toc{
  758. box-sizing: content-box;
  759. padding:0 0 1em 1.5em;
  760. height:calc(100% - #{$pager_h});
  761. overflow-x: hidden;
  762. overflow-y: auto;
  763. line-height: $base-line / 2;
  764. >ul{
  765. ul{
  766. li{
  767. ul{
  768. overflow: hidden;
  769. max-height: 1000px;
  770. transition: max-height 0.5s ease-in-out;
  771. // transform: scaleY(1);
  772. // transform-origin: top;
  773. // transition: transform 0.3s ease-in-out;
  774. &:not(.opened){
  775. // height:0;
  776. max-height:0;
  777. transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
  778. // transform: scaleY(0);
  779. }
  780. // &.opened{
  781. // border: 1px solid red;
  782. // }
  783. // padding-left: 1em;
  784. border-left: 0.5px solid $grisclair;
  785. // min-height: 1em;
  786. margin-bottom: 0em;
  787. li{
  788. // min-height: 1em;
  789. // border-left: 1px solid red;
  790. padding:0 0 0 1em;
  791. }
  792. }
  793. }
  794. }
  795. .toc-title{
  796. @include title4grey;
  797. &.active,
  798. &:hover{
  799. color:$grisfonce;
  800. font-weight: 600;
  801. }
  802. &.loaded{
  803. color:$grisfonce;
  804. }
  805. }
  806. // h2.toc-title{font-size: 0.882em;}
  807. // h3.toc-title{font-size: 0.882em;}
  808. // h4.toc-title{font-size: 0.882em;}
  809. // h5.toc-title{font-size: 0.882em;}
  810. // h6.toc-title{font-size: 0.882em;}
  811. // span.toc-title{font-size: 0.882em;}
  812. }
  813. }
  814. div#page-nav{
  815. height:$pager_h;
  816. overflow: hidden;
  817. box-sizing: content-box;
  818. padding:1em 0 0 1.5em;
  819. select{
  820. option{
  821. padding:0;
  822. }
  823. }
  824. }
  825. }
  826. // responsive
  827. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  828. position: relative;
  829. >nav{
  830. $top: 45px;
  831. z-index: 2;
  832. position: absolute;
  833. top:$top;
  834. right:0;
  835. background-color: #fff;
  836. width:percentage(10/$default_sum);
  837. box-sizing: border-box;
  838. padding-top: 1em;
  839. padding-bottom: 1em;
  840. height:calc(100% - #{$top});
  841. transform: translateX(100%);
  842. transition: transform 0.3s ease-in-out;
  843. span.nav-title{
  844. display: block;
  845. position: absolute;
  846. top:4.5em; left:-1.8em;
  847. transform: rotateZ(-90deg);
  848. transform-origin: center;
  849. @include fontsans;
  850. font-size: 0.600em;
  851. cursor: pointer;
  852. color: $bleuroi;
  853. svg{
  854. vertical-align: bottom;
  855. transform-origin: center;
  856. transform: scale(0.8) rotate(180deg);
  857. transition: transform 0.3s ease-in-out;
  858. path{
  859. fill: $bleuroi;
  860. }
  861. }
  862. }
  863. &.opened{
  864. box-shadow: -3px -3px 5px $grisclair;
  865. transform: translateX(0);
  866. span.nav-title{
  867. svg{
  868. transform: scale(0.7) rotate(0);
  869. }
  870. }
  871. }
  872. }
  873. }
  874. }
  875. #biblio{
  876. .router-link-active{
  877. font-weight: 600;
  878. }
  879. ul.item-list{
  880. margin:0;
  881. padding:0;
  882. li{
  883. padding:0;
  884. margin:0 0 $base-line 0;
  885. h2{
  886. margin:0;
  887. @include title1black;
  888. }
  889. p{
  890. margin:0;
  891. }
  892. span.date{
  893. @include title2black;
  894. font-weight: 600;
  895. }
  896. aside{
  897. overflow: hidden;
  898. h5{
  899. @include title2black;
  900. margin: $base-line / 2 0;
  901. cursor: pointer;
  902. // padding-left: 1em;
  903. // position: relative;
  904. &:before{
  905. cursor: pointer;
  906. content:"\2304";
  907. position: relative;
  908. display: inline-block;
  909. top: -4px;
  910. // transform-origin: center;
  911. // transform: rotateZ(-90deg);
  912. }
  913. }
  914. ul{
  915. max-height: 1px;
  916. transition: all 0.3s ease-in-out;
  917. padding-left: 1em;
  918. li{
  919. margin-bottom: $base-line / 2;
  920. }
  921. }
  922. &.opened{
  923. h5{
  924. &:before{
  925. top: 4px;
  926. content:"\2303";
  927. // transform: rotateZ(90deg);
  928. }
  929. }
  930. ul{
  931. max-height: 100em;
  932. }
  933. }
  934. }
  935. }
  936. &.manifestations{
  937. li{
  938. max-height: 0.2px;
  939. margin-bottom:0;
  940. overflow: hidden;
  941. transition: all 1s ease-in-out;
  942. &.active{
  943. max-height: 10em;
  944. }
  945. .wrapper{
  946. margin-bottom: $base-line;
  947. }
  948. }
  949. }
  950. }
  951. ul.authors-filters{
  952. li{
  953. @include title4black;
  954. line-height: $base-line / 2;
  955. span{
  956. cursor: pointer;
  957. color: $gris;
  958. &.active{
  959. color: $grisfonce;
  960. }
  961. }
  962. }
  963. }
  964. }
  965. }
  966. footer[role="tools"]{
  967. $list-item-h: 7em;
  968. @mixin resultItem{
  969. box-sizing: border-box;
  970. // we are only on 10 colls as 2 are occupied by sides
  971. flex-basis: percentage(2/($default_sum - 2));
  972. max-height: $list-item-h;
  973. overflow: hidden;
  974. padding-bottom: 1em;
  975. padding-right: $default_gap;
  976. article{
  977. max-height: 100%;
  978. overflow: hidden;
  979. }
  980. article.item{
  981. h1{
  982. @include title3black;
  983. font-weight: 600;
  984. max-width: 95%;
  985. }
  986. h2{
  987. @include title3black;
  988. text-transform: none;
  989. }
  990. span{
  991. font-size: 0.882em;
  992. }
  993. // .preview{
  994. // font-size: 0.882em;
  995. // margin:0;
  996. // code{
  997. // @include fontserif;
  998. // background-color: lighten(desaturate($rouge,20%), 20%);
  999. // padding:0 0.2em;
  1000. // }
  1001. // }
  1002. }
  1003. }
  1004. #history{
  1005. z-index: 8;
  1006. background-color: $or;
  1007. padding:1.2em $side-padding;
  1008. max-height: $list-item-h;
  1009. @include accordeon-transition($list-item-h);
  1010. >header{
  1011. }
  1012. .history-list{
  1013. overflow-x: hidden;
  1014. .wrapper{
  1015. height:100%;
  1016. // hidding the scrollbar
  1017. overflow-y: auto;
  1018. // width:calc(100% + 1em);
  1019. padding-right: 1em;
  1020. >ul{
  1021. padding:0;
  1022. display: flex;
  1023. flex-direction: row;
  1024. flex-wrap: wrap;
  1025. }
  1026. }
  1027. li.item{
  1028. @include resultItem;
  1029. }
  1030. }
  1031. }
  1032. #results{
  1033. z-index: 9;
  1034. background-color: $gris;
  1035. padding:1.2em $side-padding;
  1036. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1037. padding:1.2em $side-padding/2;
  1038. }
  1039. max-height: $list-item-h * 3;
  1040. @include accordeon-transition($list-item-h * 3);
  1041. >header{
  1042. .search-keys{
  1043. font-size: 0.756em;
  1044. font-weight: 500;
  1045. }
  1046. .results-count{
  1047. font-size: 0.756em;
  1048. }
  1049. }
  1050. .results-list{
  1051. overflow-x: hidden;
  1052. .wrapper{
  1053. position:relative;
  1054. height:100%;
  1055. // hidding the scrollbar
  1056. overflow-y: auto;
  1057. // width:calc(100% + 1em);
  1058. padding-right: 1em;
  1059. >ul{
  1060. padding:0;
  1061. display: flex;
  1062. flex-direction: row;
  1063. flex-wrap: wrap;
  1064. }
  1065. }
  1066. li.result{
  1067. @include resultItem;
  1068. }
  1069. .infinite-loading-container{
  1070. // TODO: how to center the loading
  1071. }
  1072. }
  1073. >header, section.results-list{
  1074. transition: opacity 0.2s ease-in-out;
  1075. }
  1076. &.loading {
  1077. >header, section.results-list{
  1078. transition: opacity 0.5s ease-in-out;
  1079. opacity:0.5;
  1080. pointer-events: none;
  1081. }
  1082. }
  1083. // responsive
  1084. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1085. position: relative;
  1086. >header{
  1087. padding:0 0 1em 0;
  1088. >*{
  1089. display: inline-block;
  1090. margin-right: 1em;
  1091. }
  1092. #sorting{
  1093. width:10em;
  1094. }
  1095. }
  1096. >section.results-list{
  1097. max-height: 15em;
  1098. li.result{
  1099. flex-basis: 33%;
  1100. }
  1101. }
  1102. >nav{
  1103. position: absolute;
  1104. top:1.2em; right:1.2em;
  1105. }
  1106. }
  1107. }
  1108. #footer-bottom{
  1109. z-index: 10;
  1110. padding:0 $side-padding;
  1111. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1112. padding:0 $side-padding/2;
  1113. }
  1114. background-color: $bleuroi;
  1115. &>*{
  1116. // disable grid gap
  1117. padding-right: 0;
  1118. }
  1119. #footer-tabs{
  1120. ul{
  1121. padding:0; margin:0;
  1122. display: flex;
  1123. flex-direction: column;
  1124. li{
  1125. flex: 1 1 auto;
  1126. .wrapper{
  1127. box-sizing: border-box;
  1128. line-height: 0.6em;
  1129. height:2em;
  1130. width: calc(100% + $side-padding);
  1131. margin-left:-$side-padding;
  1132. padding:0.3em 0.5em 0.3em $side-padding;
  1133. }
  1134. &.history .wrapper{
  1135. background-color: $or;
  1136. }
  1137. &.results .wrapper{
  1138. background-color: $gris;
  1139. }
  1140. span{
  1141. font-size: 0.693em;
  1142. font-weight: 400;
  1143. text-transform: uppercase;
  1144. cursor: pointer;
  1145. @include fade-transition;
  1146. }
  1147. }
  1148. }
  1149. }
  1150. #search{
  1151. color: #fff;
  1152. background-color: $bleuroi;
  1153. form{
  1154. padding: 0;
  1155. // display: flex;
  1156. // flex-direction: row;
  1157. // flex-wrap: wrap;
  1158. fieldset{
  1159. padding:0.7em 1em;
  1160. border: none;
  1161. box-sizing:border-box;
  1162. // width correction as row is not the same width as others in the page
  1163. // flex-basis: percentage(2/($default_sum - 1));
  1164. // flex-basis: 17.667%;
  1165. // flex-basis: percentage(2 / 11);
  1166. &:not(:first-of-type){
  1167. border-left: 1px solid $grisclair;
  1168. }
  1169. }
  1170. fieldset.search{
  1171. display: inline-flex;
  1172. align-items: center;
  1173. >div{
  1174. width:80%;
  1175. vertical-align: middle;
  1176. }
  1177. label[for="keys"]{
  1178. display: none;
  1179. }
  1180. input[type="text"]{
  1181. padding:0em 0.3em;
  1182. margin:0 0 0.3em 0;
  1183. box-sizing: border-box;
  1184. font-size: 0.756em;
  1185. line-height: 1;
  1186. width:100%;
  1187. height:1.4em;
  1188. border:none;
  1189. border-radius: 2px;
  1190. }
  1191. span.mdi{
  1192. display: inline-block;
  1193. margin:0 0 0 0.5em;
  1194. font-size: 1.2em;
  1195. line-height:1.1;
  1196. vertical-align:middle;
  1197. width:1.2em; height:1.2em;
  1198. border-radius: 0.6em;
  1199. background-color: #fff;
  1200. color: $bleuroi;
  1201. text-align: center;
  1202. font-weight: 700;
  1203. cursor: pointer;
  1204. }
  1205. }
  1206. }
  1207. fieldset.filters{
  1208. .vs__actions{
  1209. // background-color: $grisclair;
  1210. align-items:baseline;
  1211. padding-top:0.2em;
  1212. }
  1213. }
  1214. form{
  1215. transition: opacity 0.2s ease-in-out;
  1216. }
  1217. &.loading{
  1218. form{
  1219. opacity:0.5;
  1220. transition: opacity 0.5s ease-in-out;
  1221. pointer-events: none;
  1222. }
  1223. }
  1224. // responsive
  1225. @media only screen and (max-width: $small-bp), (orientation: portrait) {
  1226. form{
  1227. fieldset{
  1228. &.search{
  1229. >div{
  1230. display: inline-flex;
  1231. flex-wrap: nowrap;
  1232. width:84%;
  1233. >*{
  1234. flex-basis: 45%;
  1235. margin: 0 0.5em 0 0;
  1236. // box-sizing: content-box;
  1237. // width:auto!important;
  1238. &#keys[type="text"]{
  1239. margin-right:1.5em;
  1240. }
  1241. }
  1242. }
  1243. span.mdi{
  1244. width:1em; height:1em;
  1245. margin-top: -0.1em;
  1246. margin-left: 0;
  1247. }
  1248. }
  1249. &.filters{
  1250. border-left: none;
  1251. flex-basis: 32%;
  1252. padding: 0.2em 0 1em 1em;
  1253. }
  1254. }
  1255. }
  1256. }
  1257. }
  1258. }
  1259. h2{
  1260. margin:0;
  1261. font-size: 0.756em;
  1262. font-weight: 400;
  1263. text-transform: uppercase;
  1264. padding:0;
  1265. }
  1266. }
  1267. // vue-select
  1268. .v-select{
  1269. padding:0;
  1270. div[role="combobox"]{
  1271. background-color: #fff;
  1272. padding:0;
  1273. border-radius: 2px;
  1274. border: none;
  1275. }
  1276. input[type="search"]{
  1277. margin:0;
  1278. padding:0;
  1279. -webkit-appearance:textfield;
  1280. -webkit-box-sizing:content-box;
  1281. }
  1282. input::-webkit-search-decoration,
  1283. input::-webkit-search-cancel-button {
  1284. display: none;
  1285. }
  1286. .vs__search{
  1287. &, &:focus{
  1288. font-size: 0.756em;
  1289. line-height: 1;
  1290. height:1.2em;
  1291. border:none;
  1292. box-sizing: border-box;
  1293. }
  1294. }
  1295. .vs__dropdown-toggle{
  1296. input::placeholder{background-color: #fff;}
  1297. }
  1298. .vs__selected-options{
  1299. background-color: #fff;
  1300. }
  1301. .vs__actions{
  1302. padding:1px 3px;
  1303. button.vs__clear{
  1304. line-height: 0.5;
  1305. // height:0;
  1306. }
  1307. svg[role="presentation"]{
  1308. transform: scale(0.8);
  1309. path{
  1310. fill: $bleuroi;
  1311. }
  1312. }
  1313. }
  1314. .vs__selected{
  1315. margin:0;
  1316. padding:0.2em 0;
  1317. line-height:1;
  1318. font-size: 0.756em;
  1319. background-color: #fff;
  1320. border:none;
  1321. align-items: middle;
  1322. box-sizing: content-box;
  1323. display: inline-block;
  1324. width: calc(100% - 12px);
  1325. // &>*:not(button){
  1326. // display: inline-block;
  1327. // width:70%;
  1328. // }
  1329. button{
  1330. svg{
  1331. transform: scale(0.8);
  1332. path{
  1333. fill: $bleuroi;
  1334. }
  1335. }
  1336. &.vs__deselect{
  1337. line-height: 0;
  1338. }
  1339. }
  1340. }
  1341. // border-radius: 2px;
  1342. // border: none;
  1343. }
  1344. ul[role="listbox"]{
  1345. @include fontsans;
  1346. padding:0;
  1347. margin:0;
  1348. border:none;
  1349. position: relative;
  1350. li{
  1351. box-sizing: content-box;
  1352. padding:0.3em;
  1353. margin:0;
  1354. font-size: 0.756em;
  1355. line-height: 1;
  1356. white-space: normal;
  1357. position: relative;
  1358. *{
  1359. max-width: 100%;
  1360. }
  1361. }
  1362. }
  1363. // ___
  1364. // |_ _|__ ___ _ _ ___
  1365. // | |/ _/ _ \ ' \(_-<
  1366. // |___\__\___/_||_/__/
  1367. span.mdi-close{
  1368. cursor: pointer;
  1369. }
  1370. @keyframes spin {
  1371. from {
  1372. transform:rotate(0deg);
  1373. }
  1374. to {
  1375. transform:rotate(360deg);
  1376. }
  1377. }
  1378. span.mdi-loading{
  1379. animation-name: spin;
  1380. animation-duration: 2000ms;
  1381. animation-iteration-count: infinite;
  1382. animation-timing-function: linear;
  1383. }
  1384. // _ _ _
  1385. // | | ___ __ _ __| (_)_ _ __ _
  1386. // | |__/ _ \/ _` / _` | | ' \/ _` |
  1387. // |____\___/\__,_\__,_|_|_||_\__, |
  1388. // |___/
  1389. span.loading{
  1390. @include fontsans;
  1391. font-size: 0.756em;
  1392. color: $grisfonce;
  1393. animation: pulseloading 4s infinite;
  1394. }
  1395. @keyframes pulseloading{
  1396. 0% {
  1397. opacity: 1;
  1398. }
  1399. 50%{
  1400. opacity: 0;
  1401. }
  1402. 100% {
  1403. opacity: 1;
  1404. }
  1405. }