styles.scss 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. /**
  2. * Primary Drupal Styles
  3. * Author: Bachir Soussi Chiadmi
  4. */
  5. body{
  6. font-size:16px;
  7. font-family: "aileron", Arial, "MS Trebuchet", sans-serif;
  8. }
  9. // a{color: #007BC2; text-decoration: none;}
  10. h1{font-size:1.6em;}
  11. h2{font-size:1.5em;}
  12. h3{font-size:1.4em;}
  13. h4{font-size:1.3em;}
  14. h5{font-size:1.2em;}
  15. h6{font-size:1.1em;}
  16. input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;}
  17. // __
  18. // _________ / /___ __________
  19. // / ___/ __ \/ / __ \/ ___/ ___/
  20. // / /__/ /_/ / / /_/ / / (__ )
  21. // \___/\____/_/\____/_/ /____/
  22. $vert : #20c498;
  23. $bleu : #1f04a1;
  24. $rouge : #fb3f08;
  25. /** layout */
  26. #center, #sidebar-first, #sidebar-second, .footer-block .region, .header-block{ display:inline-block; vertical-align: top;}
  27. body.two-sidebars #center { width: 54%; }
  28. body.sidebar-first #center { width: 73%; }
  29. body.sidebar-second #center { width: 80%; }
  30. body.no-sidebars #center { width: 100%; }
  31. #sidebar-first { width: 24%; }
  32. #sidebar-second { width: 18%; }
  33. #header, #main, #footer{ padding:0; }
  34. body{
  35. }
  36. #container{
  37. width:1024px; margin:0 auto;
  38. }
  39. #header{
  40. h1{
  41. display:block;
  42. height:335px;
  43. background-image: url(../../images/logo.png);
  44. background-size: contain;
  45. background-position: center;
  46. background-repeat: no-repeat;
  47. text-indent: -2000px;
  48. overflow: hidden;
  49. margin: 0;
  50. }
  51. h2{
  52. text-align: center;
  53. color:$vert;
  54. }
  55. }
  56. // about
  57. #node-63{
  58. color:$bleu;
  59. }
  60. #thematique-anchor-links{
  61. padding:1em 0;
  62. ul{
  63. display: flex;
  64. flex-flow: row nowrap;
  65. justify-content: space-between;
  66. padding:0; margin:0;
  67. li{
  68. list-style: none;
  69. padding:0; margin: 0;
  70. a{
  71. color: $bleu;
  72. text-decoration: none;
  73. font-weight: 600;
  74. }
  75. }
  76. }
  77. }
  78. // thematique
  79. .panel-thematique{
  80. background-position: center;
  81. background-size: contain;
  82. background-repeat: no-repeat;
  83. .field-name-field-emvideo img{
  84. width: 100%;
  85. }
  86. header.top h2{
  87. font-size: 2.5em;
  88. font-weight: 300;
  89. color: $rouge;
  90. }
  91. .right{
  92. }
  93. .left{
  94. .field-name-body{
  95. display:none;
  96. }
  97. }
  98. .bottom{
  99. .field-name-field-episodes{
  100. // letter-spacing: -0.25em;
  101. &>.field-items{
  102. display: flex;
  103. flex-flow: row nowrap;
  104. justify-content: space-between;
  105. &>.field-item{
  106. display: block;
  107. // letter-spacing: normal;
  108. // display: inline-block;
  109. width:19%;
  110. // padding-right:1%;
  111. }
  112. }
  113. }
  114. .field-name-body{
  115. display:none;
  116. }
  117. }
  118. }
  119. #mini-panel-th_matique{
  120. background-image: url(../../images/fond-theme-0.png);
  121. }
  122. #mini-panel-th_matique-1{
  123. background-image: url(../../images/fond-theme-0.png);
  124. }
  125. #mini-panel-th_matique-2{
  126. background-image: url(../../images/fond-theme-0.png);
  127. }
  128. #mini-panel-th_matique-3{
  129. background-image: url(../../images/fond-theme-0.png);
  130. }
  131. #mini-panel-th_matique-4{
  132. background-image: url(../../images/fond-theme-0.png);
  133. }
  134. #mini-panel-th_matique-5{
  135. background-image: url(../../images/fond-theme-0.png);
  136. }
  137. #footer{
  138. }
  139. // .block, .panel-pane{
  140. // border: 1px solid #D1D1D1; padding:0.5em; margin:0.5em;
  141. // -moz-border-radius: 5px;
  142. // -webkit-border-radius: 5px;
  143. // border-radius: 5px;
  144. // background-color: #EAEAEA;
  145. // }
  146. .footer-block .block{
  147. // background-color: #353535; border: 1px solid #1a1a1a;
  148. }
  149. #footer-bottom{ text-align: center;}
  150. #footer-bottom .block{
  151. background-color: transparent;
  152. // border: 0 solid #999;
  153. font-size:0.7em;
  154. }
  155. #content{padding:1em;}
  156. /** Messages. */
  157. div.messages {
  158. padding: 9px;
  159. margin: 0.5em 0 0;
  160. color: #036;
  161. background: #bdf;
  162. border: 1px solid #ace;
  163. -moz-border-radius: 5px;
  164. -webkit-border-radius: 5px;
  165. border-radius: 5px;
  166. }
  167. div.warning {
  168. color: #840;
  169. background: #fe6;
  170. border-color: #ed5;
  171. }
  172. div.error {
  173. color: #fff;
  174. background: #e63;
  175. border-color: #d52;
  176. }
  177. div.error p.error {
  178. color: #333;
  179. }
  180. div.status {
  181. color: #360;
  182. background: #cf8;
  183. border-color: #be7;
  184. }
  185. /** Tab navigation */
  186. ul.primary, .views-admin-links ul {
  187. font:13px/1.231 sans-serif; *font-size:small;
  188. border-collapse: collapse;
  189. padding: 0 0 0 1em; /* LTR */
  190. white-space: nowrap;
  191. list-style: none;
  192. margin: 5px;
  193. height: auto;
  194. line-height: normal;
  195. // border-bottom: 1px solid #bbb;
  196. }
  197. ul.primary li, .views-admin-links li{
  198. display: inline;
  199. }
  200. ul.primary li a, .views-admin-links li a {
  201. // background-color: #ddd;
  202. // border-color: #bbb;
  203. border-width: 1px;
  204. border-style: solid solid none solid;
  205. height: auto;
  206. margin-right: 0.5em; /* LTR */
  207. padding: 0 1em;
  208. text-decoration: none;
  209. -moz-border-radius-topleft: 5px;
  210. -webkit-border-top-left-radius: 5px;
  211. border-top-left-radius: 5px;
  212. -moz-border-radius-topright: 5px;
  213. -webkit-border-top-right-radius: 5px;
  214. border-top-right-radius: 5px;
  215. }
  216. // ul.primary li.active a {
  217. // background-color: #fff;
  218. // border: 1px solid #bbb;
  219. // border-bottom: #fff 1px solid;
  220. // }
  221. // ul.primary li a:hover, .views-admin-links li a:hover{
  222. // background-color: #eee;
  223. // border-color: #ccc;
  224. // border-bottom-color: #eee;
  225. // }
  226. // ul.secondary {
  227. // border-bottom: 1px solid #bbb;
  228. // padding: 0.5em 1em;
  229. // margin: 5px;
  230. // }
  231. // ul.secondary li {
  232. // display: inline;
  233. // padding: 0 1em;
  234. // border-right: 1px solid #ccc; /* LTR */
  235. // }
  236. // ul.secondary a {
  237. // padding: 0;
  238. // text-decoration: none;
  239. // }
  240. // ul.secondary a.active {
  241. // border-bottom: 4px solid #999;
  242. // }
  243. //
  244. /** Form */
  245. #node-form .form-region-main{border-right: 1px solid #BFBFBF; padding-right:10px; width:68%;}
  246. #node-form .form-region-main label{float:left; min-width:25%;}
  247. #node-form .form-region-main input.form-text{width:40%;}
  248. #node-form .form-region-right{padding-left:5px;}
  249. #node-form .form-region-right label{float:left; min-width:35%;}
  250. #node-form .form-region-right input.form-text{width:60%;}
  251. #node-form .form-region-main label.option, #node-form .form-region-right label.option{float: none;}
  252. form:not( #views-ui-config-item-form ) .form-item {
  253. position:relative;
  254. /* padding:9px;*/
  255. }
  256. form:not( #views-ui-config-item-form ) .form-item .description{
  257. position:absolute;
  258. bottom:140%;
  259. /* right:-15px;*/
  260. z-index:5;
  261. left:50%;
  262. color:#1A1A1A;
  263. line-height:1.1;
  264. background:url(../images/popup.png) 50% 100% no-repeat;
  265. width:240px;
  266. margin:0px 0px -15px;
  267. padding:9px 10px 20px;
  268. display:none;
  269. border-top: 1px solid #9F9F9F;
  270. }
  271. form:not( #views-ui-config-item-form ) .form-item:hover {
  272. z-index:1;
  273. height:auto; /* Fix for flicker in IE7 */
  274. }
  275. form:not( #views-ui-config-item-form ) .form-item:hover > .description { display:block; }
  276. fieldset{
  277. border: 1px solid #D4D4D4;
  278. padding:10px;
  279. margin-bottom:1em;
  280. -moz-border-radius: 5px;
  281. -webkit-border-radius: 5px;
  282. border-radius: 5px;
  283. }
  284. fieldset legend{
  285. font-size:1.6em;
  286. }
  287. input.form-text{max-width:95%;}
  288. /** TABLE */
  289. table{width:100%;
  290. -moz-border-radius: 5px;
  291. -webkit-border-radius: 5px;
  292. border-radius: 5px;
  293. }
  294. table thead th{
  295. background-color: #CCC;
  296. padding:0.5em 1em;
  297. text-align: left;
  298. }
  299. table tbody tr.even, table tbody tr.odd{
  300. border-bottom: 0 solid #CCCCCC;
  301. padding: 0.1em 0.6em;
  302. }
  303. table tbody tr.even{background-color: #EEE;}
  304. table tbody tr.odd{background-color: #E5E5E5;}
  305. table tbody td{
  306. padding:0.5em 1em;
  307. text-align: left;
  308. }
  309. td.active {background-color: transparent;}