app.scss 42 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752
  1. // @Author: Bachir Soussi Chiadmi <bach>
  2. // @Date: 18-12-2017
  3. // @Email: bachir@figureslibres.io
  4. // @Filename: app.scss
  5. // @Last modified by: bach
  6. // @Last modified time: 20-12-2017
  7. // @License: GPL-V3
  8. @import 'base/reset';
  9. @import 'base/colors';
  10. @import 'base/grid';
  11. @import 'base/layout';
  12. @import 'base/fonts';
  13. @mixin spining-loader-square{
  14. @keyframes rotation {
  15. from {transform: rotate(0deg);}
  16. to {transform: rotate(359deg);}
  17. }
  18. animation: rotation 2s infinite linear;
  19. }
  20. @mixin entrie-micro-square {
  21. display:inline-block;
  22. $s:8px;
  23. width:$s; height:$s;
  24. background-color: black;
  25. margin-right: 3px;
  26. &[tid='134']{background-color: var(--e-col-134);}
  27. &[tid='121']{background-color: var(--e-col-121);}
  28. &[tid='125']{background-color: var(--e-col-125);}
  29. &[tid='119']{background-color: var(--e-col-119);}
  30. &[tid='132']{background-color: var(--e-col-132);}
  31. &[tid='122']{background-color: var(--e-col-122);}
  32. &[tid='129']{background-color: var(--e-col-129);}
  33. &[tid='120']{background-color: var(--e-col-120);}
  34. &[tid='130']{background-color: var(--e-col-130);}
  35. &[tid='118']{background-color: var(--e-col-118);}
  36. &[tid='127']{background-color: var(--e-col-127);}
  37. &[tid='133']{background-color: var(--e-col-133);}
  38. &[tid='128']{background-color: var(--e-col-128);}
  39. &[tid='124']{background-color: var(--e-col-124);}
  40. &[tid='116']{background-color: var(--e-col-116);}
  41. &[tid='117']{background-color: var(--e-col-117);}
  42. &[tid='131']{background-color: var(--e-col-131);}
  43. &[tid='126']{background-color: var(--e-col-126);}
  44. &[tid='123']{background-color: var(--e-col-123);}
  45. }
  46. // .layout-container{
  47. // pointer-events: none;
  48. // }
  49. // _ _
  50. // | |_ ___ __ _ __| |___ _ _
  51. // | ' \/ -_) _` / _` / -_) '_|
  52. // |_||_\___\__,_\__,_\___|_|
  53. header[role="banner"]{
  54. pointer-events: all;
  55. // TODO: what header height to fit well with player ??
  56. }
  57. #block-edlptheme-branding{
  58. display: inline-block;
  59. h1{
  60. margin:0; display: inline-block;
  61. a.site-name{
  62. display: block;
  63. $w:290px;
  64. width:$w; height:$w * 0.22;
  65. background-image: url(../img/logo.svg);
  66. background-color: white;
  67. background-repeat:no-repeat;
  68. background-size: contain;
  69. white-space: nowrap;
  70. text-indent: 500px;
  71. overflow: hidden;
  72. }
  73. }
  74. }
  75. #block-mainnavigation{
  76. float:right;
  77. margin-top: 25px;
  78. ul{
  79. margin:0; padding: 0;
  80. white-space: nowrap;
  81. li{
  82. margin:0; padding:0;
  83. display: inline-block;
  84. a{
  85. font-size: 0.756em;
  86. color:inherit;
  87. text-decoration: none;
  88. text-transform: uppercase;
  89. margin-left: 1em;
  90. &:before{
  91. content: "";
  92. display:inline-block;
  93. $sq:0.6em;
  94. width: $sq; height:$sq;
  95. border: 1px solid red;
  96. margin-right: 0.3em;
  97. }
  98. &.ajax-loading:before{
  99. @include spining-loader-square;
  100. }
  101. &.is-active:before,
  102. &.is-active-trail:before,
  103. &:hover:before{
  104. // border-color: red;
  105. background-color: red;
  106. }
  107. }
  108. }
  109. }
  110. }
  111. .block-language{
  112. float: right;
  113. margin-top: 24px;
  114. margin-left: 2em;
  115. ul{
  116. margin:0; padding:0;
  117. li{
  118. display: inline-block; vertical-align: middle;
  119. list-style: none;
  120. a{
  121. font-size: 0.690em;
  122. color:inherit;
  123. text-decoration: none;
  124. text-transform: capitalize;
  125. margin-left: 0.8em;
  126. &:before{
  127. content: "";
  128. display:inline-block;
  129. $sq:0.6em;
  130. width: $sq; height:$sq;
  131. border: 1px solid red;
  132. margin-right: 0.3em;
  133. }
  134. }
  135. &.is-active,
  136. &:hover{
  137. a:before{
  138. border-color: red;
  139. background-color: red;
  140. }
  141. }
  142. }
  143. }
  144. }
  145. // ___
  146. // / __|__ _ _ ___ ____ _ ___
  147. // | (__/ _` | ' \ V / _` (_-<
  148. // \___\__,_|_||_\_/\__,_/__/
  149. #corpus-map{
  150. opacity: 0;
  151. body[corpus="map-ready"] &{
  152. transition: opacity 2s ease-out;
  153. opacity: 1;
  154. }
  155. }
  156. // _
  157. // _ __ __ _(_)_ _
  158. // | ' \/ _` | | ' \
  159. // |_|_|_\__,_|_|_||_|
  160. // booting sequence
  161. // and ajax loading effects
  162. main[role="main"]{
  163. .row{
  164. opacity: 0;
  165. .col{
  166. opacity:1;
  167. transition: opacity 0.5s ease-in-out;
  168. }
  169. }
  170. body[booted="booted"] &{
  171. .row{
  172. transition: opacity 1s ease-out;
  173. opacity:1;
  174. }
  175. }
  176. body.ajax-loading &{
  177. .row .col:not([theme="edlp_search_search_form"]){
  178. opacity:0.2;
  179. }
  180. // &:before{
  181. // content:"";
  182. // display: block;
  183. // position: absolute;
  184. // z-index: 10;
  185. // $s:60px;
  186. // width:$s; height:$s;
  187. // top:calc(50% - #{$s/2}); left:calc(50% - #{$s/2});
  188. // // padding:1em;
  189. // background-color: rgba(255,255,255, 0.5);
  190. // background-image: url(../img/edlp-loader-anim.svg);
  191. // background-size: 50%;
  192. // background-repeat: no-repeat;
  193. // background-position: center;
  194. // // border-radius: $s/2;
  195. // }
  196. }
  197. }
  198. main[role="main"]{
  199. .layout-content{
  200. pointer-events: none;
  201. .row{
  202. pointer-events: none;
  203. height:100%;
  204. overflow: hidden;
  205. .col{
  206. pointer-events: none;
  207. height: 100%;
  208. position: relative;
  209. &>.wrapper{
  210. pointer-events:all;
  211. position: relative;
  212. box-sizing: border-box;
  213. border-top: 1px solid red;
  214. border-bottom: 1px solid red;
  215. background-color: $transparent-bg;
  216. padding:0 0 1em;
  217. max-height: 100%;
  218. overflow-y: auto;
  219. &>*{
  220. padding:0 1em;
  221. }
  222. // .os-scroll{
  223. // box-sizing: border-box;
  224. // max-height: 100%;
  225. // padding:0 1em;
  226. // }
  227. }
  228. }
  229. }
  230. .field.text-formatted{
  231. a.audio-link{
  232. border-bottom: 1px dotted red;
  233. }
  234. }
  235. }
  236. article.node>h2, h2.title{
  237. @include content_titles;
  238. }
  239. article.node p{
  240. @include content_courant;
  241. }
  242. img{
  243. max-width: 100%;
  244. height: auto;
  245. }
  246. ul, li, ul.inline li:first-child{
  247. margin:0; padding:0;
  248. list-style: none;
  249. }
  250. span.close-col-btn{
  251. // z-index: 10;
  252. pointer-events: all;
  253. cursor: pointer;
  254. position:absolute;
  255. top:0; right:0;
  256. padding:0!important; margin:0.5em;
  257. display: block;
  258. $s:10px;
  259. width:$s; height:$s;
  260. background-image: url(../img/close.svg);
  261. background-repeat: no-repeat;
  262. background-position: center;
  263. background-size: contain;
  264. }
  265. }
  266. // _ _ _ ___ _
  267. // /_\ _ _ __| (_)___| _ \ |__ _ _ _ ___ _ _
  268. // / _ \ || / _` | / _ \ _/ / _` | || / -_) '_|
  269. // /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
  270. // |__/
  271. @mixin audio_controls {
  272. // outline: 1px dotted orange;
  273. &>*{
  274. display: inline-block;
  275. vertical-align: middle;
  276. width:20px;height:30px;
  277. background-position: center;
  278. background-size: contain;
  279. }
  280. .play-pause{
  281. background-image: url(../img/audio-player-play.svg);
  282. padding:0 0.3em;
  283. cursor: pointer;
  284. }
  285. &.is-playing{
  286. .play-pause{background-image: url(../img/audio-player-pause.svg);}
  287. }
  288. .previous, .next{
  289. opacity: 0.3;
  290. transition: opacity 0.3s ease-in-out;
  291. cursor: auto;
  292. &.is-active{
  293. opacity: 1;
  294. cursor: pointer;
  295. }
  296. }
  297. .previous{
  298. background-image: url(../img/audio-player-previous.svg);
  299. }
  300. .next{
  301. background-image: url(../img/audio-player-next.svg);
  302. }
  303. }
  304. #audio-player{
  305. position: absolute;
  306. top:0; left:0;
  307. background-color: white;
  308. height:100%; min-width:300px;
  309. z-index: 20;
  310. opacity: 0;
  311. // outline: 1px solid blue;
  312. pointer-events: none;
  313. transition: opacity 0.7s ease-in-out;
  314. &.visible{
  315. opacity: 1;
  316. pointer-events:all;
  317. }
  318. &>*{
  319. display: inline-block;
  320. vertical-align: middle;
  321. // word-break:keep-all;
  322. padding:0;
  323. max-height: 100%;
  324. // outline: 1px solid green;
  325. }
  326. .btns{
  327. @include audio_controls;
  328. }
  329. .time-line-container{
  330. .time-line{
  331. position: relative;
  332. width:70px; height:1px;
  333. background-color: #000;
  334. overflow: visible;
  335. transform: rotateZ(-45deg);
  336. .loader{
  337. width:0; height:100%;
  338. background-color: red;
  339. top:0;left:0;
  340. }
  341. .cursor{
  342. height:10px;width:0;
  343. border-left: 2px solid red;
  344. position:absolute;
  345. left:0; top:-5px;
  346. }
  347. }
  348. }
  349. .time{
  350. &>*{
  351. width:70px;
  352. text-align: right;
  353. }
  354. .current-time{
  355. font-size: 1.4em;
  356. font-weight: 600;
  357. }
  358. .duration{
  359. font-size: 0.75em;
  360. font-weight: 400;
  361. }
  362. }
  363. .favoris{
  364. height:100%;
  365. }
  366. .cartel{
  367. // TODO: set max-width regarding responsive
  368. position: relative;
  369. max-width: 350px;
  370. margin-left: 1em;
  371. background-color: white;
  372. opacity: 1;
  373. transition: opacity 0.5s ease-in-out;
  374. &.loading{opacity: 0;}
  375. white-space: nowrap;
  376. .actions, .cartels{
  377. display: inline-block;
  378. vertical-align: top;
  379. white-space: normal;
  380. position: relative;
  381. }
  382. .actions{
  383. width:1.5em;
  384. }
  385. .cartels{
  386. .first-cartel{
  387. .entrees{
  388. line-height: 0;
  389. span{
  390. @include entrie-micro-square;
  391. }
  392. }
  393. h2.node-title{
  394. margin:0.2em 0 0;
  395. font-size: 1em;
  396. }
  397. p{
  398. margin:0;
  399. font-size: 0.75em;
  400. }
  401. }
  402. .second-cartel{
  403. position: absolute;
  404. top: 0; left:0;
  405. background-color: white;
  406. height:100%; min-width: 100%;
  407. opacity: 0;
  408. transition: opacity 0.2s ease-in-out;
  409. &>*{
  410. display: inline-block;
  411. vertical-align: top;
  412. }
  413. .col-left{
  414. a{
  415. display: block;
  416. font-size: 0.90em;
  417. font-weight: 600;
  418. }
  419. }
  420. .col-right{
  421. font-size: 0.75em;
  422. }
  423. }
  424. }
  425. &:hover{
  426. .second-cartel{
  427. opacity: 1;
  428. }
  429. }
  430. }
  431. }
  432. // ___ _ _ _
  433. // / __| |_ _ _ __| (_)___
  434. // \__ \ _| || / _` | / _ \
  435. // |___/\__|\_,_\__,_|_\___/
  436. .chutier-icon{
  437. $s:1em;
  438. z-index: 1;
  439. display: block;
  440. position: relative;
  441. width:$s;height:$s;
  442. overflow: hidden;
  443. text-indent: 50em;
  444. // background-color: red;
  445. background-position: center;
  446. background-repeat: no-repeat;
  447. background-size: contain;
  448. background-image: url(../img/favori-off.svg);
  449. &[action="remove"]{
  450. background-image: url(../img/favori-on.svg);
  451. }
  452. transition: opacity 0.2s ease-in-out;
  453. &.ajax-loading{
  454. opacity: 0.2;
  455. }
  456. &.not-logedin{
  457. overflow: visible;
  458. }
  459. .popup{
  460. display:none;
  461. position: absolute;
  462. top:0; left:0;
  463. width:300px; height:auto; min-height: 100px;
  464. .inner{
  465. background-color: rgba(255,255,255,0.9);
  466. border: 1px solid red;
  467. text-indent: 0;
  468. padding: 0.5em;
  469. margin:$s*1.2 0 0 $s*1.2;
  470. p{margin: 0;}
  471. }
  472. }
  473. &:hover{
  474. .popup{
  475. display: block;
  476. }
  477. }
  478. }
  479. .row .col .studio-ui-wrapper{
  480. height: 100%;
  481. }
  482. #studio-ui{
  483. height:100%;
  484. @mixin draggable_sortable_field__item {
  485. display: inline-block;
  486. position: relative;
  487. white-space: nowrap;
  488. pointer-events: none;
  489. // margin-right: 25px;
  490. width:25px;
  491. height: 100%;
  492. &.ui-draggable-dragging{
  493. height:100px;
  494. }
  495. opacity: 1;
  496. transition: opacity 0.1s ease-in-out;
  497. &.ready-to-remove{
  498. opacity:0.3;
  499. cursor:crosshair;
  500. }
  501. &>*{
  502. pointer-events: all;
  503. }
  504. article{
  505. // outline: 1px dotted purple;
  506. position: absolute;
  507. bottom:0;
  508. transform-origin: left top;
  509. transform: rotateZ(-45deg);
  510. h2{
  511. margin:0;
  512. text-transform: none;
  513. a{
  514. white-space: nowrap!important;
  515. &:before{
  516. content:"";
  517. display: inline-block;
  518. vertical-align: middle;
  519. width:$compo_square_size; height:$compo_square_size;
  520. border: 1px solid white;
  521. background-color: white;
  522. // TODO: entries color;
  523. }
  524. font-size: 0.756em;
  525. }
  526. }
  527. }
  528. .handler{
  529. z-index: 99;
  530. cursor: grab;
  531. position: absolute;
  532. bottom:0; left:1px;
  533. display: block;
  534. width:$compo_square_size; height:$compo_square_size;
  535. transform-origin: left top;
  536. transform: rotateZ(-45deg);
  537. border: 1px solid red;
  538. background-color: white;
  539. // TODO: entries color;
  540. }
  541. &.is-active .handler{
  542. background-color: red;
  543. }
  544. } // end mixin
  545. .chutier_ui{
  546. height: 50%;
  547. border-bottom: 1px solid red;
  548. position: relative;
  549. &>h2{
  550. z-index: 10;
  551. position: absolute;
  552. width: calc(100% - 20px);
  553. margin: 0;
  554. padding:0.5em 0;
  555. font-size: 1em;
  556. font-weight: 500;
  557. text-transform: uppercase;
  558. // outline: 1px solid orange;
  559. background-color: white;
  560. }
  561. .documents{
  562. padding-top: 35px;
  563. height:calc(100% - 35px);
  564. overflow-y: auto;
  565. overflow-x: hidden;
  566. // box-sizing: content-box;
  567. // outline: 1px solid green;
  568. ul,li{
  569. margin:0; padding:0;
  570. line-height: 1.2;
  571. }
  572. li{
  573. display: inline-block; vertical-align: top;
  574. width:49%; margin-bottom: 0.5em;
  575. white-space: nowrap;
  576. >div{
  577. display:inline-block;
  578. padding-right: 2em;
  579. &.ui-draggable{
  580. cursor:grab;
  581. }
  582. }
  583. .entrees{
  584. line-height: 0;
  585. span{
  586. @include entrie-micro-square;
  587. }
  588. }
  589. a.audio-link{
  590. text-transform: capitalize;
  591. font-size: 0.756em;
  592. margin-right: 0.5em;
  593. white-space: normal;
  594. }
  595. .chutier-icon{
  596. display: inline-block;
  597. width:0.7em; height:0.7em;
  598. opacity: 0.8;
  599. }
  600. }
  601. }
  602. }
  603. $compo_square_size:12px;
  604. .composition_ui{
  605. height:50%;
  606. &>h2{
  607. z-index: 10;
  608. position: absolute;
  609. width: calc(100% - 20px);
  610. margin: 0;
  611. padding:0.5em 0;
  612. font-size: 1em;
  613. font-weight: 500;
  614. text-transform: uppercase;
  615. // outline: 1px solid orange;
  616. background-color: white;
  617. }
  618. >.wrapper{
  619. padding-top: 35px;
  620. height:calc(100% - 35px);
  621. overflow: hidden;
  622. white-space: nowrap;
  623. section.compositions-list, section.composer{
  624. display: inline-block; vertical-align: bottom;
  625. height: 100%;
  626. }
  627. .compositions-list{
  628. width:30%;
  629. height:100%; // this is not working
  630. overflow-y: auto;
  631. box-sizing: border-box;
  632. padding-right: 0.5em;
  633. border-right: 1px solid #aaa;
  634. li{
  635. opacity: 1;
  636. transition: opacity 0.3s ease-in-out;
  637. &:hover{
  638. a.delete-composition-link{
  639. opacity: 1;
  640. }
  641. }
  642. &.ajax-loading{
  643. opacity: 0.4;
  644. }
  645. }
  646. a{
  647. font-size: 0.756em;
  648. $w:7px;
  649. $s:7px; $m:5px;
  650. &.composition-link{
  651. display: inline-block;
  652. box-sizing: border-box;
  653. // width:100%;
  654. width: calc(100% - #{$w +$s +$m +2});
  655. &:before{
  656. content: "";
  657. width:$w; height:$w;
  658. border: 1px solid black;
  659. background-color: white;
  660. display: inline-block;
  661. vertical-align: middle;
  662. margin-right: $m;
  663. }
  664. &.ajax-loading:before{
  665. @include spining-loader-square;
  666. }
  667. &.is-active:before{
  668. background-color: black;
  669. }
  670. }
  671. &.delete-composition-link{
  672. display: inline-block;
  673. vertical-align: middle;
  674. $s:7px; width:$s; height:$s;
  675. margin-left: $m;
  676. text-indent: 300px; overflow: hidden;
  677. background-image: url('../img/delete.svg');
  678. background-repeat: no-repeat;
  679. background-size: contain;
  680. opacity: 0;
  681. transition: opacity 0.3s ease-in-out;
  682. }
  683. &.new-composition-link{
  684. // padding-left: 1em;
  685. &:before{
  686. content:"+";
  687. // font-weight: bold;
  688. margin-right: $m;
  689. }
  690. display: inline-block;
  691. vertical-align: top;
  692. overflow: hidden;
  693. margin-top: 0.4em;
  694. height:1em;
  695. transition: height 0.2s ease-in-out;
  696. &.folded{
  697. height:0;
  698. }
  699. }
  700. }
  701. .new-compo-form{
  702. input[type="text"]{
  703. font-size: 0.756em;
  704. padding:0 0.5em;
  705. width:calc(100% - 50px);
  706. height:1.7em;
  707. border: none;
  708. border-top:1px dotted red;
  709. border-bottom:1px dotted red;
  710. }
  711. button{
  712. background: none;
  713. border: none;
  714. font-size: 1em;
  715. line-height: 1;
  716. font-weight: bold;
  717. }
  718. opacity: 1;
  719. transition: opacity 0.2s ease-in-out;
  720. &.ajax-loading{
  721. opacity: 0.4;
  722. }
  723. }
  724. }
  725. .composer{
  726. position: relative;
  727. box-sizing: border-box;
  728. padding-left: 0.5em;
  729. width:69%;
  730. $header_height:25px;
  731. $actions_height:25px;
  732. $padding:5px;
  733. opacity:1;
  734. transition: opacity 0.3s ease-in-out;
  735. &.ajax-loading{
  736. opacity:0.3;
  737. }
  738. >*{
  739. box-sizing: border-box;
  740. }
  741. >header{
  742. height:$header_height;
  743. padding-bottom:$padding;
  744. font-size: 0.756em;
  745. }
  746. >.composition{
  747. position: relative;
  748. height:calc(100% - #{$header_height + $actions_height + $padding*2});
  749. // outline: 1px solid red;
  750. padding-bottom: 1em;
  751. .field--name-documents{
  752. position: relative;
  753. box-sizing: border-box;
  754. height: 100%;
  755. width: 100%; padding:0 0.5em;
  756. $h:29px; $w:calc(100% - 2px); $c:#A1A1A1;
  757. &:before, &:after{
  758. content: "";
  759. width:$w;
  760. position: absolute;
  761. bottom:0; left:0;
  762. // z-index: -1;
  763. }
  764. &:before{
  765. border-top: 1px solid $c;
  766. height:$h /2;
  767. }
  768. &:after{
  769. border-left: 1px solid $c;
  770. border-right: 1px solid $c;
  771. height:$h;
  772. }
  773. .field__item{
  774. @include draggable_sortable_field__item;
  775. }
  776. }
  777. .remove-drop-zone{
  778. position: absolute;
  779. top:0; left:0; width:100%; height:45%;
  780. z-index: 150;
  781. // &.ui-droppable-hover{
  782. // background-color: red;
  783. // }
  784. }
  785. }
  786. >.actions{
  787. padding-top:$padding;
  788. height:$actions_height;
  789. // outline: 1px solid blue;
  790. .compo-player-controls{
  791. @include audio_controls;
  792. }
  793. }
  794. }
  795. }
  796. }
  797. // drag and drop specifics
  798. // created by js
  799. .field__item.ui-draggable-dragging{
  800. // outline: 1px solid green;
  801. @include draggable_sortable_field__item;
  802. }
  803. }
  804. // ___ _
  805. // / __| ___ __ _ _ _ __| |_
  806. // \__ \/ -_) _` | '_/ _| ' \
  807. // |___/\___\__,_|_| \__|_||_|
  808. .col[theme="edlp_search_search_form"]{
  809. &, >.wrapper{
  810. position: relative;
  811. height:100%;
  812. }
  813. }
  814. #edlp-search-form{
  815. height:100%;
  816. .fieldgroup{
  817. border-bottom: 1px solid red;
  818. margin-top:1em;
  819. margin-bottom: 0em;
  820. legend{
  821. font-size: 0.9em;
  822. margin: 0;
  823. font-weight: 500;
  824. }
  825. .fieldset-wrapper{
  826. padding-bottom: 1em;
  827. }
  828. .form-item{
  829. margin:0;
  830. }
  831. }
  832. input[type="text"], input[type="search"]{
  833. font-size: 0.8em;
  834. padding:0.2em; margin:0;
  835. border: 1px solid #aaa;
  836. border-radius: 3px;
  837. width:90%;
  838. }
  839. #edit-entries{
  840. .form-item{
  841. label, input{
  842. display: inline-block;
  843. vertical-align: middle;
  844. }
  845. label{
  846. font-size: 0.756em;
  847. }
  848. input[type="checkbox"]{
  849. appearance:none;
  850. $w:10px;
  851. width:$w; height:$w;
  852. border: 1px double black;
  853. background-color: white;
  854. &:checked{
  855. background-color: black;
  856. }
  857. &[value='134']{
  858. border-color: var(--e-col-134);
  859. &:checked{background-color: var(--e-col-134);}
  860. }
  861. &[value='121']{
  862. border-color: var(--e-col-121);
  863. &:checked{background-color: var(--e-col-121);}
  864. }
  865. &[value='125']{
  866. border-color: var(--e-col-125);
  867. &:checked{background-color: var(--e-col-125);}
  868. }
  869. &[value='119']{
  870. border-color: var(--e-col-119);
  871. &:checked{background-color: var(--e-col-119);}
  872. }
  873. &[value='132']{
  874. border-color: var(--e-col-132);
  875. &:checked{background-color: var(--e-col-132);}
  876. }
  877. &[value='122']{
  878. border-color: var(--e-col-122);
  879. &:checked{background-color: var(--e-col-122);}
  880. }
  881. &[value='129']{
  882. border-color: var(--e-col-129);
  883. &:checked{background-color: var(--e-col-129);}
  884. }
  885. &[value='120']{
  886. border-color: var(--e-col-120);
  887. &:checked{background-color: var(--e-col-120);}
  888. }
  889. &[value='130']{
  890. border-color: var(--e-col-130);
  891. &:checked{background-color: var(--e-col-130);}
  892. }
  893. &[value='118']{
  894. border-color: var(--e-col-118);
  895. &:checked{background-color: var(--e-col-118);}
  896. }
  897. &[value='127']{
  898. border-color: var(--e-col-127);
  899. &:checked{background-color: var(--e-col-127);}
  900. }
  901. &[value='133']{
  902. border-color: var(--e-col-133);
  903. &:checked{background-color: var(--e-col-133);}
  904. }
  905. &[value='128']{
  906. border-color: var(--e-col-128);
  907. &:checked{background-color: var(--e-col-128);}
  908. }
  909. &[value='124']{
  910. border-color: var(--e-col-124);
  911. &:checked{background-color: var(--e-col-124);}
  912. }
  913. &[value='116']{
  914. border-color: var(--e-col-116);
  915. &:checked{background-color: var(--e-col-116);}
  916. }
  917. &[value='117']{
  918. border-color: var(--e-col-117);
  919. &:checked{background-color: var(--e-col-117);}
  920. }
  921. &[value='131']{
  922. border-color: var(--e-col-131);
  923. &:checked{background-color: var(--e-col-131);}
  924. }
  925. &[value='126']{
  926. border-color: var(--e-col-126);
  927. &:checked{background-color: var(--e-col-126);}
  928. }
  929. &[value='123']{
  930. border-color: var(--e-col-123);
  931. &:checked{background-color: var(--e-col-123);}
  932. }
  933. }
  934. }
  935. }
  936. input[type="submit"]{
  937. font-size: 0.756em;
  938. padding:0.1em;
  939. margin:1em 0 0 0;
  940. float:right;
  941. opacity: 1;
  942. transition: opacity 0.3s ease-in-out;
  943. }
  944. &.ajax-loading input[type="submit"]{
  945. opacity:0.2;
  946. pointer-events: none;
  947. }
  948. }
  949. .col[theme="edlp_search_results"]{
  950. opacity: 1;
  951. transition: opacity 0.3s ease-in-out;
  952. &.ajax-loading{
  953. opacity:0.2;
  954. }
  955. article{
  956. .entrees{
  957. span{
  958. @include entrie-micro-square;
  959. }
  960. }
  961. h2.node-title{
  962. margin:0 0 0.3em 0;
  963. font-size: 0.8em;
  964. font-weight: 500;
  965. text-transform: none;
  966. }
  967. // .description{
  968. // p{
  969. // margin:0;
  970. // font-size: 0.75em;
  971. // }
  972. // }
  973. }
  974. }
  975. // _ _ _ _ _
  976. // /_\ (_)__ ___ __ | \| |___ __| |___
  977. // / _ \ | / _` \ \ / | .` / _ \/ _` / -_)
  978. // /_/ \_\/ \__,_/_\_\ |_|\_\___/\__,_\___|
  979. // |__/
  980. // body.path-edlp-node main{
  981. // main .col>.wrapper, .edlp-ajax-node{
  982. // height: 100%;
  983. // }
  984. // }
  985. // _ _
  986. // /_\ __ _ ___ _ _ __| |__ _
  987. // / _ \/ _` / -_) ' \/ _` / _` |
  988. // /_/ \_\__, \___|_||_\__,_\__,_|
  989. // |___/
  990. body.path-agenda main .col{
  991. &>.wrapper{
  992. height:100%;
  993. }
  994. }
  995. #agenda{
  996. position: relative;
  997. white-space: nowrap;
  998. height: 100%;
  999. div.column{
  1000. white-space: normal;
  1001. display: inline-block;
  1002. vertical-align: top;
  1003. height:100%;
  1004. }
  1005. div.next-event{
  1006. width:65%;
  1007. }
  1008. div.future-past-events{
  1009. width:33%;
  1010. }
  1011. ul,li{
  1012. margin:0; padding:0;
  1013. list-style: none;
  1014. }
  1015. article.node--type-evenement{
  1016. h2{ @include content_titles; }
  1017. }
  1018. }
  1019. // _ _
  1020. // | || |___ _ __ ___
  1021. // | __ / _ \ ' \/ -_)
  1022. // |_||_\___/_|_|_\___|
  1023. // ___ _ _ _
  1024. // | _ \_ _ ___ __| |_ _ __| |_(_)___ _ _ ___
  1025. // | _/ '_/ _ \/ _` | || / _| _| / _ \ ' \(_-<
  1026. // |_| |_| \___/\__,_|\_,_\__|\__|_\___/_||_/__/
  1027. body.path-frontpage, body.path-productions{
  1028. .layout-content .row{
  1029. white-space: normal;
  1030. min-height: 100%;
  1031. .col{
  1032. height:auto;
  1033. &.col-2:last-child{
  1034. padding-left: 0em;
  1035. padding-right: 1em;
  1036. }
  1037. >.wrapper{
  1038. margin-bottom: 1em;
  1039. padding:0;
  1040. >*{padding:0;}
  1041. article.node{
  1042. .field--name-field-visuel{
  1043. a,img{
  1044. display: block;
  1045. width: 100%; height:auto;
  1046. }
  1047. }
  1048. header{
  1049. background-color: rgba(255,255,255,0.95);
  1050. box-sizing: border-box;
  1051. width: 100%;
  1052. padding:0.5em 1em;
  1053. h2.node-title{
  1054. margin:0;
  1055. font-size: 0.8em;
  1056. text-transform: lowercase;
  1057. }
  1058. // p{margin: 0;}
  1059. }
  1060. &.node--view-mode-image-2-columns{
  1061. header{
  1062. position: absolute;
  1063. bottom: 0; left:0;
  1064. h2.node-title{
  1065. font-size: 1.2em;
  1066. font-weight: 500;
  1067. }
  1068. }
  1069. }
  1070. &.node--view-mode-image-1-columns{
  1071. h2.node-title{
  1072. font-size: 1em;
  1073. font-weight: 500;
  1074. }
  1075. }
  1076. &.node--view-mode-text-1-column{
  1077. padding:0 1em;
  1078. }
  1079. }
  1080. }
  1081. }
  1082. }
  1083. }
  1084. // ___ _
  1085. // | __|__ ___| |_ ___ _ _
  1086. // | _/ _ \/ _ \ _/ -_) '_|
  1087. // |_|\___/\___/\__\___|_|
  1088. @mixin oblique-list {
  1089. display: inline-block;
  1090. position: relative;
  1091. list-style: none;
  1092. margin: 0 1.5em 0 0;
  1093. // width:2em; height:10em;
  1094. padding: 0;
  1095. a{
  1096. position: absolute;
  1097. bottom: 0;
  1098. transform-origin: left bottom;
  1099. transform: rotateZ(-45deg);
  1100. color: #000;
  1101. text-decoration: none;
  1102. text-transform: uppercase;
  1103. font-size: 0.756em;
  1104. white-space: nowrap;
  1105. }
  1106. }
  1107. footer{
  1108. position: relative;
  1109. pointer-events: none;
  1110. // outline: 1px dotted blue;
  1111. >.wrapper{
  1112. white-space: nowrap;
  1113. // height:100%;
  1114. >.region{
  1115. // height:100%;
  1116. // display: table-cell;
  1117. display: inline-block;
  1118. vertical-align: baseline;
  1119. white-space:normal;
  1120. // pointer-events: none;
  1121. // outline: 1px dotted purple;
  1122. // position: relative;
  1123. >*{
  1124. display: inline-block; vertical-align: bottom;
  1125. }
  1126. }
  1127. .region-footer-left{
  1128. // float:left;
  1129. width:12%;
  1130. // min-width:50px;
  1131. text-align: left;
  1132. }
  1133. .region-footer-center{
  1134. // float: none;
  1135. width: 72%;
  1136. overflow:hidden;
  1137. text-align: center;
  1138. }
  1139. .region-footer-right{
  1140. // float:right;
  1141. min-width:12%;
  1142. // min-width: 50px;
  1143. text-align: right;
  1144. }
  1145. }
  1146. #block-footer{
  1147. display: inline-block;
  1148. margin-bottom: 1em;
  1149. ul{
  1150. margin:0;
  1151. padding:0;
  1152. li{
  1153. pointer-events: all;
  1154. // @include oblique-list;
  1155. display: inline-block;
  1156. &:first-of-type{
  1157. margin-left: 1em;
  1158. }
  1159. a{
  1160. font-size: 0.756em;
  1161. &:before{
  1162. content: "";
  1163. display:inline-block;
  1164. $sq:7px;
  1165. width: $sq; height:$sq;
  1166. border: 1px solid black;
  1167. margin-right: 0.5em;
  1168. }
  1169. &:hover:before,
  1170. &.is-active:before{
  1171. background-color: black;
  1172. }
  1173. &.ajax-loading:before{
  1174. @include spining-loader-square;
  1175. }
  1176. }
  1177. }
  1178. }
  1179. }
  1180. // remove #block-productions from selector
  1181. // to enable again oblique style for all block-menu
  1182. nav#block-productions.block-menu{
  1183. display: inline-block;
  1184. ul{
  1185. margin:0;
  1186. padding:0;
  1187. li{
  1188. pointer-events: all;
  1189. @include oblique-list;
  1190. &:first-of-type{
  1191. margin-left: 1em;
  1192. }
  1193. a{
  1194. &:before{
  1195. content: "";
  1196. display:inline-block;
  1197. $sq:7px;
  1198. width: $sq; height:$sq;
  1199. border: 1px solid black;
  1200. margin-right: 0.5em;
  1201. }
  1202. &:hover:before,
  1203. &.is-active:before{
  1204. background-color: black;
  1205. }
  1206. &.ajax-loading:before{
  1207. @include spining-loader-square;
  1208. }
  1209. }
  1210. }
  1211. }
  1212. }
  1213. // .block-language{
  1214. // display: inline-block;
  1215. // position: relative;
  1216. // ul{
  1217. // position: absolute;
  1218. // bottom:0;
  1219. // margin:0;
  1220. // padding:0;
  1221. // transform-origin: left bottom;
  1222. // transform: rotateZ(-45deg);
  1223. // white-space: nowrap;
  1224. // pointer-events: all;
  1225. // li{
  1226. // margin:0; padding:0;
  1227. // list-style: none;
  1228. // display: inline-block;
  1229. // &:last-of-type{
  1230. // &:before{
  1231. // content:"/";
  1232. // margin:0 0.2em;
  1233. // }
  1234. // }
  1235. // a{
  1236. // color: inherit;
  1237. // text-decoration: none;
  1238. // font-size: 0.756em;
  1239. // }
  1240. // &.is-active{
  1241. // a{color: red;}
  1242. // }
  1243. // }
  1244. // }
  1245. // }
  1246. nav#block-productions.block-menu{
  1247. position: relative;
  1248. pointer-events: none;
  1249. display:none;
  1250. body.path-productions &, body.entity-type-node.bundle-page & {display:inline-block;}
  1251. ul{
  1252. margin-left: -3em;
  1253. white-space: nowrap;
  1254. li{
  1255. height:200px; // this is needed to respect the height of oblique links :(
  1256. a{
  1257. // outline: 1px solid blue;
  1258. pointer-events: all;
  1259. background-color: #fff;
  1260. padding-right: 0.4em;
  1261. &:before{
  1262. content: "";
  1263. display:inline-block;
  1264. $sq:7px;
  1265. width: $sq; height:$sq;
  1266. border: 1px solid red;
  1267. margin-right: 0.5em;
  1268. }
  1269. &:hover:before,
  1270. &.is-active:before,
  1271. &.is-active-trail:before{
  1272. background-color: red;
  1273. }
  1274. &.ajax-loading:before{
  1275. @include spining-loader-square;
  1276. }
  1277. }
  1278. }
  1279. }
  1280. }
  1281. .block-block-edlp-entrees{
  1282. pointer-events: none;
  1283. body.path-productions &,
  1284. body.entity-type-node.bundle-page &,
  1285. body.path-agenda & {display:none}
  1286. display: inline-block;
  1287. // vertical-align: top;
  1288. ul{
  1289. margin:0;
  1290. white-space: nowrap;
  1291. li{
  1292. @include oblique-list;
  1293. margin:0;
  1294. white-space: nowrap;
  1295. pointer-events: none;
  1296. span.oblique-wrapper{
  1297. height:120px; // this is needed to respect the height of oblique links :(
  1298. display: inline-block;
  1299. vertical-align: bottom;
  1300. position: relative;
  1301. width:1.5em;
  1302. }
  1303. a.term-link, a.articles-link{
  1304. // outline: 1px solid blue;
  1305. pointer-events: all;
  1306. background-color: #fff;
  1307. padding-right: 0.4em;
  1308. &:before{
  1309. content: "";
  1310. display:inline-block;
  1311. $sq:7px;
  1312. width: $sq; height:$sq;
  1313. border: 1px solid #000;
  1314. background-color: #000;
  1315. margin-right: 0.5em;
  1316. transition: background-color 0.1s ease-in-out;
  1317. }
  1318. &.articles-link{
  1319. margin-left: 4em;
  1320. text-transform: capitalize;
  1321. }
  1322. }
  1323. .entree-content{
  1324. display: inline-block;
  1325. // outline: 1px solid green;
  1326. width:0;
  1327. overflow: hidden;
  1328. opacity: 0;
  1329. transition: all 300ms ease-in-out;
  1330. transition-property: width,opacity;
  1331. span.oblique-wrapper:first-of-type{
  1332. margin-left: 0.5em;
  1333. }
  1334. span.oblique-wrapper a{
  1335. text-transform: none;
  1336. pointer-events: auto;
  1337. &:before{
  1338. content: "";
  1339. display:inline-block;
  1340. $sq:5px;
  1341. width: $sq; height:$sq;
  1342. border: 1px solid #000;
  1343. margin-right: 0.5em;
  1344. }
  1345. &.ajax-loading:before{
  1346. @include spining-loader-square;
  1347. }
  1348. }
  1349. .term-description{
  1350. display: inline-block;
  1351. margin-left: 1.5em;
  1352. text-align: left;
  1353. width:250px;
  1354. word-wrap:break-word;
  1355. // word-break:break-all;
  1356. hyphens: auto;
  1357. white-space: normal;
  1358. background-color: $transparent-bg;
  1359. padding:0.5em;
  1360. padding-bottom:0;
  1361. p{
  1362. font-size: 0.65em;
  1363. margin:0;
  1364. }
  1365. }
  1366. }
  1367. // TODO: replace variable system by attribute color
  1368. // a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1369. // border-color: attr(color);
  1370. // background-color: attr(color);
  1371. // }
  1372. &[tid='134']{
  1373. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1374. border-color: var(--e-col-134);background-color: var(--e-col-134);}}
  1375. &[tid='121']{
  1376. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1377. border-color: var(--e-col-121);background-color: var(--e-col-121);}}
  1378. &[tid='125']{
  1379. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1380. border-color: var(--e-col-125);background-color: var(--e-col-125);}}
  1381. &[tid='119']{
  1382. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1383. border-color: var(--e-col-119);background-color: var(--e-col-119);}}
  1384. &[tid='132']{
  1385. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1386. border-color: var(--e-col-132);background-color: var(--e-col-132);}}
  1387. &[tid='122']{
  1388. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1389. border-color: var(--e-col-122);background-color: var(--e-col-122);}}
  1390. &[tid='129']{
  1391. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1392. border-color: var(--e-col-129);background-color: var(--e-col-129);}}
  1393. &[tid='120']{
  1394. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1395. border-color: var(--e-col-120);background-color: var(--e-col-120);}}
  1396. &[tid='130']{
  1397. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1398. border-color: var(--e-col-130);background-color: var(--e-col-130);}}
  1399. &[tid='118']{
  1400. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1401. border-color: var(--e-col-118);background-color: var(--e-col-118);}}
  1402. &[tid='127']{
  1403. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1404. border-color: var(--e-col-127);background-color: var(--e-col-127);}}
  1405. &[tid='133']{
  1406. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1407. border-color: var(--e-col-133);background-color: var(--e-col-133);}}
  1408. &[tid='128']{
  1409. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1410. border-color: var(--e-col-128);background-color: var(--e-col-128);}}
  1411. &[tid='124']{
  1412. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1413. border-color: var(--e-col-124);background-color: var(--e-col-124);}}
  1414. &[tid='116']{
  1415. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1416. border-color: var(--e-col-116);background-color: var(--e-col-116);}}
  1417. &[tid='117']{
  1418. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1419. border-color: var(--e-col-117);background-color: var(--e-col-117);}}
  1420. &[tid='131']{
  1421. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1422. border-color: var(--e-col-131);background-color: var(--e-col-131);}}
  1423. &[tid='126']{
  1424. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1425. border-color: var(--e-col-126);background-color: var(--e-col-126);}}
  1426. &[tid='123']{
  1427. a.term-link:before, .entree-content span.oblique-wrapper a:before{
  1428. border-color: var(--e-col-123);background-color: var(--e-col-123);}}
  1429. // &.highlighted{
  1430. // a.term_link{
  1431. // color: red;
  1432. // }
  1433. // }
  1434. .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before{background-color: #fff!important;}
  1435. a.articles-link:not(:hover):not(.is-active):before{
  1436. background-color: #fff!important;
  1437. }
  1438. &:not(.opened){
  1439. a.term-link:not(:hover):not(.highlighted):before{
  1440. background-color: #fff!important;
  1441. }
  1442. }
  1443. &.opened{
  1444. // outline: 1px solid purple;
  1445. a.term-link:after {
  1446. content: '';
  1447. position: absolute;
  1448. left: 15px; right:0;
  1449. bottom: -3px;
  1450. border-bottom: 1px solid grey;
  1451. }
  1452. .entree-content{
  1453. width:350px;
  1454. opacity: 1;
  1455. }
  1456. }
  1457. // &:not(:first-of-type) .entree-content{display: none;}
  1458. }
  1459. }
  1460. }
  1461. $icons_w:20px;
  1462. @mixin iconlinkblock($bgimgurl) {
  1463. pointer-events: all;
  1464. margin-left: 0.5em;
  1465. a{
  1466. $wh:$icons_w;
  1467. display: block;
  1468. width:$wh; height:$wh;
  1469. text-indent: $wh*2;
  1470. margin: 0;
  1471. overflow: hidden;
  1472. mask-image: $bgimgurl;
  1473. mask-size: contain;
  1474. background-color: #000;
  1475. transition: background-color 0.3s ease-in-out;
  1476. cursor: pointer;
  1477. &.is-active{
  1478. background-color: red;
  1479. }
  1480. }
  1481. }
  1482. .block.random-player{
  1483. margin-bottom: 1em;
  1484. @include iconlinkblock(url(../img/random.svg));
  1485. }
  1486. #block-studiolinkblock{
  1487. margin-bottom: 1em;
  1488. @include iconlinkblock(url(../img/studio.svg));
  1489. }
  1490. #block-userlogin{
  1491. margin-bottom: 1em;
  1492. pointer-events: all;
  1493. // outline: 1px solid blue;
  1494. $wh:$icons_w;
  1495. position: relative;
  1496. width:$wh; height: $wh;
  1497. // background-color: blue;
  1498. h2{
  1499. position: relative;
  1500. width:$wh; height:$wh;
  1501. background-image: url(../img/studio.svg);
  1502. // background-color: red;
  1503. background-size: contain;
  1504. text-indent: $wh*2;
  1505. margin: 0;
  1506. overflow: hidden;
  1507. z-index: 1;
  1508. cursor: pointer;
  1509. }
  1510. .block-content{
  1511. z-index: 0;
  1512. position:absolute;
  1513. right:0;bottom:$wh;
  1514. padding:0.5em;
  1515. padding-bottom: 20px;
  1516. background-color: $transparent-bg;
  1517. border-top: 1px solid red;
  1518. border-bottom: 1px solid red;
  1519. overflow: hidden;
  1520. box-sizing:border-box;
  1521. height: 0px;
  1522. opacity:0;
  1523. pointer-events:none;
  1524. transition: all 0.5s ease-in-out;
  1525. transition-property: height,opacity;
  1526. // &:hover{
  1527. // height:200px;
  1528. // opacity:1;
  1529. // pointer-events: auto;
  1530. // }
  1531. form{
  1532. font-size: 0.75em;
  1533. }
  1534. .item-list{
  1535. ul{margin:0;}
  1536. li{
  1537. margin:0;
  1538. list-style: none;
  1539. a{
  1540. color: inherit;
  1541. text-decoration: none;
  1542. font-size: 0.75em;
  1543. white-space:nowrap;
  1544. }
  1545. }
  1546. }
  1547. }
  1548. &:hover{
  1549. .block-content{
  1550. height:200px;
  1551. opacity: 1;
  1552. pointer-events:auto;
  1553. }
  1554. }
  1555. }
  1556. #block-edlpsearchlinkblock{
  1557. margin-bottom: 1em;
  1558. @include iconlinkblock(url(../img/search.svg));
  1559. margin-left: 0.2em;
  1560. }
  1561. }
  1562. // _ _ _ ___
  1563. // | \| |___ __| |___ | _ \___ _ __ _ _ _ __
  1564. // | .` / _ \/ _` / -_) | _/ _ \ '_ \ || | '_ \
  1565. // |_|\_\___/\__,_\___| |_| \___/ .__/\_,_| .__/
  1566. // |_| |_|
  1567. .node-popup{
  1568. .inner{
  1569. position: relative;
  1570. .entrees{
  1571. span{
  1572. @include entrie-micro-square;
  1573. }
  1574. }
  1575. .title{
  1576. margin:0.3em 0;
  1577. font-size: 1.2em;
  1578. font-weight: 500;
  1579. }
  1580. .description{
  1581. p{
  1582. margin:0;
  1583. font-size: 0.75em;
  1584. }
  1585. }
  1586. .chutier-icon{
  1587. position:absolute;
  1588. top:1em; right:1em;
  1589. }
  1590. }
  1591. }
  1592. // __ ___ _ ___ _ _ _
  1593. // \ \ / (_)__| |___ ___| __(_) | |_ ___ _ _
  1594. // \ V /| / _` / -_) _ \ _|| | | _/ -_) '_|
  1595. // \_/ |_\__,_\___\___/_| |_|_|\__\___|_|
  1596. // complete rewrite of url_to_video_filter css
  1597. .url-to-video-container{
  1598. // display:block;
  1599. margin:10px auto;
  1600. // width:100%;
  1601. &.no-js{
  1602. border:solid black 1px;
  1603. .loader{
  1604. // background:url(../images/no-js.png) no-repeat center center;
  1605. // background-size:40px 40px;
  1606. }
  1607. .url-to-video-player{
  1608. cursor:auto;
  1609. }
  1610. }
  1611. .loader{
  1612. // top:240px;
  1613. // left:50%;
  1614. // transform:translate(-50%, -50%);
  1615. // background:#FFF url(../images/ajax-loader.gif) no-repeat center center;
  1616. top:auto; left: auto;
  1617. transform: none;
  1618. }
  1619. span.url-to-video-player{
  1620. // display:block;
  1621. // width:100%;
  1622. /* assuming that the video has a 16:9 ratio */
  1623. // padding-bottom:56.25%;
  1624. padding-bottom:0;
  1625. // overflow:hidden;
  1626. // position:relative;
  1627. // width:100%;
  1628. // height:100%;
  1629. height:auto;
  1630. // cursor:hand;
  1631. // cursor:pointer;
  1632. // display: block;
  1633. &:before{
  1634. content: "";
  1635. display: block;
  1636. /* assuming that the video has a 16:9 ratio */
  1637. padding-top: 56.25%;
  1638. }
  1639. img.player-thumb
  1640. {
  1641. // background-position:center center;
  1642. // background-size:cover;
  1643. // position: absolute;
  1644. // top: 0;
  1645. // left: 0;
  1646. // width: 100%;
  1647. // height: 100%;
  1648. // cursor:pointer;
  1649. }
  1650. .play-button
  1651. {
  1652. z-index: 5;
  1653. // height:40px;
  1654. // width:40px;
  1655. // display:block;
  1656. // background:url(../images/play-button.png) no-repeat center center;
  1657. // background-size:40px 40px;
  1658. // position:absolute;
  1659. // top:240px;
  1660. top:50%;
  1661. // left:50%;
  1662. // transform:translate(-50%, -50%);
  1663. // cursor:pointer;
  1664. }
  1665. iframe.player-iframe
  1666. {
  1667. // width:100%;
  1668. // height:100%;
  1669. // position:absolute;
  1670. // top:0;
  1671. // left:0;
  1672. }
  1673. }
  1674. }