styles.scss 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101
  1. /**
  2. * Primary Drupal Styles
  3. * Author: Bachir Soussi Chiadmi
  4. */
  5. @function lower-bound($range) {
  6. @if length($range) <= 0 {
  7. @return 0;
  8. }
  9. @return nth($range, 1);
  10. }
  11. @function upper-bound($range) {
  12. @if length($range) < 2 {
  13. @return 999999999999;
  14. }
  15. @return nth($range, 2);
  16. }
  17. @function em-calc($px-value, $rem-base: 16) {
  18. $value: $px-value / $rem-base;
  19. @return $value * 1em;
  20. // @return $px-value * 1px;
  21. }
  22. $small-range: (0, em-calc(640)); /* between 0 & 640px */
  23. $medium-range: (em-calc(641), em-calc(1024)); /* between 640px & 1024px */
  24. $large-range: (em-calc(1025), em-calc(1366)); /* between 1025px & 1366px */
  25. $xlarge-range: (em-calc(1367), em-calc(1920)); /* between 1367px & 1920px */
  26. $xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */
  27. $screen: 'only screen';
  28. $landscape: '#{$screen} and (orientation: landscape)';
  29. $portrait: '#{$screen} and (orientation: portrait)';
  30. $small-up: $screen;
  31. $small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})';
  32. $medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})';
  33. $medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})';
  34. $large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})';
  35. $large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})';
  36. $xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})';
  37. $xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})';
  38. $xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})';
  39. $xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})';
  40. body{
  41. font-size:16px;
  42. font-family: "aileron", Arial, "MS Trebuchet", sans-serif;
  43. }
  44. // a{color: #007BC2; text-decoration: none;}
  45. h1{font-size:1.6em;}
  46. h2{font-size:1.5em;}
  47. h3{font-size:1.4em;}
  48. h4{font-size:1.3em;}
  49. h5{font-size:1.2em;}
  50. h6{font-size:1.1em;}
  51. input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;}
  52. // __
  53. // _________ / /___ __________
  54. // / ___/ __ \/ / __ \/ ___/ ___/
  55. // / /__/ /_/ / / /_/ / / (__ )
  56. // \___/\____/_/\____/_/ /____/
  57. $vert : #20c498;
  58. $bleu : #1f04a1;
  59. // $rouge : #fb3f08;
  60. $coul0 : #2f82ff;
  61. $coul1 : #ff0000;
  62. $coul2 : #88aa00;
  63. $coul3 : #ff6600;
  64. $coul4 : #ff2ad4;
  65. $coul5 : #8800aa;
  66. /** layout */
  67. .footer-block .region, .header-block{ display:inline-block; vertical-align: top;}
  68. #header, #main, #footer{ padding:0; }
  69. body{
  70. }
  71. $maxw:1000px;
  72. @mixin main_centred(){
  73. width:95%;
  74. margin:0 auto;
  75. @media #{$large-up} {
  76. max-width: $maxw;
  77. }
  78. }
  79. $header_height_small:200px;
  80. $header_height_large:400px;
  81. #header{
  82. width:100%;
  83. z-index: 20;
  84. background-color: transparentize(#fff, 0.05);
  85. background-image: url(../../images/fond-trame-logo-lite.png);
  86. background-repeat: no-repeat;
  87. background-position: center top;
  88. background-size: contain;
  89. max-height: $header_height_small;
  90. @media #{$xlarge-up} {
  91. position: fixed;
  92. max-height: $header_height_large;
  93. }
  94. hgroup.logo{
  95. @include main_centred();
  96. padding: 1em 0 0;
  97. }
  98. h1{margin:0;}
  99. h1 a{
  100. display:block;
  101. height:$header_height_small*0.6;
  102. @media #{$xlarge-up} {
  103. height: $header_height_large*0.8;
  104. }
  105. // transition: height 0.1s ease-in-out;
  106. background-image: url(../../images/logo.png);
  107. background-size: contain;
  108. background-position: center;
  109. background-repeat: no-repeat;
  110. text-indent: -2000px;
  111. overflow: hidden;
  112. margin: 0;
  113. }
  114. h2{
  115. text-align: center;
  116. color:$vert;
  117. font-size: 1em;
  118. font-weight: 500;
  119. @media #{$xlarge-up} {
  120. font-size: 2em;
  121. }
  122. }
  123. }
  124. #main{
  125. // padding-top: $header_height_small;
  126. @media #{$xlarge-up} {
  127. padding-top: $header_height_large;
  128. }
  129. @include main_centred();
  130. >.region{
  131. }
  132. }
  133. // about
  134. #node-63{
  135. // color:$bleu;
  136. padding:1em 0;
  137. .content{
  138. // padding:0 7em;
  139. section{display: inline;}
  140. p{
  141. // text-align: center;
  142. margin:0;
  143. font-size: 1em;
  144. line-height: 1.2;
  145. font-weight: 400;
  146. em{
  147. font-weight: 500;
  148. }
  149. @media #{$large-up} {
  150. font-size: 1.3em;
  151. line-height: 1.3;
  152. }
  153. }
  154. }
  155. ul.links{
  156. // display: block;
  157. text-align: right;
  158. margin: 0; padding: 0;
  159. li{margin: 0; padding: 0; display: inline-block;}
  160. a{
  161. color: $vert; text-decoration: none;
  162. font-weight: 500;
  163. }
  164. }
  165. }
  166. #thematique-anchor-links{
  167. display:none;
  168. @media #{$medium-up} {
  169. display:block;
  170. }
  171. padding:2em 0 4em;
  172. ul{
  173. display: flex;
  174. flex-flow: row nowrap;
  175. justify-content: space-between;
  176. padding:0; margin:0;
  177. li{
  178. max-width: 7em;
  179. list-style: none;
  180. padding:0; margin: 0;
  181. a{
  182. // color: $bleu;
  183. text-decoration: none;
  184. font-weight: 600;
  185. display:block;
  186. min-height: 3em;
  187. background-position: center;
  188. background-repeat: no-repeat;
  189. background-size: contain;
  190. span{
  191. display: block;
  192. }
  193. @mixin anchor($bg, $sb_bg, $coul){
  194. background-image: $bg;
  195. color:$coul;
  196. &.en_attente{
  197. // opacity: 0.4;
  198. color:#aaa;//transparentize($coul, 0.8);//saturate(lighten($coul, 40%), 90%);
  199. background-image: $sb_bg;
  200. cursor: default;
  201. }
  202. }
  203. &.node-32{
  204. @include anchor(
  205. url(../../images/menu-fond-theme-0-flat.jpg),
  206. url(../../images/menu-fond-theme-0-flat-nb.jpg),
  207. $coul0);
  208. }
  209. &.node-14{
  210. @include anchor(
  211. url(../../images/menu-fond-theme-1-flat.jpg),
  212. url(../../images/menu-fond-theme-1-flat-nb.jpg),
  213. $coul1);
  214. }
  215. &.node-38{
  216. @include anchor(
  217. url(../../images/menu-fond-theme-2-flat.jpg),
  218. url(../../images/menu-fond-theme-2-flat-nb.jpg),
  219. $coul2);
  220. }
  221. &.node-3{
  222. @include anchor(
  223. url(../../images/menu-fond-theme-3-flat.jpg),
  224. url(../../images/menu-fond-theme-3-flat-nb.jpg),
  225. $coul3);
  226. }
  227. &.node-20{
  228. @include anchor(
  229. url(../../images/menu-fond-theme-4-flat.jpg),
  230. url(../../images/menu-fond-theme-4-flat-nb.jpg),
  231. $coul4);
  232. }
  233. &.node-26{
  234. @include anchor(
  235. url(../../images/menu-fond-theme-5-flat.jpg),
  236. url(../../images/menu-fond-theme-5-flat-nb.jpg),
  237. $coul5);
  238. }
  239. &:hover{
  240. // TODO: anchor link over effect
  241. }
  242. }
  243. }
  244. }
  245. }
  246. //
  247. // html,
  248. // body,
  249. // #container,
  250. // #main,
  251. // #main>.region,
  252. // #block-system-main,
  253. // #block-system-main>.content,
  254. // .node-thematique{
  255. // overflow-x: visible;
  256. // }
  257. @mixin vidlabel(){
  258. font-size: 0.7em;
  259. background-color: rgba(255,255,255,0.9);
  260. font-weight: 600;
  261. padding:0.2em 0.4em;
  262. display: inline-block;
  263. @media #{$large-up} {
  264. font-size: 1em;
  265. }
  266. }
  267. // thematique
  268. .node-thematique{
  269. // min-height:766px;
  270. margin-top: 2em;
  271. margin-bottom: 7em;
  272. @media #{$xlarge-up} {
  273. margin-top: 0;
  274. }
  275. position: relative;
  276. &::before{
  277. position: absolute;
  278. content:" ";
  279. z-index: -1;
  280. background-position: center;
  281. background-repeat: no-repeat;
  282. background-size: cover;
  283. width:100%; height:100%;
  284. top:0; left:0;
  285. @media #{$xlarge-up} {
  286. background-size: contain;
  287. width:110%; height:110%;
  288. top:-5%; left:-5%;
  289. }
  290. }
  291. &.en_attente::before{
  292. background-size: contain;
  293. background-position: left;
  294. }
  295. @mixin node_thema($bg, $sb_bg, $coul){
  296. &::before{background-image: $bg;}
  297. >h2,
  298. .group-video .field-name-field-description h3,
  299. .group-description .field-name-field-ecouter,
  300. .node-documentair .field-name-field-doc,
  301. .node-documentair .field-name-title-field,
  302. .field-name-field-episodes .field-label,
  303. .node-episode .field-name-title-field,
  304. .node-episode span.date{color: $coul;}
  305. .field-name-body .summary{
  306. border-left-color: $coul;
  307. }
  308. }
  309. &.node-32{
  310. @include node_thema(
  311. url(../../images/fond-theme-0-flat.png),
  312. url(../../images/fond-theme-0-flat-nb.jpg),
  313. $coul0);
  314. }
  315. &.node-14{
  316. @include node_thema(
  317. url(../../images/fond-theme-1-flat.png),
  318. url(../../images/fond-theme-1-flat-nb.jpg),
  319. $coul1);
  320. }
  321. &.node-38{
  322. @include node_thema(
  323. url(../../images/fond-theme-2-flat.png),
  324. url(../../images/fond-theme-2-flat-nb.jpg),
  325. $coul2);
  326. }
  327. &.node-3{
  328. @include node_thema(
  329. url(../../images/fond-theme-3-flat.png),
  330. url(../../images/fond-theme-3-flat-nb.jpg),
  331. $coul3);
  332. }
  333. &.node-20{
  334. @include node_thema(
  335. url(../../images/fond-theme-4-flat.png),
  336. url(../../images/fond-theme-4-flat-nb.jpg),
  337. $coul4);
  338. }
  339. &.node-26{
  340. @include node_thema(
  341. url(../../images/fond-theme-5-flat.png),
  342. url(../../images/fond-theme-5-flat-nb.jpg),
  343. $coul5);
  344. }
  345. @mixin white_shadow($d, $b, $c){
  346. @if length($d){
  347. $d:2px;
  348. }
  349. @if length($b){
  350. $b:0;
  351. }
  352. @if length($c){
  353. $c:white;
  354. }
  355. text-shadow:
  356. $d $d $b $c,
  357. -$d $d $b $c,
  358. -$d -$d $b $c,
  359. $d -$d $b $c;
  360. }
  361. >h2{
  362. font-size: 3em;
  363. font-weight: 400;
  364. line-height: 0.9;
  365. text-indent: -0.09em;
  366. position:relative;
  367. margin:0;
  368. padding: 0 1em 0 0;
  369. @media #{$xlarge-up} {
  370. padding: 0 2em 0 0;
  371. font-size: 4em;
  372. padding:0;
  373. }
  374. span.target{
  375. position: absolute;
  376. top:-120px;
  377. @media #{$xlarge-up} {
  378. top:-170px;
  379. }
  380. }
  381. span.date{
  382. font-size: 0.3em;
  383. font-weight: 600;
  384. display: block;
  385. text-indent: 0.2em;
  386. // color: #000;
  387. }
  388. }
  389. .content{
  390. letter-spacing: -0.25em;
  391. >*{letter-spacing: normal;}
  392. $main_w : 69.5%;
  393. $right_w : 30.5%;
  394. $gouttiere: 1.2em;
  395. // _
  396. // ____ ___ ____ _(_)___
  397. // / __ `__ \/ __ `/ / __ \
  398. // / / / / / / /_/ / / / / /
  399. // /_/ /_/ /_/\__,_/_/_/ /_/
  400. article.main{
  401. @media #{$medium-up} {
  402. display: inline-block;
  403. vertical-align: top;
  404. width:$main_w;
  405. }
  406. overflow: hidden;
  407. .field-name-body{
  408. position: relative; z-index: 3;
  409. >*{padding:0 1em 0 0;}
  410. .summary{
  411. position: relative;
  412. // background-color: transparentize(#fff, 0.2);
  413. transition: background-color 0.5 ease-in-out;
  414. @media #{$large-up} {
  415. height:7em; overflow: hidden;
  416. }
  417. p{
  418. font-size: 1.05em;
  419. padding:0.5em 0;
  420. margin: 0;
  421. font-weight: 500;
  422. @media #{$large-up} {
  423. padding:0.5em 1.2em 0.5em;
  424. }
  425. }
  426. border-left-style:solid;
  427. border-left-width: 0;
  428. }
  429. .value{
  430. display:none;
  431. @media #{$medium-up} {
  432. display: block;
  433. }
  434. position:absolute;
  435. height:1px; margin-bottom: 0;
  436. transition:height 0.5s ease-in-out;
  437. background-color: #fff;
  438. overflow: hidden;
  439. p{
  440. font-size: 0.95em; padding: 1em 1em 0 1.5em; line-height: 1.3; margin:0;
  441. background-color: #fff;
  442. }
  443. }
  444. @media #{$medium-up} {
  445. &:hover{
  446. // .summary{background-color: #fff;}
  447. .value{
  448. height:700px;
  449. }
  450. }
  451. }
  452. // p{padding:0 0 1em; margin: 0;}
  453. } //field-name-body
  454. .group-video{
  455. position: relative;
  456. @media #{$large-up} {
  457. // min-height: 432px;
  458. }
  459. .field-name-field-emvideo img{
  460. max-width: 100%; height: auto;
  461. }
  462. .field-name-field-emvideo a{ display: block; line-height: 0;}
  463. .group-description{
  464. cursor: pointer; pointer-events: none;
  465. position:absolute; z-index: 2;
  466. top:0; left: 0;
  467. width:100%; height:100%;
  468. .field-name-field-ecouter{
  469. @include vidlabel();
  470. margin:5px;
  471. @media #{$large-up} {
  472. margin:15px;
  473. }
  474. }
  475. .field-name-field-description{
  476. position: absolute;
  477. top:0; left:0;
  478. box-sizing: border-box;
  479. width:80%;
  480. height:70%;
  481. margin:10%;
  482. padding:5%;
  483. opacity: 0;
  484. background-color: rgba(255,255,255,0.9);
  485. transition: opacity 0.3s ease-in-out;
  486. h3{
  487. font-weight: 500; font-size: 2em; margin:0;
  488. }
  489. }
  490. }
  491. @media #{$medium-up} {
  492. &:hover .group-description{
  493. // background-color: rgba(255,255,255,0.9);
  494. // .field-name-field-ecouter{
  495. // background-color: rgba(255,255,255,0);
  496. // }
  497. .field-name-field-description{opacity:1;}
  498. }
  499. }
  500. }
  501. }
  502. // __
  503. // ____/ /___ __________
  504. // / __ / __ \/ ___/ ___/
  505. // / /_/ / /_/ / /__(__ )
  506. // \__,_/\____/\___/____/
  507. aside.right{
  508. margin-top:$gouttiere;
  509. @media #{$medium-up} {
  510. display: inline-block;
  511. vertical-align: top;
  512. width: $right_w;
  513. margin-top: 0;
  514. }
  515. .field-name-field-eclairages{
  516. @media #{$medium-up} {
  517. padding-left:1em;
  518. }
  519. .field-items{
  520. display: flex;
  521. flex-flow: row wrap;
  522. justify-content: flex-start;
  523. @media #{$medium-up} {
  524. display: block;
  525. }
  526. &>.field-item{
  527. display: block;
  528. background-color: #fff;
  529. width:33%;
  530. @media #{$medium-up} {
  531. width:auto;
  532. &:not(:last-child){
  533. padding-bottom: $gouttiere;
  534. }
  535. }
  536. }
  537. }
  538. }
  539. .node-documentair{
  540. // min-height: 150px;
  541. background-color: #fff;
  542. .content{
  543. position: relative;
  544. .group-txt{
  545. cursor: pointer; pointer-events: none;
  546. box-sizing: border-box;
  547. position:absolute; z-index: 2; overflow: hidden;
  548. top:0; left:0; width:90%; height:80%;
  549. margin:5px;
  550. @media #{$medium-up} {
  551. margin:15px;
  552. }
  553. // opacity: 0;
  554. .field-name-field-doc{
  555. @include vidlabel;
  556. z-index:5;
  557. transition:background-color 0.3s ease-in-out;
  558. }
  559. .field-name-title-field{
  560. position: absolute; z-index: -1;
  561. top:0; left:0; width: 100%;
  562. font-size: 1.5em;
  563. font-weight: 500;
  564. padding: 30px 7px 10px;
  565. background-color: rgba(255, 255, 255, 0.9);
  566. opacity: 0;
  567. transition:opacity 0.3s ease-in-out;
  568. }
  569. }
  570. .group-video img{ width:100%; height:auto;}
  571. .group-video a{ display: block; line-height: 0;}
  572. }
  573. @media #{$medium-up} {
  574. &:not(.en_attente):hover .group-txt{
  575. .field-name-field-doc{background-color: transparent;}
  576. .field-name-title-field{opacity: 1;}
  577. }
  578. }
  579. &.en_attente>.content{
  580. position: relative;
  581. &::before{
  582. position: absolute;
  583. top:0; left:0;
  584. width:100%; height:100%;
  585. content:" ";
  586. z-index: 10;
  587. background-color: #fff;
  588. opacity: 0.8;
  589. }
  590. }
  591. }
  592. }
  593. // _ __
  594. // ___ ____ (_)________ ____/ /__ _____
  595. // / _ \/ __ \/ / ___/ __ \/ __ / _ \/ ___/
  596. // / __/ /_/ / (__ ) /_/ / /_/ / __(__ )
  597. // \___/ .___/_/____/\____/\__,_/\___/____/
  598. // /_/
  599. aside.bottom{
  600. padding-top: $gouttiere;
  601. @media #{$medium-up} {
  602. padding-top: $gouttiere*0.5;
  603. }
  604. .field-name-field-episodes{
  605. // letter-spacing: -0.25em;
  606. .field-label{
  607. @include vidlabel;
  608. margin-bottom: 0.3em;
  609. }
  610. &>.field-items{
  611. display: flex;
  612. flex-flow: row wrap;
  613. justify-content: flex-start;
  614. @media #{$medium-up} {
  615. flex-flow: row nowrap;
  616. justify-content: space-between;
  617. }
  618. &>.field-item{
  619. display: block;
  620. background-color: #fff;
  621. width:50%;
  622. @media #{$medium-up} {
  623. width:19%;
  624. }
  625. .node-episode{
  626. .content{
  627. position: relative;
  628. .group-txt{
  629. cursor: pointer; pointer-events: none;
  630. box-sizing: border-box;
  631. position:absolute; z-index: 2; overflow: hidden;
  632. top:0; left:0; width:90%; height:80%;
  633. margin:5%; padding:5%;
  634. background-color: rgba(255, 255, 255, 0.9);
  635. opacity: 1;
  636. transition:opacity,background-color 0.3s ease-in-out;
  637. z-index: 11;
  638. .field-name-title-field{
  639. font-size: 3em;
  640. font-weight: 300;
  641. line-height: 1;
  642. font-style: italic;
  643. text-align: center;
  644. @media #{$large-up} {
  645. font-size: 4em;
  646. }
  647. }
  648. }
  649. .group-video img{ width:100%; height:auto;}
  650. .group-video a{ display: block; line-height: 0;}
  651. }
  652. &:not(.en_attente):hover .content .group-txt{
  653. opacity: 0.9;
  654. background-color: rgba(255, 255, 255, 0.3);
  655. .field-name-title-field{
  656. font-weight: 500;
  657. }
  658. }
  659. &.en_attente>.content{
  660. position: relative;
  661. &::before{
  662. position: absolute;
  663. top:0; left:0;
  664. width:100%; height:100%;
  665. content:" ";
  666. z-index: 10;
  667. background-color: #fff;
  668. opacity: 0.8;
  669. }
  670. .field-name-title-field{
  671. font-size: 2em;
  672. @media #{$large-up} {
  673. font-size: 3em;
  674. }
  675. span.date{
  676. display: block;
  677. font-size: 0.3em;
  678. font-weight: 500;
  679. font-style: normal;
  680. padding-top: 0.3em;
  681. }
  682. }
  683. }
  684. }
  685. }
  686. }
  687. }
  688. .field-name-body{
  689. // display:none;
  690. }
  691. }
  692. }
  693. // &.en_attente{
  694. // .content>.main{
  695. // position: relative;
  696. // &::before{
  697. // position: absolute;
  698. // top:0; left:0;
  699. // width:100%; height:100%;
  700. // content:" ";
  701. // z-index: 10;
  702. // background-color: #fff;
  703. // opacity: 0.8;
  704. // }
  705. // }
  706. // }
  707. }
  708. // ____ __
  709. // / __ \_ _____ _____/ /___ ___ __
  710. // / / / / | / / _ \/ ___/ / __ `/ / / /
  711. // / /_/ /| |/ / __/ / / / /_/ / /_/ /
  712. // \____/ |___/\___/_/ /_/\__,_/\__, /
  713. // /____/
  714. #DOMWindowOverlay{
  715. // background-color: #fff!important;
  716. }
  717. #DOMWindow{
  718. .embedded-video, .player ,iframe{
  719. width:100%;
  720. height:100%;
  721. }
  722. }
  723. // ____
  724. // / __ \____ _____ ____
  725. // / /_/ / __ `/ __ `/ _ \
  726. // / ____/ /_/ / /_/ / __/
  727. // /_/ \__,_/\__, /\___/
  728. // /____/
  729. .page-title{
  730. font-size: 4em;
  731. font-weight: 400;
  732. color: $vert;
  733. text-transform: capitalize;
  734. text-indent: -0.09em;
  735. margin: 1em 0 0;
  736. }
  737. body.node-type-page{
  738. h2{
  739. font-size: 1.5em;
  740. font-weight: 400;
  741. }
  742. h3{
  743. font-size: 2em;
  744. font-weight: 300;
  745. margin:1em 0 0;
  746. }
  747. p{
  748. line-height: 1.3;
  749. }
  750. a{
  751. color: $vert;
  752. }
  753. }
  754. // ______ __
  755. // / ____/___ ____ / /____ _____
  756. // / /_ / __ \/ __ \/ __/ _ \/ ___/
  757. // / __/ / /_/ / /_/ / /_/ __/ /
  758. // /_/ \____/\____/\__/\___/_/
  759. #footer{
  760. }
  761. #block-menu-menu-footer-menu{
  762. padding:2em 0;
  763. ul{ margin:0; padding:0; text-align: center;}
  764. li{display:inline-block; list-style: none;}
  765. a{
  766. text-decoration: none;
  767. color: $vert;
  768. font-size: 1.4em;
  769. font-weight: 400;
  770. &:hover{
  771. font-weight: 500;
  772. }
  773. }
  774. }
  775. .region-footer-bottom{
  776. text-align: center;
  777. }
  778. .region-footer-bottom .block{
  779. display: inline-block;
  780. font-size:0.7em;
  781. margin: 2em 0;
  782. a{
  783. color: inherit;
  784. }
  785. }
  786. #content{padding:1em;}
  787. // _ __ _
  788. // | | / /_ _______(_) ____ ______ _
  789. // | | /| / / / / / ___/ / | /| / / / / / __ `/
  790. // | |/ |/ / /_/ (__ ) /| |/ |/ / /_/ / /_/ /
  791. // |__/|__/\__, /____/_/ |__/|__/\__, /\__, /
  792. // /____/ /____//____/
  793. .mceContentBody{
  794. div{border: 1px dashed #D4D4D4;}
  795. p:after, ul:after{content:"¬"; color:red;}
  796. h1:before, h2:before, h3:before, h4:before, h5:before, h6:before{
  797. color:blue; font-weight: normal; font-size:10px; vertical-align: super;
  798. }
  799. h1:before{content:"h1 ";}
  800. h2:before{content:"h2 ";}
  801. h3:before{content:"h3 ";}
  802. h4:before{content:"h4 ";}
  803. h5:before{content:"h5 ";}
  804. h6:before{content:"h6 ";}
  805. p{ border: 1px dashed #848484; }
  806. div{border: 1px solid #1A1A1A;}
  807. h2{
  808. font-size: 1.5em;
  809. font-weight: 400;
  810. }
  811. h3{
  812. font-size: 2em;
  813. font-weight: 300;
  814. margin:1em 0 0;
  815. }
  816. p{
  817. line-height: 1.3;
  818. }
  819. a{
  820. color: $vert;
  821. }
  822. }
  823. /** Messages. */
  824. div.messages {
  825. padding: 9px;
  826. margin: 0.5em 0 0;
  827. color: #036;
  828. background: #bdf;
  829. border: 1px solid #ace;
  830. -moz-border-radius: 5px;
  831. -webkit-border-radius: 5px;
  832. border-radius: 5px;
  833. }
  834. div.warning {
  835. color: #840;
  836. background: #fe6;
  837. border-color: #ed5;
  838. }
  839. div.error {
  840. color: #fff;
  841. background: #e63;
  842. border-color: #d52;
  843. }
  844. div.error p.error {
  845. color: #333;
  846. }
  847. div.status {
  848. color: #360;
  849. background: #cf8;
  850. border-color: #be7;
  851. }
  852. /** Tab navigation */
  853. ul.primary, .views-admin-links ul {
  854. font:13px/1.231 sans-serif; *font-size:small;
  855. border-collapse: collapse;
  856. padding: 0 0 0 1em; /* LTR */
  857. white-space: nowrap;
  858. list-style: none;
  859. margin: 5px;
  860. height: auto;
  861. line-height: normal;
  862. // border-bottom: 1px solid #bbb;
  863. }
  864. ul.primary li, .views-admin-links li{
  865. display: inline;
  866. }
  867. ul.primary li a, .views-admin-links li a {
  868. // background-color: #ddd;
  869. // border-color: #bbb;
  870. border-width: 1px;
  871. border-style: solid solid none solid;
  872. height: auto;
  873. margin-right: 0.5em; /* LTR */
  874. padding: 0 1em;
  875. text-decoration: none;
  876. -moz-border-radius-topleft: 5px;
  877. -webkit-border-top-left-radius: 5px;
  878. border-top-left-radius: 5px;
  879. -moz-border-radius-topright: 5px;
  880. -webkit-border-top-right-radius: 5px;
  881. border-top-right-radius: 5px;
  882. }
  883. // ul.primary li.active a {
  884. // background-color: #fff;
  885. // border: 1px solid #bbb;
  886. // border-bottom: #fff 1px solid;
  887. // }
  888. // ul.primary li a:hover, .views-admin-links li a:hover{
  889. // background-color: #eee;
  890. // border-color: #ccc;
  891. // border-bottom-color: #eee;
  892. // }
  893. // ul.secondary {
  894. // border-bottom: 1px solid #bbb;
  895. // padding: 0.5em 1em;
  896. // margin: 5px;
  897. // }
  898. // ul.secondary li {
  899. // display: inline;
  900. // padding: 0 1em;
  901. // border-right: 1px solid #ccc; /* LTR */
  902. // }
  903. // ul.secondary a {
  904. // padding: 0;
  905. // text-decoration: none;
  906. // }
  907. // ul.secondary a.active {
  908. // border-bottom: 4px solid #999;
  909. // }
  910. //
  911. /** Form */
  912. #node-form .form-region-main{border-right: 1px solid #BFBFBF; padding-right:10px; width:68%;}
  913. #node-form .form-region-main label{float:left; min-width:25%;}
  914. #node-form .form-region-main input.form-text{width:40%;}
  915. #node-form .form-region-right{padding-left:5px;}
  916. #node-form .form-region-right label{float:left; min-width:35%;}
  917. #node-form .form-region-right input.form-text{width:60%;}
  918. #node-form .form-region-main label.option, #node-form .form-region-right label.option{float: none;}
  919. form:not( #views-ui-config-item-form ) .form-item {
  920. position:relative;
  921. /* padding:9px;*/
  922. }
  923. form:not( #views-ui-config-item-form ) .form-item .description{
  924. position:absolute;
  925. bottom:140%;
  926. /* right:-15px;*/
  927. z-index:5;
  928. left:50%;
  929. color:#1A1A1A;
  930. line-height:1.1;
  931. background:url(../images/popup.png) 50% 100% no-repeat;
  932. width:240px;
  933. margin:0px 0px -15px;
  934. padding:9px 10px 20px;
  935. display:none;
  936. border-top: 1px solid #9F9F9F;
  937. }
  938. form:not( #views-ui-config-item-form ) .form-item:hover {
  939. z-index:1;
  940. height:auto; /* Fix for flicker in IE7 */
  941. }
  942. form:not( #views-ui-config-item-form ) .form-item:hover > .description { display:block; }
  943. fieldset{
  944. border: 1px solid #D4D4D4;
  945. padding:10px;
  946. margin-bottom:1em;
  947. -moz-border-radius: 5px;
  948. -webkit-border-radius: 5px;
  949. border-radius: 5px;
  950. }
  951. fieldset legend{
  952. font-size:1.6em;
  953. }
  954. input.form-text{max-width:95%;}
  955. /** TABLE */
  956. table{width:100%;
  957. -moz-border-radius: 5px;
  958. -webkit-border-radius: 5px;
  959. border-radius: 5px;
  960. }
  961. table thead th{
  962. background-color: #CCC;
  963. padding:0.5em 1em;
  964. text-align: left;
  965. }
  966. table tbody tr.even, table tbody tr.odd{
  967. border-bottom: 0 solid #CCCCCC;
  968. padding: 0.1em 0.6em;
  969. }
  970. table tbody tr.even{background-color: #EEE;}
  971. table tbody tr.odd{background-color: #E5E5E5;}
  972. table tbody td{
  973. padding:0.5em 1em;
  974. text-align: left;
  975. }
  976. td.active {background-color: transparent;}
  977. #tasks{
  978. .tabs{
  979. border: none;
  980. padding:0;
  981. a{
  982. border:none;
  983. border-radius: 3px;
  984. background-color: #eee;
  985. padding:0.4em;
  986. color: #000;
  987. margin:0 1em 0 0;
  988. &.active{
  989. background-color: #999;
  990. }
  991. }
  992. }
  993. }