You are here

Home » API reference » Taxonomy File Tree 8

tft.css in Taxonomy File Tree 8

Same filename and directory in other branches
  1. 7.2 css/tft.css
  2. 7 css/tft.css
  3. 3.x css/tft.css
/* Hide the page title */

/* Menu */

#folder-menu-container {
  margin-bottom: 10px;
}

#folder-menu-container .folder-wrapper {
  padding: 10px;
  overflow: hidden;
}

#folder-menu-container h4 {
  margin: 0;
  float: left;
}

#tabs .tabs li.folder-menu-ops-link a.disabled {
  background-color: #ddd;
  cursor: default;
}


/* Folder content */

.tft-admin-folder-content-item {
  float: left;
  margin-right: 10px;
}

#folder-content-container {
  background-position: center center;
  background-repeat: no-repeat;
}

#folder-content-container .folder-wrapper {
  padding: 10px 0;
}

#folder-content-container table {
  width: 100%;
}

#folder-content-container tr.even {
  background-color: transparent;
}

#folder-content-container tr.odd {
  background-color: transparent;
}

#table-th-ops {
  width: 25%;
}

#folder-content-container a.ops-link {
  padding-left: 0;
  display: inline;
}

th.header {
  cursor: pointer;
}

th.header:hover,
th.headerSortDown,
th.headerSortUp {
  background: #eee;
}

th.header span {
  background-position: right top;
  background-repeat: no-repeat;
  padding-right: 20px;
}

th.headerSortDown span {
  background-image: url(../img/arrow-asc.png);
}

th.headerSortUp span {
  background-image: url(../img/arrow-desc.png);
}

#folder-content-container a {
  display: block;
  background-repeat: no-repeat;
  padding-left: 20px;
}

#folder-content-container a img {
  margin-left: -20px;
  min-width: 220px;
}

#folder-content-container a.file {
  background-image: url(../img/application-octet-stream.png);
}

/* Default icon */
#folder-content-container a.folder-folder-link {
  background-image: url(../img/folder.png);
}

/* Folder icon */

#folder-add-content-links {
  margin: 1em 0 0 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.folder-add-content-link {
  float: right;
  display: block;
}

.folder-add-content-link a {
  background-color: #ddd;
  color: #555;
  display: block;
  font-size: 0.833em;
  margin: 0 0 0 7px;
  padding: 5px 10px 5px 25px !important;
  text-decoration: none;
  background-position: 5px 4px;
}

#add-child-folder {
  background-image: url(../img/add-folder.png);
}

#add-child-file {
  background-image: url(../img/add-file-icon.png);
}

.folder-add-content-link a:hover {
  background-color: #eee;
  color: #777;
}

/* Folder tree */

.tft-hide-element {
  display: none;
}

#folder-explorer-container.tft-node-form {
  overflow: auto;
  height: 200px;
  border: 1px solid #eee;
  position: relative;
}

#folder-explorer-container ul {
  margin: 0.5em 0;
  list-style: none;
  padding: 0;
  clear: left;
}

#folder-explorer-container ul ul {
  padding-left: 1em;
}

#folder-explorer-container li {
  position: relative;
  overflow: hidden;
  list-style: none;
  background: none;
  padding: 0 0 0.2em 0.5em;
  display: block;
}

#folder-explorer-container li span.icon,
#tft-outline tr.draggable span.icon {
  background-image: url(../img/opened-closed.png);
  background-repeat: no-repeat;
  background-position: -10px 0;
  display: block;
  padding: 3px 0;
  float: left;
  width: 12px;
  height: 18px;
  position: relative;
  z-index: 100;
}

#folder-explorer-container li span.closed-icon,
#tft-outline tr.draggable span.closed-icon {
  background-position: left 5px;
  cursor: pointer;
}

#folder-explorer-container li span.opened-icon,
#tft-outline tr.draggable span.opened-icon {
  background-position: left -12px;
  cursor: pointer;
}

#folder-explorer-container li span.link-wrapper {
  display: block;
  margin-left: -12px;
  float: left;
  width: 90%;
}

#folder-explorer-container li a.folder-link {
  text-decoration: none;
  background: url(../img/folder.png) left 3px no-repeat;
  padding: 3px 3px 3px 20px;
  color: #353535;
  display: block;
  margin-left: 12px;
  width: 90%;
}

#folder-explorer-container li.active>a.folder-link {
  font-weight: bold;
}

li.closed ul {
  display: none;
}

#folder-explorer-container.tft-node-form li.active>.link-wrapper>a {
  background-color: #eee;
}


/* Admin */
#tft-outline {
  width: 85%;
}

#tft-manage-folders-form .form-item {
  float: left;
}

.tabledrag-parent-locked .handle {
  background-image: url(../img/draggable.png) !important;
}

