You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

462 lines
9.3 KiB

  1. /**
  2. * This file provides the styles for the fullscreen media manager
  3. * (?do=media).
  4. *
  5. * What most templates would probably need to change (depending on
  6. * their site width) are the 4 min-width's (search for @change).
  7. */
  8. /*____________ structure ____________*/
  9. #mediamanager__page h1 {
  10. margin: 0 0 .5em;
  11. }
  12. #mediamanager__page {
  13. /* min-width must be summary of all 3 panels' min-widths */
  14. min-width: 50em; /* @change */
  15. width: 100%;
  16. text-align: left;
  17. }
  18. #mediamanager__page .panel {
  19. float: left;
  20. }
  21. #mediamanager__page .namespaces {
  22. width: 20%;
  23. min-width: 10em; /* @change */
  24. }
  25. #mediamanager__page .filelist {
  26. width: 50%;
  27. min-width: 25em; /* @change */
  28. }
  29. #mediamanager__page .file {
  30. width: 30%;
  31. min-width: 15em; /* @change */
  32. }
  33. #mediamanager__page .panelHeader {
  34. background-color: __background_alt__;
  35. margin: 0 10px 10px 0;
  36. padding: 10px 10px 8px;
  37. text-align: left;
  38. min-height: 20px;
  39. overflow: hidden;
  40. }
  41. #mediamanager__page .panelContent {
  42. overflow-y: auto;
  43. overflow-x: hidden;
  44. padding: 0;
  45. margin: 0 10px 10px 0;
  46. position: relative;
  47. }
  48. #mediamanager__page .file .panelHeader,
  49. #mediamanager__page .file .panelContent {
  50. margin-right: 0;
  51. }
  52. #mediamanager__page .ui-resizable-e {
  53. width: 6px;
  54. right: 2px;
  55. background: transparent url(images/resizecol.png) center center no-repeat;
  56. }
  57. #mediamanager__page .ui-resizable-e:hover {
  58. background-color: __background_alt__;
  59. }
  60. #mediamanager__page dd {
  61. margin: 0;
  62. }
  63. #mediamanager__page .panelHeader h3 {
  64. float: left;
  65. font-weight: normal;
  66. font-size: 1em;
  67. padding: 0;
  68. margin: 0 0 3px;
  69. }
  70. /*____________ namespaces panel ____________*/
  71. #mediamanager__page .namespaces h2 {
  72. font-size: 1em;
  73. display: inline-block;
  74. border-width: 0;
  75. padding: .3em .8em;
  76. margin: 0 .3em 0 0;
  77. border-radius: .5em .5em 0 0;
  78. font-weight: normal;
  79. background-color: __background_alt__;
  80. color: __text__;
  81. line-height: 1.4em;
  82. }
  83. * html #mediamanager__page .namespaces h2,
  84. *+html #mediamanager__page .namespaces h2 {
  85. display: inline;
  86. }
  87. #mediamanager__page .namespaces ul {
  88. margin-left: .2em;
  89. margin-bottom: 0;
  90. padding: 0;
  91. list-style: none;
  92. }
  93. #mediamanager__page .namespaces ul ul {
  94. margin-left: 1em;
  95. }
  96. #mediamanager__page .namespaces ul ul li {
  97. margin: 0;
  98. }
  99. #mediamanager__page .namespaces ul .selected {
  100. background-color: __highlight__;
  101. font-weight: bold;
  102. }
  103. /*____________ file list panel ____________*/
  104. /* file list header */
  105. #mediamanager__page .panelHeader form.options {
  106. float: right;
  107. margin-top: -3px;
  108. }
  109. #mediamanager__page .panelHeader ul {
  110. list-style: none;
  111. margin: 0;
  112. padding: 0;
  113. }
  114. #mediamanager__page .panelHeader ul li {
  115. color: __text__;
  116. float: left;
  117. line-height: 1;
  118. padding-left: 3px;
  119. }
  120. #mediamanager__page .panelHeader ul li.listType {
  121. padding-left: 30px;
  122. background: url('../../images/icon-list.png') 3px 1px no-repeat;
  123. }
  124. #mediamanager__page .panelHeader ul li.sortBy {
  125. padding-left: 30px;
  126. background: url('../../images/icon-sort.png') 3px 1px no-repeat;
  127. }
  128. #mediamanager__page .panelHeader form.options .ui-buttonset label{
  129. font-size: 90%;
  130. margin-right: -0.4em;
  131. }
  132. #mediamanager__page .panelHeader form.options .ui-buttonset .ui-button-text {
  133. padding: .3em .5em;
  134. line-height: 1;
  135. }
  136. /* file list content */
  137. #mediamanager__page .filelist ul {
  138. padding: 0;
  139. margin: 0;
  140. }
  141. #mediamanager__page .filelist .panelContent ul li:hover {
  142. background-color: __background_alt__;
  143. }
  144. #mediamanager__page .filelist li dt a {
  145. vertical-align: middle;
  146. display: table-cell;
  147. overflow: hidden;
  148. }
  149. * html #mediamanager__page .filelist .thumbs li dt a,
  150. *+html #mediamanager__page .filelist .thumbs li dt a {
  151. display: block;
  152. }
  153. * html #mediamanager__page .filelist .rows li dt a,
  154. *+html #mediamanager__page .filelist .rows li dt a {
  155. display: inline;
  156. }
  157. /* file list as thumbs */
  158. #mediamanager__page .filelist .thumbs li {
  159. width: 100px;
  160. min-height: 130px;
  161. display: inline-block;
  162. display: -moz-inline-stack;
  163. /* the right margin should visually be 10px, but because of its inline-block nature the whitespace inbetween is about 4px more */
  164. margin: 0 6px 10px 0;
  165. background-color: __background_neu__;
  166. color: __text__;
  167. padding: 5px;
  168. vertical-align: top;
  169. text-align: center;
  170. position: relative;
  171. line-height: 1.2;
  172. }
  173. * html #mediamanager__page .filelist .thumbs li,
  174. *+html #mediamanager__page .filelist .thumbs li {
  175. display: inline;
  176. zoom: 1;
  177. }
  178. #mediamanager__page .filelist .thumbs li dt a {
  179. width: 100px;
  180. height: 90px;
  181. }
  182. #mediamanager__page .filelist .thumbs li dt a img {
  183. max-width: 90px;
  184. max-height: 90px;
  185. }
  186. #mediamanager__page .filelist .thumbs li .name,
  187. #mediamanager__page .filelist .thumbs li .size,
  188. #mediamanager__page .filelist .thumbs li .filesize,
  189. #mediamanager__page .filelist .thumbs li .date {
  190. display: block;
  191. overflow: hidden;
  192. text-overflow: ellipsis;
  193. width: 90px;
  194. white-space: nowrap;
  195. }
  196. #mediamanager__page .filelist .thumbs li .name {
  197. padding: 5px 0;
  198. font-weight: bold;
  199. }
  200. #mediamanager__page .filelist .thumbs li .date {
  201. font-style: italic;
  202. white-space: normal;
  203. }
  204. /* file list as rows */
  205. #mediamanager__page .filelist .rows li {
  206. list-style: none;
  207. display: block;
  208. position: relative;
  209. max-height: 50px;
  210. margin: 0;
  211. margin-bottom: 3px;
  212. background-color: __background__;
  213. color: __text__;
  214. overflow: hidden;
  215. }
  216. #mediamanager__page .filelist .rows li:nth-child(2n+1) {
  217. background-color: __background_neu__;
  218. }
  219. #mediamanager__page .filelist .rows li dt {
  220. float: left;
  221. width: 10%;
  222. height: 40px;
  223. text-align: center;
  224. }
  225. #mediamanager__page .filelist .rows li dt a {
  226. width: 100px;
  227. height: 40px;
  228. }
  229. #mediamanager__page .filelist .rows li dt a img {
  230. max-width: 40px;
  231. max-height: 40px;
  232. }
  233. #mediamanager__page .filelist .rows li .name,
  234. #mediamanager__page .filelist .rows li .size,
  235. #mediamanager__page .filelist .rows li .filesize,
  236. #mediamanager__page .filelist .rows li .date {
  237. overflow: hidden;
  238. text-overflow: ellipsis;
  239. float: left;
  240. margin-left: 1%;
  241. white-space: nowrap;
  242. }
  243. #mediamanager__page .filelist .rows li .name {
  244. width: 30%;
  245. font-weight: bold;
  246. }
  247. #mediamanager__page .filelist .rows li .size,
  248. #mediamanager__page .filelist .rows li .filesize {
  249. width: 15%;
  250. }
  251. #mediamanager__page .filelist .rows li .date {
  252. width: 20%;
  253. font-style: italic;
  254. white-space: normal;
  255. }
  256. /* upload form */
  257. #mediamanager__page div.upload {
  258. padding-bottom: 0.5em;
  259. }
  260. #media__content #mediamanager__uploader {
  261. border-bottom: 1px solid __border__;
  262. padding-bottom: 0.5em;
  263. }
  264. /*____________ file panel ____________*/
  265. #mediamanager__page .file ul.actions {
  266. text-align: center;
  267. margin: 0 0 5px;
  268. padding: 0;
  269. list-style: none;
  270. }
  271. #mediamanager__page .file ul.actions li {
  272. display: inline;
  273. margin: 0;
  274. }
  275. #mediamanager__page .file div.image {
  276. margin-bottom: 5px;
  277. text-align: center;
  278. }
  279. #mediamanager__page .file div.image img {
  280. width: 100%;
  281. }
  282. #mediamanager__page .file dl {
  283. margin-bottom: 0;
  284. }
  285. #mediamanager__page .file dl dt {
  286. font-weight: bold;
  287. display: block;
  288. background-color: __background_alt__;
  289. }
  290. #mediamanager__page .file dl dd {
  291. display: block;
  292. background-color: __background_neu__;
  293. }
  294. /* file meta data edit form */
  295. #mediamanager__page form.meta div.row {
  296. margin-bottom: 5px;
  297. }
  298. #mediamanager__page form.meta label span {
  299. display: block;
  300. }
  301. #mediamanager__page form.meta input {
  302. width: 50%;
  303. }
  304. #mediamanager__page form.meta input.button {
  305. width: auto;
  306. }
  307. #mediamanager__page form.meta textarea.edit {
  308. height: 6em;
  309. width: 95%;
  310. min-width: 95%;
  311. max-width: 95%;
  312. }
  313. /* file revisions form */
  314. #mediamanager__page #page__revisions ul {
  315. margin-left: 10px;
  316. padding: 0;
  317. list-style-type: none;
  318. }
  319. #mediamanager__page #page__revisions ul li div.li div {
  320. font-size: 90%;
  321. color: __text_neu__;
  322. padding-left: 18px;
  323. }
  324. #mediamanager__page #page__revisions ul li div.li input {
  325. position: relative;
  326. top: 1px;
  327. }
  328. /* file diff view */
  329. #mediamanager__diff table {
  330. table-layout: fixed;
  331. border-width: 0;
  332. }
  333. #mediamanager__diff td,
  334. #mediamanager__diff th {
  335. width: 48%;
  336. margin: 0 5px 10px 0;
  337. padding: 0;
  338. vertical-align: top;
  339. text-align: left;
  340. border-color: __background__;
  341. }
  342. #mediamanager__diff th {
  343. font-weight: normal;
  344. background-color: __background__;
  345. line-height: 1.2;
  346. }
  347. #mediamanager__diff th a {
  348. font-weight: bold;
  349. }
  350. #mediamanager__diff th span {
  351. font-size: 90%;
  352. }
  353. #mediamanager__diff dl dd strong{
  354. background-color: __highlight__;
  355. color: __text__;
  356. font-weight: normal;
  357. }
  358. /* image diff views */
  359. #mediamanager__page .file form.diffView {
  360. margin-bottom: 10px;
  361. display: block;
  362. }
  363. #mediamanager__diff div.slider {
  364. margin: 10px;
  365. width: 95%;
  366. }
  367. #mediamanager__diff .imageDiff {
  368. position: relative;
  369. }
  370. #mediamanager__diff .imageDiff .image1,
  371. #mediamanager__diff .imageDiff .image2 {
  372. position: absolute;
  373. top: 0;
  374. left: 0;
  375. width: 97%;
  376. }
  377. #mediamanager__diff .imageDiff.opacity .image2 {
  378. -moz-opacity: 0.5;
  379. -khtml-opacity: 0.5;
  380. opacity: 0.5;
  381. }
  382. #mediamanager__diff .imageDiff.portions .image2 {
  383. border-right: 1px solid red;
  384. overflow: hidden;
  385. }
  386. #mediamanager__diff .imageDiff img {
  387. width: 100%;
  388. }