You are here

Home » API reference » IMCE 7

imce-content.css in IMCE 7

Same filename and directory in other branches
  1. 6.2 css/imce-content.css
  2. 6 css/imce-content.css
/*Body*/
body.imce {
  padding: 2px;
  background: none;
  text-align: left;
  height: auto;
  min-width: auto;
}

/*Main container*/
/*reset all tags.*/
#imce-content, #imce-content * {
  font: 11px/16px Verdana, sans-serif;
  margin: 0;
  padding: 0;
  color: #444;
  background: none;
  border: none;
  float: none;
  list-style: none;
}
#imce-content {
  position: relative;
  background-color: #fff;
}
#imce-content a {
  text-decoration: none;
}
#imce-content label {
  font-weight: bold;
}
#imce-content label.option {
  font-weight: normal;
}
#imce-content input.form-text, #imce-content input[type=text], #imce-content input.form-file, #imce-content input[type=file], #imce-content select, #imce-content textarea {
  border: 1px inset #aaa;
  padding: 2px;
  background-color: #fff;
  margin: 1px;
  width: auto;
}
#imce-content input.form-submit, #imce-content input[type=submit], #imce-content button {
  border: 2px groove #fff;
  padding: 2px 6px 2px 20px;
  margin: 2px 0;
  background: #e8e8d8 url(submit.png) no-repeat 2px 50%;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
#imce-content [disabled], #imce-content .disabled {
  color: #999;
  cursor: default;
  text-decoration: none !important;
}
#imce-content input.loading {
  background-image: url(loading.gif) !important;
}
#imce-content .form-item {
  margin: 4px 0;
}
#imce-content .form-item .description {
  font-size: 0.9em;
}
#imce-content strong, #imce-content h4 {
  font-weight: bold;
}
#imce-content em {
  font-style: italic;
}
#imce-content ul.tips {
  margin: 2px 8px;
}
#imce-content ul.tips li {
  list-style: circle inside;
  line-height: 18px;
}

/*Main sections under imce-content*/
#ops-wrapper {
  margin-bottom: 2px;
  background: #d0d7e7 url(ops.png) repeat-x;
  border: 1px solid #a5b9cd;
}
#browse-wrapper {
  overflow: hidden;
  height: 260px;
  clear: both;
}
#browse-resizer {}
#preview-wrapper {
  height: 180px;
  overflow: auto;
  background: url(preview-bg.png);
}

/*columns of browse-wrapper*/
#navigation-wrapper {
  width: 25%;
  height: 100%;
  overflow: auto;
  float: left;
  position: relative;
}
#navigation-resizer {
  height: 100%;
  float: left;
}
#sub-browse-wrapper {
  height: 100%;
  overflow: auto;
  position: relative;
}

/*rows of sub-browse wrapper*/
#file-header-wrapper {
  height: 25px;
  background: url(header.png) repeat-x 0 0;
  position: relative;
}
#file-list-wrapper {
  padding-bottom: 20px;/*#dir-stat height*/
  outline: none;
}
#dir-stat {
  position: absolute;
  z-index: 1;
  bottom: 0;
  padding: 2px 5px;
  background-color: #e9ecef;
}

#dir-stat, #dir-stat * {
  font-size: 0.9em;
}

/*Navigation header*/
#navigation-header {
  background: url(header.png) repeat-x 0 0;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 25px;
}
#navigation-header span {
  display: inline-block;
  padding: 4px 4px 5px 20px;
  font-weight: bold;
  background: url(tree.png) no-repeat 0 50%;
}

/*Navigation tree (ul)*/
#navigation-tree {
  margin-top: 25px;/*navigation-header height*/
}
#navigation-tree ul {
  margin-left: 15px;
}
#navigation-tree li {
  padding: 2px;
  background: transparent url(collapsed.png) no-repeat 3px 6px;
  white-space: nowrap;
}
#navigation-tree li.expanded {
  background-image: url(expanded.png);
}
#navigation-tree li.leaf {
  background-image: url(leaf.png);
}
#navigation-tree li.loading {
  background-image: url(loading.gif);
  background-position: 0 2px;
}
#navigation-tree li span.expander {
  display: inline-block;
  width: 12px;
  cursor: pointer;
  margin-right: 1px;
}
#navigation-tree li a {
  display: inline-block;
}
#navigation-tree li a:hover {
  text-decoration: underline;
}
#navigation-tree li a.folder {
  margin-left: 2px;
  padding-left: 18px;
  background: transparent url(folder.png) no-repeat 0 50%;
}
#navigation-tree li a.active {
  font-weight: bold;
  background-image: url(folder-open.png);
  background-color: #ecf0f4;
}
#navigation-tree li.root > a.folder {
  background-image: url(folder-root.png);
}