#folder-menu-container .folder-wrapper {
  background: #009ee0;
}

#folder-menu-container .folder-wrapper #tabs ul li a.disabled {
  background-color: #8b8b8d !important;
}

#folder-add-content-links {
  background: #58585a;
}

#folder-explorer-container.tft-node-form li.active>.link-wrapper {
  background-color: #eee;
}

#folder-explorer-container.tft-node-form li.active>.link-wrapper>a {
  background-color: transparent;
}

#folder-menu-container .folder-wrapper {
  background: #009ee0;
  color: white;
  padding: 0 0 0 1em;
}

#folder-menu-container .folder-wrapper #tabs {
  float: right;
}

#folder-menu-container .folder-wrapper #tabs ul {
  display: flex;
  list-style: none;
  margin: 0;
}

#folder-menu-container .folder-wrapper #tabs ul #tft-back a {
  border: 0;
  background: #5aa449;
  color: white;
  display: inline-block;
  padding: .25em 1em;
  background-position: .5em center;
  background-repeat: no-repeat;
  padding-left: 3em;
  /*background-image:url("../img/prev-element-icon.png")*/
}

#folder-menu-container .folder-wrapper #tabs ul #manage-folders a {
  border: 0;
  background: #5aa449;
  color: white;
  display: inline-block;
  padding: .25em 1em;
  background-position: .5em center;
  background-repeat: no-repeat;
  padding-left: 2em;
  /*background-image:url("../img/sort-element-icon.png")*/
}

#folder-menu-container .folder-wrapper #tabs ul li {
  margin: 0;
}

#folder-menu-container .folder-wrapper #tabs ul li a {
  margin-right: 0;
  border-left: 1px solid white !important;
}

#folder-menu-container .folder-wrapper #tabs ul li a.disabled {
  background-color: #8b8b8d !important;
}

#folder-content-container a.folder-folder-link,
#folder-explorer-container li a.folder-link {
  padding-left: 2em;
  /*background:url(../img/folder-icon.png) left center no-repeat*/
}

#folder-content-container a.file {
  padding-left: 2em;
}

#folder-content-container #table-th-name {
  width: 40%;
}

#folder-add-content-links {
  background: #58585a;
}

#folder-add-content-links li a {
  border: 0;
  background: #5aa449;
  color: white;
  display: inline-block;
  padding: .25em 1em;
  background-position: .5em center;
  background-repeat: no-repeat;
  padding-left: 2em;
  /*background-image:url("../img/add-element-icon.png");*/
  margin: 0;
  padding-left: 1.5em;
  border-left: 1px solid white !important;
}

#folder-menu-ops-links {
  float: right;
}

body[class*="page-group-"][class*="-tft"] {
}

body[class*="page-group-"][class*="-tft"] .ui-dialog {
  padding: 3px;
  border: 0;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: auto !important;
}

body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-titlebar {
  padding: 0;
  position: relative;
  border-radius: 0;
  background: none;
  border: 0;
}

body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-content {
  padding: 0;
}

body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-titlebar-close {
  background-color: transparent !important;
  box-shadow: none !important;
  right: 0;
}

File

