components.php 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. <?php
  2. /**
  3. * Layout Object CSS
  4. *
  5. * Image blocks, lists, tables, gallery, messages
  6. *
  7. * @package Elgg.Core
  8. * @subpackage UI
  9. */
  10. ?>
  11. /* <style> /**/
  12. /* ***************************************
  13. Image Block
  14. *************************************** */
  15. .elgg-image-block {
  16. padding: 10px 0;
  17. }
  18. .elgg-image-block .elgg-image {
  19. float: left;
  20. margin-right: 8px;
  21. }
  22. .elgg-image-block .elgg-image-alt {
  23. float: right;
  24. margin-left: 8px;
  25. }
  26. /* ***************************************
  27. List
  28. *************************************** */
  29. .elgg-list {
  30. margin: 5px 0;
  31. clear: both;
  32. }
  33. .elgg-list > li {
  34. border-bottom: 1px solid #DCDCDC;
  35. }
  36. .elgg-item h3 a {
  37. padding-bottom: 4px;
  38. }
  39. .elgg-item > .elgg-subtext {
  40. margin-bottom: 4px;
  41. }
  42. .elgg-item .elgg-content {
  43. margin: 10px 0;
  44. }
  45. .elgg-content {
  46. clear: both;
  47. }
  48. /* ***************************************
  49. Gallery
  50. *************************************** */
  51. .elgg-gallery {
  52. border: none;
  53. margin-right: auto;
  54. margin-left: auto;
  55. }
  56. .elgg-gallery td {
  57. padding: 5px;
  58. }
  59. .elgg-gallery-fluid > li {
  60. float: left;
  61. }
  62. .elgg-gallery-users > li {
  63. margin: 0 2px;
  64. }
  65. /* ***************************************
  66. Tables
  67. *************************************** */
  68. .elgg-table {
  69. width: 100%;
  70. border-top: 1px solid #DCDCDC;
  71. }
  72. .elgg-table td, .elgg-table th {
  73. padding: 4px 8px;
  74. border: 1px solid #DCDCDC;
  75. }
  76. .elgg-table th {
  77. background-color: #DDD;
  78. }
  79. .elgg-table tr:nth-child(odd), .elgg-table tr.odd {
  80. background-color: #FFF;
  81. }
  82. .elgg-table tr:nth-child(even), .elgg-table tr.even {
  83. background-color: #F0F0F0;
  84. }
  85. .elgg-table-alt {
  86. width: 100%;
  87. border-top: 1px solid #DCDCDC;
  88. }
  89. .elgg-table-alt th {
  90. background-color: #EEE;
  91. font-weight: bold;
  92. }
  93. .elgg-table-alt td, .elgg-table-alt th {
  94. padding: 6px 0;
  95. border-bottom: 1px solid #DCDCDC;
  96. }
  97. .elgg-table-alt td:first-child {
  98. width: 200px;
  99. }
  100. .elgg-table-alt tr:hover {
  101. background: #E4E4E4;
  102. }
  103. /* ***************************************
  104. Owner Block
  105. *************************************** */
  106. .elgg-owner-block {
  107. margin-bottom: 20px;
  108. }
  109. /* ***************************************
  110. Messages
  111. *************************************** */
  112. .elgg-message {
  113. color: #FFF;
  114. display: block;
  115. padding: 10px 20px;
  116. cursor: pointer;
  117. opacity: 0.9;
  118. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  119. border-radius: 3px;
  120. }
  121. .elgg-state-success {
  122. background-color: #090;
  123. }
  124. .elgg-state-error {
  125. background-color: #F00;
  126. }
  127. .elgg-state-notice {
  128. background-color: #5097CF;
  129. }
  130. .elgg-box-error {
  131. margin-top: 10px;
  132. padding: 20px;
  133. color: #B94A48;
  134. background-color: #F8E8E8;
  135. border: 1px solid #E5B7B5;
  136. border-radius: 5px;
  137. }
  138. .elgg-box {
  139. margin: 10px 0;
  140. padding: 20px;
  141. border-radius: 5px;
  142. box-sizing: border-box;
  143. }
  144. .elgg-box.elgg-state-error {
  145. color: #B94A48;
  146. background-color: #F8E8E8;
  147. border: 1px solid #E5B7B5;
  148. }
  149. .elgg-box.elgg-state-notice {
  150. color: #3B8BC9;
  151. background-color: #E7F1F9;
  152. border: 1px solid #B1D1E9;
  153. }
  154. .elgg-box.elgg-state-success {
  155. color: #397F2E;
  156. background-color: #EAF8E8;
  157. border: 1px solid #AADEA2;
  158. }
  159. .elgg-box.elgg-state-warning {
  160. color: #6B420F;
  161. background-color: #FCF8E4;
  162. border: 1px solid #EDDC7D;
  163. }
  164. /* ***************************************
  165. River
  166. *************************************** */
  167. .elgg-river-layout .elgg-list-river {
  168. border-top: 1px solid #DCDCDC;
  169. }
  170. .elgg-list-river > li {
  171. border-bottom: 1px solid #DCDCDC;
  172. }
  173. .elgg-river-item .elgg-pict {
  174. margin-right: 20px;
  175. }
  176. .elgg-river-timestamp {
  177. color: #666;
  178. font-size: 85%;
  179. font-style: italic;
  180. line-height: 1.2em;
  181. }
  182. .elgg-river-attachments,
  183. .elgg-river-message,
  184. .elgg-river-content {
  185. border-left: 1px solid #DCDCDC;
  186. margin: 8px 0 5px 0;
  187. padding-left: 8px;
  188. }
  189. .elgg-river-attachments .elgg-avatar,
  190. .elgg-river-attachments .elgg-icon {
  191. float: left;
  192. }
  193. .elgg-river-attachments .elgg-icon-arrow-right {
  194. margin: 3px 8px 0;
  195. }
  196. .elgg-river-layout .elgg-input-dropdown {
  197. float: right;
  198. margin: 10px 0;
  199. }
  200. <?php //@todo components.php ?>
  201. .elgg-river-comments {
  202. position: relative;
  203. margin: 20px 0 0 0;
  204. border-top: 1px solid #DCDCDC;
  205. }
  206. .elgg-river-comments > li {
  207. border-color: #DCDCDC;
  208. border-style: solid;
  209. border-width: 0 1px 1px 1px;
  210. padding: 4px 10px;
  211. }
  212. .elgg-river-comments li .elgg-output {
  213. padding-right: 5px;
  214. }
  215. .elgg-river-comments .elgg-media {
  216. padding: 0;
  217. }
  218. .elgg-river-more {
  219. border-color: #DCDCDC;
  220. border-style: solid;
  221. border-width: 0 1px 1px 1px;
  222. padding: 5px 10px;
  223. font-size: 85%;
  224. }
  225. <?php //@todo location-dependent styles ?>
  226. .elgg-river-item form {
  227. border-color: #DCDCDC;
  228. border-style: solid;
  229. border-width: 0 1px 1px 1px;
  230. padding: 6px;
  231. height: auto;
  232. }
  233. .elgg-river-item input[type=text] {
  234. width: 78%;
  235. }
  236. .elgg-river-item input[type=submit] {
  237. margin: 0 0 0 10px;
  238. }
  239. /* **************************************
  240. Comments (from elgg_view_comments)
  241. ************************************** */
  242. .elgg-comments {
  243. margin-top: 25px;
  244. }
  245. .elgg-comments .elgg-list {
  246. position: relative;
  247. border-top: 1px solid #DCDCDC;
  248. }
  249. .elgg-comments .elgg-list > li {
  250. border-color: #DCDCDC;
  251. border-style: solid;
  252. border-width: 0 1px 1px 1px;
  253. padding: 4px 10px;
  254. }
  255. .elgg-comments > form {
  256. margin-top: 15px;
  257. }
  258. /* Comment highlighting that automatically fades away */
  259. .elgg-comments .elgg-state-highlight {
  260. -webkit-animation: comment-highlight 5s; /* Chrome, Safari, Opera */
  261. animation: comment-highlight 5s;
  262. }
  263. /* Chrome, Safari, Opera */
  264. @-webkit-keyframes comment-highlight {
  265. from {background: #dff2ff;}
  266. to {background: white;}
  267. }
  268. /* Standard syntax */
  269. @keyframes comment-highlight {
  270. from {background: #dff2ff;}
  271. to {background: white;}
  272. }
  273. /* **************************************
  274. Comments triangle
  275. ************************************** */
  276. .elgg-comments .elgg-list:after,
  277. .elgg-comments .elgg-list:before,
  278. .elgg-river-comments:after,
  279. .elgg-river-comments:before {
  280. bottom: 100%;
  281. left: 30px;
  282. border: solid transparent;
  283. content: " ";
  284. height: 0;
  285. width: 0;
  286. position: absolute;
  287. pointer-events: none;
  288. }
  289. .elgg-comments .elgg-list:after,
  290. .elgg-river-comments:after {
  291. border-color: rgba(238, 238, 238, 0);
  292. border-bottom-color: #FFF;
  293. border-width: 8px;
  294. margin-left: -8px;
  295. }
  296. .elgg-comments .elgg-list:before,
  297. .elgg-river-comments:before {
  298. border-color: rgba(220, 220, 220, 0);
  299. border-bottom-color: #DCDCDC;
  300. border-width: 9px;
  301. margin-left: -9px;
  302. }
  303. /* ***************************************
  304. Image-related
  305. *************************************** */
  306. .elgg-photo {
  307. border: 1px solid #DCDCDC;
  308. padding: 3px;
  309. background-color: #FFF;
  310. -webkit-box-sizing: border-box;
  311. -moz-box-sizing: border-box;
  312. box-sizing: border-box;
  313. max-width: 100%;
  314. height: auto;
  315. }
  316. /* ***************************************
  317. Tags
  318. *************************************** */
  319. .elgg-tags {
  320. font-size: 85%;
  321. }
  322. .elgg-tags > li {
  323. float:left;
  324. margin-right: 5px;
  325. }
  326. .elgg-tags li.elgg-tag:after {
  327. content: ",";
  328. }
  329. .elgg-tags li.elgg-tag:last-child:after {
  330. content: "";
  331. }