/*File list and header. (Accessible by #file-list and #file-header. Both have the classname "files")*/
#file-header, #file-list {
  table-layout: fixed;
  width: 100%;
}
#file-header td a {
  padding: 4px;
  font-weight: bold;
  cursor: default;
  display:block;
}
#file-header td.asc a {
  color: #f60;
}
#file-header td.asc a:after {
  content: " \2193";
  font-weight: normal;
}
#file-header td.desc a {
  color: #09f;
}
#file-header td.desc a:after {
  content: " \2191";
  font-weight: normal;
}
#file-list td {
  overflow: hidden;
  border-top: 1px solid #ccf;
  border-bottom: 1px solid #ccf;
  padding: 4px;
  cursor: default;
}
#file-list td.name, #file-header td.name {
  min-width: 12em;
  white-space: nowrap;
}
#file-list td.size, #file-header td.size {
  width: 6.5em;
  text-align: right;
}
#file-list td.width, #file-header td.width {
  width: 5em;
  text-align: right;
}
#file-list td.height, #file-header td.height {
  width: 5em;
}
#file-list td.date, #file-header td.date {
  width: 12em;
  text-align: center;
}
#file-list tr:hover td {
  background-color: #e9ecef;
}
#file-list tr.selected td {
  background-color: #07f;
  color: #fff;
}
#file-list tr.selected span {
  color: #fff;
}
#file-list td.name img {
  vertical-align: middle;
  margin-right: 3px;
}


/*File operations*/
#op-items {
  min-height: 26px;
}
#op-contents {
  position: absolute;
  z-index: 2;
}
#op-contents .op-content {
  display: none;
  padding: 16px;
  border: 2px solid #344454;
  background-color: #f5f5f5;
  position: relative;
}
#op-close-link {
  display: none;
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: url(close.png) no-repeat 50% 50%;
}
#ops-list {
}
#ops-list li {
  display: block;
  float: left;
}
#ops-list a {
  display: block;
  padding: 5px 8px 5px 20px;
  text-decoration: none;
  background: url(op.png) no-repeat 2px 50%;
}
#ops-list a:hover {
  background-color: #e9ecef;
}
#ops-list li.active a {
  background-color: #f9f8f7;
}
#ops-list a span {
  display: inline-block;
  color: #0e1f43;
  padding-left: 1px;
}
#ops-list li.loading a {
  background-image: url(loading.gif);
}

/*Custom op styles*/
#op-item-upload a, #imce-content #edit-upload {
  background-image: url(upload.png);
}
#op-item-thumb a, #imce-content #edit-thumb {
  background-image: url(thumb.png);
}
#op-item-resize a, #imce-content #edit-resize {
  background-image: url(resize.png);
}
#op-item-delete a {
  background-image: url(delete.png);
}
#op-item-sendto a {
  background-image: url(sendto.png);
}
#op-item-help a {
  background-image: url(help.png);
}
#op-item-changeview a {
  background-image: url(view-box.png);
}
.box-view #op-item-changeview a {
  background-image: url(view-list.png);
}
#op-item-help a, #op-item-changeview a {
  white-space: nowrap;
  overflow: hidden;
  width: 1px;
  padding: 5px 0 5px 25px;
  background-position: 5px 50%;
}
#op-item-help, #op-item-changeview {
  float: right !important;
}

/*resizers*/
#imce-content .y-resizer {
  height: 5px;
  cursor: n-resize;
  background: #f4f5f6 url(y-resizer.png) no-repeat 50% 50%;
  border-top: 1px solid #e0e3e5;
  border-bottom: 1px solid #e0e3e5;
}
#imce-content .x-resizer {
  width: 5px;
  cursor: e-resize;
  background: #f4f5f6 url(x-resizer.png) no-repeat 50% 50%;
  border-left: 1px solid #e0e3e5;
  border-right: 1px solid #e0e3e5;
}