css/tft.css
View source 
  1. /* Hide the page title */

  2. 

  3. /* Menu */

  4. 

  5. #folder-menu-container {

  6.   margin-bottom: 10px;

  7. }

  8. 

  9. #folder-menu-container .folder-wrapper {

  10.   padding: 10px;

  11.   overflow: hidden;

  12. }

  13. 

  14. #folder-menu-container h4 {

  15.   margin: 0;

  16.   float: left;

  17. }

  18. 

  19. #tabs .tabs li.folder-menu-ops-link a.disabled {

  20.   background-color: #ddd;

  21.   cursor: default;

  22. }

  23. 

  24. 

  25. /* Folder content */

  26. 

  27. .tft-admin-folder-content-item {

  28.   float: left;

  29.   margin-right: 10px;

  30. }

  31. 

  32. #folder-content-container {

  33.   background-position: center center;

  34.   background-repeat: no-repeat;

  35. }

  36. 

  37. #folder-content-container .folder-wrapper {

  38.   padding: 10px 0;

  39. }

  40. 

  41. #folder-content-container table {

  42.   width: 100%;

  43. }

  44. 

  45. #folder-content-container tr.even {

  46.   background-color: transparent;

  47. }

  48. 

  49. #folder-content-container tr.odd {

  50.   background-color: transparent;

  51. }

  52. 

  53. #table-th-ops {

  54.   width: 25%;

  55. }

  56. 

  57. #folder-content-container a.ops-link {

  58.   padding-left: 0;

  59.   display: inline;

  60. }

  61. 

  62. th.header {

  63.   cursor: pointer;

  64. }

  65. 

  66. th.header:hover,

  67. th.headerSortDown,

  68. th.headerSortUp {

  69.   background: #eee;

  70. }

  71. 

  72. th.header span {

  73.   background-position: right top;

  74.   background-repeat: no-repeat;

  75.   padding-right: 20px;

  76. }

  77. 

  78. th.headerSortDown span {

  79.   background-image: url(../img/arrow-asc.png);

  80. }

  81. 

  82. th.headerSortUp span {

  83.   background-image: url(../img/arrow-desc.png);

  84. }

  85. 

  86. #folder-content-container a {

  87.   display: block;

  88.   background-repeat: no-repeat;

  89.   padding-left: 20px;

  90. }

  91. 

  92. #folder-content-container a img {

  93.   margin-left: -20px;

  94.   min-width: 220px;

  95. }

  96. 

  97. #folder-content-container a.file {

  98.   background-image: url(../img/application-octet-stream.png);

  99. }

  100. 

  101. /* Default icon */

  102. #folder-content-container a.folder-folder-link {

  103.   background-image: url(../img/folder.png);

  104. }

  105. 

  106. /* Folder icon */

  107. 

  108. #folder-add-content-links {

  109.   margin: 1em 0 0 0;

  110.   padding: 0;

  111.   list-style: none;

  112.   overflow: hidden;

  113. }

  114. 

  115. .folder-add-content-link {

  116.   float: right;

  117.   display: block;

  118. }

  119. 

  120. .folder-add-content-link a {

  121.   background-color: #ddd;

  122.   color: #555;

  123.   display: block;

  124.   font-size: 0.833em;

  125.   margin: 0 0 0 7px;

  126.   padding: 5px 10px 5px 25px !important;

  127.   text-decoration: none;

  128.   background-position: 5px 4px;

  129. }

  130. 

  131. #add-child-folder {

  132.   background-image: url(../img/add-folder.png);

  133. }

  134. 

  135. #add-child-file {

  136.   background-image: url(../img/add-file-icon.png);

  137. }

  138. 

  139. .folder-add-content-link a:hover {

  140.   background-color: #eee;

  141.   color: #777;

  142. }

  143. 

  144. /* Folder tree */

  145. 

  146. .tft-hide-element {

  147.   display: none;

  148. }

  149. 

  150. #folder-explorer-container.tft-node-form {

  151.   overflow: auto;

  152.   height: 200px;

  153.   border: 1px solid #eee;

  154.   position: relative;

  155. }

  156. 

  157. #folder-explorer-container ul {

  158.   margin: 0.5em 0;

  159.   list-style: none;

  160.   padding: 0;

  161.   clear: left;

  162. }

  163. 

  164. #folder-explorer-container ul ul {

  165.   padding-left: 1em;

  166. }

  167. 

  168. #folder-explorer-container li {

  169.   position: relative;

  170.   overflow: hidden;

  171.   list-style: none;

  172.   background: none;

  173.   padding: 0 0 0.2em 0.5em;

  174.   display: block;

  175. }

  176. 

  177. #folder-explorer-container li span.icon,

  178. #tft-outline tr.draggable span.icon {

  179.   background-image: url(../img/opened-closed.png);

  180.   background-repeat: no-repeat;

  181.   background-position: -10px 0;

  182.   display: block;

  183.   padding: 3px 0;

  184.   float: left;

  185.   width: 12px;

  186.   height: 18px;

  187.   position: relative;

  188.   z-index: 100;

  189. }

  190. 

  191. #folder-explorer-container li span.closed-icon,

  192. #tft-outline tr.draggable span.closed-icon {

  193.   background-position: left 5px;

  194.   cursor: pointer;

  195. }

  196. 

  197. #folder-explorer-container li span.opened-icon,

  198. #tft-outline tr.draggable span.opened-icon {

  199.   background-position: left -12px;

  200.   cursor: pointer;

  201. }

  202. 

  203. #folder-explorer-container li span.link-wrapper {

  204.   display: block;

  205.   margin-left: -12px;

  206.   float: left;

  207.   width: 90%;

  208. }

  209. 

  210. #folder-explorer-container li a.folder-link {

  211.   text-decoration: none;

  212.   background: url(../img/folder.png) left 3px no-repeat;

  213.   padding: 3px 3px 3px 20px;

  214.   color: #353535;

  215.   display: block;

  216.   margin-left: 12px;

  217.   width: 90%;

  218. }

  219. 

  220. #folder-explorer-container li.active>a.folder-link {

  221.   font-weight: bold;

  222. }

  223. 

  224. li.closed ul {

  225.   display: none;

  226. }

  227. 

  228. #folder-explorer-container.tft-node-form li.active>.link-wrapper>a {

  229.   background-color: #eee;

  230. }

  231. 

  232. 

  233. /* Admin */

  234. #tft-outline {

  235.   width: 85%;

  236. }

  237. 

  238. #tft-manage-folders-form .form-item {

  239.   float: left;

  240. }

  241. 

  242. .tabledrag-parent-locked .handle {

  243.   background-image: url(../img/draggable.png) !important;

  244. }

  245. 

  246. #folder-menu-container .folder-wrapper {

  247.   background: #009ee0;

  248. }

  249. 

  250. #folder-menu-container .folder-wrapper #tabs ul li a.disabled {

  251.   background-color: #8b8b8d !important;

  252. }

  253. 

  254. #folder-add-content-links {

  255.   background: #58585a;

  256. }

  257. 

  258. #folder-explorer-container.tft-node-form li.active>.link-wrapper {

  259.   background-color: #eee;

  260. }

  261. 

  262. #folder-explorer-container.tft-node-form li.active>.link-wrapper>a {

  263.   background-color: transparent;

  264. }

  265. 

  266. #folder-menu-container .folder-wrapper {

  267.   background: #009ee0;

  268.   color: white;

  269.   padding: 0 0 0 1em;

  270. }

  271. 

  272. #folder-menu-container .folder-wrapper #tabs {

  273.   float: right;

  274. }

  275. 

  276. #folder-menu-container .folder-wrapper #tabs ul {

  277.   display: flex;

  278.   list-style: none;

  279.   margin: 0;

  280. }

  281. 

  282. #folder-menu-container .folder-wrapper #tabs ul #tft-back a {

  283.   border: 0;

  284.   background: #5aa449;

  285.   color: white;

  286.   display: inline-block;

  287.   padding: .25em 1em;

  288.   background-position: .5em center;

  289.   background-repeat: no-repeat;

  290.   padding-left: 3em;

  291.   /*background-image:url("../img/prev-element-icon.png")*/

  292. }

  293. 

  294. #folder-menu-container .folder-wrapper #tabs ul #manage-folders a {

  295.   border: 0;

  296.   background: #5aa449;

  297.   color: white;

  298.   display: inline-block;

  299.   padding: .25em 1em;

  300.   background-position: .5em center;

  301.   background-repeat: no-repeat;

  302.   padding-left: 2em;

  303.   /*background-image:url("../img/sort-element-icon.png")*/

  304. }

  305. 

  306. #folder-menu-container .folder-wrapper #tabs ul li {

  307.   margin: 0;

  308. }

  309. 

  310. #folder-menu-container .folder-wrapper #tabs ul li a {

  311.   margin-right: 0;

  312.   border-left: 1px solid white !important;

  313. }

  314. 

  315. #folder-menu-container .folder-wrapper #tabs ul li a.disabled {

  316.   background-color: #8b8b8d !important;

  317. }

  318. 

  319. #folder-content-container a.folder-folder-link,

  320. #folder-explorer-container li a.folder-link {

  321.   padding-left: 2em;

  322.   /*background:url(../img/folder-icon.png) left center no-repeat*/

  323. }

  324. 

  325. #folder-content-container a.file {

  326.   padding-left: 2em;

  327. }

  328. 

  329. #folder-content-container #table-th-name {

  330.   width: 40%;

  331. }

  332. 

  333. #folder-add-content-links {

  334.   background: #58585a;

  335. }

  336. 

  337. #folder-add-content-links li a {

  338.   border: 0;

  339.   background: #5aa449;

  340.   color: white;

  341.   display: inline-block;

  342.   padding: .25em 1em;

  343.   background-position: .5em center;

  344.   background-repeat: no-repeat;

  345.   padding-left: 2em;

  346.   /*background-image:url("../img/add-element-icon.png");*/

  347.   margin: 0;

  348.   padding-left: 1.5em;

  349.   border-left: 1px solid white !important;

  350. }

  351. 

  352. #folder-menu-ops-links {

  353.   float: right;

  354. }

  355. 

  356. body[class*="page-group-"][class*="-tft"] {

  357. }

  358. 

  359. body[class*="page-group-"][class*="-tft"] .ui-dialog {

  360.   padding: 3px;

  361.   border: 0;

  362.   top: 50% !important;

  363.   left: 50% !important;

  364.   transform: translate(-50%, -50%);

  365.   width: auto !important;

  366. }

  367. 

  368. body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-titlebar {

  369.   padding: 0;

  370.   position: relative;

  371.   border-radius: 0;

  372.   background: none;

  373.   border: 0;

  374. }

  375. 

  376. body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-content {

  377.   padding: 0;

  378. }

  379. 

  380. body[class*="page-group-"][class*="-tft"] .ui-dialog .ui-dialog-titlebar-close {

  381.   background-color: transparent !important;

  382.   box-shadow: none !important;

  383.   right: 0;

  384. }