/*Message box*/
#message-box {
  display: none;
  position: absolute;
  width: 60%;
  left: 20%;
  top: 32%;
  z-index: 10;
  padding: 5px;
  background-color: #fff;
  border: 2px solid #000;
}
#message-box  * {
  font-size: 1.1em;
  font-weight: bold;
  color: #000;
}
#imce-content div.message {
  background: url(status.png) no-repeat 0 0;
  padding-left: 20px;
  margin: 2px 0;
}
#imce-content div.error {
  background: url(error.png) no-repeat 0 0;
  padding-left: 20px;
}
#imce-content div.warning {
  background: url(warning.png) no-repeat 0 0;
  padding-left: 20px;
}
#log-messages {
  height: 60px;
  overflow: auto;
  border: 1px solid #000;
  padding: 2px 4px;
}
#log-messages * {
  font-family: monospace;
}

#file-preview {
  text-align: center;
}
.imce-hide, .js #forms-wrapper, #help-box {
  display: none;
}

/*IE*/
.ie #imce-content input, .ie #imce-content select {
  vertical-align: middle;
  line-height: 1.2em;
}
.ie-7 #navigation-tree li {
  list-style-image: none;
}
.ie-7 #imce-content input.form-submit, .ie-7 #imce-content input[type=submit], .ie-7 #imce-content button {
  border-style: outset;
}
.ie-7 #ops-list a span {
  cursor: pointer;
}
.ie-7 #file-list-wrapper {
  display: inline-block; /* Gives hasLayout */
}

/* File list in box view */
.box-view #file-list tr {
  display: block;
  float: left;
  border: 1px solid #ccf;
  margin: 10px;
}
.box-view #file-list td {
  border: 0;
}
.box-view #file-list td.name {
  min-width: 0;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}
.box-view #file-list td.name img {
  margin: 0;
}
.box-view #file-list td.name span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.box-view #file-list td.size, .box-view #file-list td.date, .box-view #file-list td.width, .box-view #file-list td.height {
  display: none;
}

File

css/imce-content.css
View source 
  1. 

  2. /*Body*/

  3. body.imce {

  4.   padding: 2px;

  5.   background: none;

  6.   text-align: left;

  7.   height: auto;

  8.   min-width: auto;

  9. }

  10. 

  11. /*Main container*/

  12. /*reset all tags.*/

  13. #imce-content, #imce-content * {

  14.   font: 11px/16px Verdana, sans-serif;

  15.   margin: 0;

  16.   padding: 0;

  17.   color: #444;

  18.   background: none;

  19.   border: none;

  20.   float: none;

  21.   list-style: none;

  22. }

  23. #imce-content {

  24.   position: relative;

  25.   background-color: #fff;

  26. }

  27. #imce-content a {

  28.   text-decoration: none;

  29. }

  30. #imce-content label {

  31.   font-weight: bold;

  32. }

  33. #imce-content label.option {

  34.   font-weight: normal;

  35. }

  36. #imce-content input.form-text, #imce-content input[type=text], #imce-content input.form-file, #imce-content input[type=file], #imce-content select, #imce-content textarea {

  37.   border: 1px inset #aaa;

  38.   padding: 2px;

  39.   background-color: #fff;

  40.   margin: 1px;

  41.   width: auto;

  42. }

  43. #imce-content input.form-submit, #imce-content input[type=submit], #imce-content button {

  44.   border: 2px groove #fff;

  45.   padding: 2px 6px 2px 20px;

  46.   margin: 2px 0;

  47.   background: #e8e8d8 url(submit.png) no-repeat 2px 50%;

  48.   -moz-border-radius: 0;

  49.   -webkit-border-radius: 0;

  50.   border-radius: 0;

  51. }

  52. #imce-content [disabled], #imce-content .disabled {

  53.   color: #999;

  54.   cursor: default;

  55.   text-decoration: none !important;

  56. }

  57. #imce-content input.loading {

  58.   background-image: url(loading.gif) !important;

  59. }

  60. #imce-content .form-item {

  61.   margin: 4px 0;

  62. }

  63. #imce-content .form-item .description {

  64.   font-size: 0.9em;

  65. }

  66. #imce-content strong, #imce-content h4 {

  67.   font-weight: bold;

  68. }

  69. #imce-content em {

  70.   font-style: italic;

  71. }

  72. #imce-content ul.tips {

  73.   margin: 2px 8px;

  74. }

  75. #imce-content ul.tips li {

  76.   list-style: circle inside;

  77.   line-height: 18px;

  78. }

  79. 

  80. /*Main sections under imce-content*/

  81. #ops-wrapper {

  82.   margin-bottom: 2px;

  83.   background: #d0d7e7 url(ops.png) repeat-x;

  84.   border: 1px solid #a5b9cd;

  85. }

  86. #browse-wrapper {

  87.   overflow: hidden;

  88.   height: 260px;

  89.   clear: both;

  90. }

  91. #browse-resizer {}

  92. #preview-wrapper {

  93.   height: 180px;

  94.   overflow: auto;

  95.   background: url(preview-bg.png);

  96. }

  97. 

  98. /*columns of browse-wrapper*/

  99. #navigation-wrapper {

  100.   width: 25%;

  101.   height: 100%;

  102.   overflow: auto;

  103.   float: left;

  104.   position: relative;

  105. }

  106. #navigation-resizer {

  107.   height: 100%;

  108.   float: left;

  109. }

  110. #sub-browse-wrapper {

  111.   height: 100%;

  112.   overflow: auto;

  113.   position: relative;

  114. }

  115. 

  116. /*rows of sub-browse wrapper*/

  117. #file-header-wrapper {

  118.   height: 25px;

  119.   background: url(header.png) repeat-x 0 0;

  120.   position: relative;

  121. }

  122. #file-list-wrapper {

  123.   padding-bottom: 20px;/*#dir-stat height*/

  124.   outline: none;

  125. }

  126. #dir-stat {

  127.   position: absolute;

  128.   z-index: 1;

  129.   bottom: 0;

  130.   padding: 2px 5px;

  131.   background-color: #e9ecef;

  132. }

  133. 

  134. #dir-stat, #dir-stat * {

  135.   font-size: 0.9em;

  136. }

  137. 

  138. /*Navigation header*/

  139. #navigation-header {

  140.   background: url(header.png) repeat-x 0 0;

  141.   position: absolute;

  142.   z-index: 1;

  143.   width: 100%;

  144.   height: 25px;

  145. }

  146. #navigation-header span {

  147.   display: inline-block;

  148.   padding: 4px 4px 5px 20px;

  149.   font-weight: bold;

  150.   background: url(tree.png) no-repeat 0 50%;

  151. }

  152. 

  153. /*Navigation tree (ul)*/

  154. #navigation-tree {

  155.   margin-top: 25px;/*navigation-header height*/

  156. }

  157. #navigation-tree ul {

  158.   margin-left: 15px;

  159. }

  160. #navigation-tree li {

  161.   padding: 2px;

  162.   background: transparent url(collapsed.png) no-repeat 3px 6px;

  163.   white-space: nowrap;

  164. }

  165. #navigation-tree li.expanded {

  166.   background-image: url(expanded.png);

  167. }

  168. #navigation-tree li.leaf {

  169.   background-image: url(leaf.png);

  170. }

  171. #navigation-tree li.loading {

  172.   background-image: url(loading.gif);

  173.   background-position: 0 2px;

  174. }

  175. #navigation-tree li span.expander {

  176.   display: inline-block;

  177.   width: 12px;

  178.   cursor: pointer;

  179.   margin-right: 1px;

  180. }

  181. #navigation-tree li a {

  182.   display: inline-block;

  183. }

  184. #navigation-tree li a:hover {

  185.   text-decoration: underline;

  186. }

  187. #navigation-tree li a.folder {

  188.   margin-left: 2px;

  189.   padding-left: 18px;

  190.   background: transparent url(folder.png) no-repeat 0 50%;

  191. }

  192. #navigation-tree li a.active {

  193.   font-weight: bold;

  194.   background-image: url(folder-open.png);

  195.   background-color: #ecf0f4;

  196. }

  197. #navigation-tree li.root > a.folder {

  198.   background-image: url(folder-root.png);

  199. }

  200. 

  201. /*File list and header. (Accessible by #file-list and #file-header. Both have the classname "files")*/

  202. #file-header, #file-list {

  203.   table-layout: fixed;

  204.   width: 100%;

  205. }

  206. #file-header td a {

  207.   padding: 4px;

  208.   font-weight: bold;

  209.   cursor: default;

  210.   display:block;

  211. }

  212. #file-header td.asc a {

  213.   color: #f60;

  214. }

  215. #file-header td.asc a:after {

  216.   content: " \2193";

  217.   font-weight: normal;

  218. }

  219. #file-header td.desc a {

  220.   color: #09f;

  221. }

  222. #file-header td.desc a:after {

  223.   content: " \2191";

  224.   font-weight: normal;

  225. }

  226. #file-list td {

  227.   overflow: hidden;

  228.   border-top: 1px solid #ccf;

  229.   border-bottom: 1px solid #ccf;

  230.   padding: 4px;

  231.   cursor: default;

  232. }

  233. #file-list td.name, #file-header td.name {

  234.   min-width: 12em;

  235.   white-space: nowrap;

  236. }

  237. #file-list td.size, #file-header td.size {

  238.   width: 6.5em;

  239.   text-align: right;

  240. }

  241. #file-list td.width, #file-header td.width {

  242.   width: 5em;

  243.   text-align: right;

  244. }

  245. #file-list td.height, #file-header td.height {

  246.   width: 5em;

  247. }

  248. #file-list td.date, #file-header td.date {

  249.   width: 12em;

  250.   text-align: center;

  251. }

  252. #file-list tr:hover td {

  253.   background-color: #e9ecef;

  254. }

  255. #file-list tr.selected td {

  256.   background-color: #07f;

  257.   color: #fff;

  258. }

  259. #file-list tr.selected span {

  260.   color: #fff;

  261. }

  262. #file-list td.name img {

  263.   vertical-align: middle;

  264.   margin-right: 3px;

  265. }

  266. 

  267. 

  268. /*File operations*/

  269. #op-items {

  270.   min-height: 26px;

  271. }

  272. #op-contents {

  273.   position: absolute;

  274.   z-index: 2;

  275. }

  276. #op-contents .op-content {

  277.   display: none;

  278.   padding: 16px;

  279.   border: 2px solid #344454;

  280.   background-color: #f5f5f5;

  281.   position: relative;

  282. }

  283. #op-close-link {

  284.   display: none;

  285.   position: absolute;

  286.   z-index: 3;

  287.   top: 2px;

  288.   right: 2px;

  289.   width: 16px;

  290.   height: 16px;

  291.   background: url(close.png) no-repeat 50% 50%;

  292. }

  293. #ops-list {

  294. }

  295. #ops-list li {

  296.   display: block;

  297.   float: left;

  298. }

  299. #ops-list a {

  300.   display: block;

  301.   padding: 5px 8px 5px 20px;

  302.   text-decoration: none;

  303.   background: url(op.png) no-repeat 2px 50%;

  304. }

  305. #ops-list a:hover {

  306.   background-color: #e9ecef;

  307. }

  308. #ops-list li.active a {

  309.   background-color: #f9f8f7;

  310. }

  311. #ops-list a span {

  312.   display: inline-block;

  313.   color: #0e1f43;

  314.   padding-left: 1px;

  315. }

  316. #ops-list li.loading a {

  317.   background-image: url(loading.gif);

  318. }

  319. 

  320. /*Custom op styles*/

  321. #op-item-upload a, #imce-content #edit-upload {

  322.   background-image: url(upload.png);

  323. }

  324. #op-item-thumb a, #imce-content #edit-thumb {

  325.   background-image: url(thumb.png);

  326. }

  327. #op-item-resize a, #imce-content #edit-resize {

  328.   background-image: url(resize.png);

  329. }

  330. #op-item-delete a {

  331.   background-image: url(delete.png);

  332. }

  333. #op-item-sendto a {

  334.   background-image: url(sendto.png);

  335. }

  336. #op-item-help a {

  337.   background-image: url(help.png);

  338. }

  339. #op-item-changeview a {

  340.   background-image: url(view-box.png);

  341. }

  342. .box-view #op-item-changeview a {

  343.   background-image: url(view-list.png);

  344. }

  345. #op-item-help a, #op-item-changeview a {

  346.   white-space: nowrap;

  347.   overflow: hidden;

  348.   width: 1px;

  349.   padding: 5px 0 5px 25px;

  350.   background-position: 5px 50%;

  351. }

  352. #op-item-help, #op-item-changeview {

  353.   float: right !important;

  354. }

  355. 

  356. /*resizers*/

  357. #imce-content .y-resizer {

  358.   height: 5px;

  359.   cursor: n-resize;

  360.   background: #f4f5f6 url(y-resizer.png) no-repeat 50% 50%;

  361.   border-top: 1px solid #e0e3e5;

  362.   border-bottom: 1px solid #e0e3e5;

  363. }

  364. #imce-content .x-resizer {

  365.   width: 5px;

  366.   cursor: e-resize;

  367.   background: #f4f5f6 url(x-resizer.png) no-repeat 50% 50%;

  368.   border-left: 1px solid #e0e3e5;

  369.   border-right: 1px solid #e0e3e5;

  370. }

  371. 

  372. /*Message box*/

  373. #message-box {

  374.   display: none;

  375.   position: absolute;

  376.   width: 60%;

  377.   left: 20%;

  378.   top: 32%;

  379.   z-index: 10;

  380.   padding: 5px;

  381.   background-color: #fff;

  382.   border: 2px solid #000;

  383. }

  384. #message-box  * {

  385.   font-size: 1.1em;

  386.   font-weight: bold;

  387.   color: #000;

  388. }

  389. #imce-content div.message {

  390.   background: url(status.png) no-repeat 0 0;

  391.   padding-left: 20px;

  392.   margin: 2px 0;

  393. }

  394. #imce-content div.error {

  395.   background: url(error.png) no-repeat 0 0;

  396.   padding-left: 20px;

  397. }

  398. #imce-content div.warning {

  399.   background: url(warning.png) no-repeat 0 0;

  400.   padding-left: 20px;

  401. }

  402. #log-messages {

  403.   height: 60px;

  404.   overflow: auto;

  405.   border: 1px solid #000;

  406.   padding: 2px 4px;

  407. }

  408. #log-messages * {

  409.   font-family: monospace;

  410. }

  411. 

  412. #file-preview {

  413.   text-align: center;

  414. }

  415. .imce-hide, .js #forms-wrapper, #help-box {

  416.   display: none;

  417. }

  418. 

  419. /*IE*/

  420. .ie #imce-content input, .ie #imce-content select {

  421.   vertical-align: middle;

  422.   line-height: 1.2em;

  423. }

  424. .ie-7 #navigation-tree li {

  425.   list-style-image: none;

  426. }

  427. .ie-7 #imce-content input.form-submit, .ie-7 #imce-content input[type=submit], .ie-7 #imce-content button {

  428.   border-style: outset;

  429. }

  430. .ie-7 #ops-list a span {

  431.   cursor: pointer;

  432. }

  433. .ie-7 #file-list-wrapper {

  434.   display: inline-block; /* Gives hasLayout */

  435. }

  436. 

  437. /* File list in box view */

  438. .box-view #file-list tr {

  439.   display: block;

  440.   float: left;

  441.   border: 1px solid #ccf;

  442.   margin: 10px;

  443. }

  444. .box-view #file-list td {

  445.   border: 0;

  446. }

  447. .box-view #file-list td.name {

  448.   min-width: 0;

  449.   padding: 5px;

  450.   text-align: center;

  451.   vertical-align: middle;

  452. }

  453. .box-view #file-list td.name img {

  454.   margin: 0;

  455. }

  456. .box-view #file-list td.name span {

  457.   display: block;

  458.   overflow: hidden;

  459.   white-space: nowrap;

  460. }

  461. .box-view #file-list td.size, .box-view #file-list td.date, .box-view #file-list td.width, .box-view #file-list td.height {

  462.   display: none;

  463. }