miteruzo
/
mr-legend_wiki
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
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.
1 Commit
1 Branch
13 MiB
 
 
 
 
 
Tree: c616a96f53
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c616a96f53'
${ noResults }
mr-legend_wiki/lib/plugins/indexmenu/scripts/fancytree/skin-bootstrap/ui.fancytree.less

357 lines
12 KiB
Raw Blame History 

  1. /*!

  2.  * Fancytree "bootstrap" skin.

  3.  *

  4.  * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from

  5.  * the LESS templates.

  6.  */

  7. 

  8. // Import common styles

  9. @import "skin-common.less";

  10. 

  11. 

  12. /*******************************************************************************

  13.  * Styles specific to this skin.

  14.  *

  15.  * This section is automatically generated from the `ui-fancytree.less` template.

  16.  ******************************************************************************/

  17. 

  18. 

  19. // local vars

  20. // @fancy-my-icon-size: 16px;

  21. 

  22. //------------------------------------------------------------------------------

  23. // Original bootstrap colors

  24. // See http://getbootstrap.com/css/#less-variables-colors and

  25. //     https://github.com/twbs/bootstrap/blob/master/less/variables.less

  26. @gray-base:              #000;

  27. @gray-darker:            lighten(@gray-base, 13.5%); // #222

  28. @gray-dark:              lighten(@gray-base, 20%);   // #333

  29. @gray:                   lighten(@gray-base, 33.5%); // #555

  30. @gray-light:             lighten(@gray-base, 46.7%); // #777

  31. @gray-lighter:           lighten(@gray-base, 93.5%); // #eee

  32. 

  33. @brand-primary:         darken(#428bca, 6.5%); // blue,  #337ab7

  34. @brand-success:         #5cb85c;  // green

  35. @brand-info:            #5bc0de;  // light blue

  36. @brand-warning:         #f0ad4e;  // orange

  37. @brand-danger:          #d9534f;  // red

  38. 

  39. @font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  40. @font-family-serif:       Georgia, "Times New Roman", Times, serif;

  41. //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.

  42. @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;

  43. @font-family-base:        @font-family-sans-serif;

  44. 

  45. @font-size-base:          14px;

  46. @font-size-large:         ceil((@font-size-base * 1.25)); // ~18px

  47. @font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

  48. 

  49. @border-radius-base:  4px;

  50. @border-radius-large: 6px;

  51. @border-radius-small: 3px;

  52. 

  53. @text-color: @gray-dark;

  54. //** Default background color used for all tables.

  55. @table-bg:                      transparent;

  56. //** Background color used for `.table-striped`.

  57. @table-bg-accent:               #f9f9f9;

  58. //** Background color used for `.table-hover`.

  59. @table-bg-hover:                #f5f5f5;

  60. @table-bg-active:               @table-bg-hover;

  61. 

  62. //** Border color for table and cell borders.

  63. @table-border-color:            #ddd;

  64. 

  65. //------------------------------------------------------------------------------

  66. 

  67. // Override the variable after the import.

  68. // NOTE: Variables are always resolved as the last definition, even if it is

  69. // after where it is used.

  70. @fancy-use-sprites: false;     // false: suppress all background images (i.e. icons)

  71. @fancy-loading-url: none;

  72. 

  73. @fancy-line-height: 1em;       // height of a nodes selection bar including borders

  74. @fancy-node-v-spacing: 0px;    // gap between two node borders

  75. @fancy-icon-width: 1em;

  76. @fancy-icon-height: 1em;

  77. @fancy-icon-spacing: 0.5em;    // margin between icon/icon or icon/title

  78. @fancy-icon-ofs-top: 2px;      // extra vertical offset for expander, checkbox and icon

  79. @fancy-title-ofs-top: 0px;     // extra vertical offset for title

  80. @fancy-node-border-width: 1px;

  81. @fancy-node-border-radius: @border-radius-small;

  82. @fancy-node-outline-width: 1px;

  83. 

  84. @fancy-font-family: @font-family-base;

  85. @fancy-font-size: @font-size-base;

  86. @fancy-font-color: @text-color;

  87. @fancy-font-color-dimm: @gray-dark;

  88. @fancy-font-error-color: @brand-danger;

  89. 

  90. @fancy-active-text: #fff;

  91. @fancy-active-color: @brand-primary;

  92. @fancy-select-color: @brand-success;

  93. @fancy-hover-color: @table-bg-hover;

  94. 

  95. // We need to define this variable here (not in skin-common.less) to make it

  96. // work with grunt and webpack:

  97. @fancy-image-prefix: "./skin-bootstrap/";

  98. 

  99. /*******************************************************************************

  100.  * Plain tree

  101.  * Modifier classes on <ul> container:

  102.  * table-hover                : Enable a light mouse hover effect

  103.  * fancytree-colorize-selected: Give selected (checked) rows a color

  104.  */

  105. ul.fancytree-container ul {

  106. 	padding: 0 0 0 1.5em;

  107. 	margin: 0;

  108. }

  109. /* Prevent focus frame */

  110. .fancytree-container:focus {

  111. 	outline: none;

  112. }

  113. 

  114. // Active and (optionally) selected nodes are white on colored bg. Undo this for input controls:

  115. .fancytree-container .fancytree-active span.fancytree-title input,

  116. .fancytree-container.fancytree-colorize-selected .fancytree-selected span.fancytree-title input  {

  117.   color: black;

  118. }

  119. 

  120. // Error status node

  121. .fancytree-container span.fancytree-statusnode-error span.fancytree-expander  {

  122. 	color: @fancy-font-error-color;

  123. }

  124. 

  125. // set icon color to font color as well

  126. span.fancytree-node {

  127.     color: @fancy-font-color;

  128. }

  129. 

  130. //// ------------------------------------------------------------------------------

  131. ////  * Drag'n'drop support

  132. ////  *----------------------------------------------------------------------------

  133. //// div.fancytree-drag-helper {

  134. //// }

  135. //// div.fancytree-drag-helper a {

  136. //// 	border: 1px solid gray;

  137. //// 	background-color: white;

  138. //// 	padding-left: 5px;

  139. //// 	padding-right: 5px;

  140. //// 	opacity: 0.8;

  141. //// }

  142. //// span.fancytree-drag-helper-img {

  143. //// // position: relative;

  144. //// // left: -16px;

  145. //// }

  146. //div.fancytree-drag-helper.fancytree-drop-reject,

  147. //div.fancytree-drag-helper.fancytree-drop-reject span.fancytree-title

  148. //{

  149. //	color: @fancy-font-error-color;

  150. //}

  151. //// div.fancytree-drop-accept span.fancytree-drag-helper-img {

  152. //// 	.useSprite(2, 7);

  153. //// }

  154. //// div.fancytree-drop-reject span.fancytree-drag-helper-img {

  155. //// 	.useSprite(1, 7);

  156. //// }

  157. //

  158. //// //--- Drop marker icon ---------------------------------------------------------

  159. //// #fancytree-drop-marker {

  160. //// 	width: 2 * @fancy-icon-width; // was 24px, but 32 should be correct

  161. //// 	position: absolute;

  162. //// 	.useSprite(0, 8);

  163. //// 	margin: 0;

  164. //// 	&.fancytree-drop-after,

  165. //// 	&.fancytree-drop-before {

  166. //// 		width: 4 * @fancy-icon-width; // 64px;

  167. //// 		.useSprite(0, 9);

  168. //// 	}

  169. //// 	&.fancytree-drop-copy {

  170. //// 		.useSprite(4, 8);

  171. //// 	}

  172. //// 	&.fancytree-drop-move {

  173. //// 		.useSprite(2, 8);

  174. //// 	}

  175. //// }

  176. ////

  177. ////--- Source node while dragging -----------------------------------------------

  178. //

  179. //span.fancytree-node.fancytree-drag-source {

  180. //	background-color: @brand-info !important;

  181. //	span.fancytree.title {

  182. //		// outline: 1px solid @brand-info;

  183. //		// color: @brand-primary;

  184. //	}

  185. //}

  186. //

  187. ////--- Target node while dragging cursor is over it -----------------------------

  188. //

  189. //span.fancytree-node.fancytree-drop-target {

  190. //	&.fancytree-drop-accept span.fancytree.title {

  191. //		// background-color: @brand-danger !important;

  192. //		// outline: 1px solid @brand-success;

  193. //		// color: white !important;

  194. //	}

  195. //	&.fancytree-drop-reject span.fancytree.title {

  196. //		background-color: @brand-danger !important;

  197. //		// outline: 1px solid @brand-danger;

  198. //		// color: white !important;

  199. //	}

  200. //}

  201. //

  202. //span.fancytree-expander {

  203. //	color: #999;  // colpased expander is gray

  204. //}

  205. //.fancytree-expanded span.fancytree-expander {

  206. //	color: @fancy-font-color;

  207. //}

  208. //span.fancytree-node span.fancytree-expander:hover {

  209. //	color: cyan;

  210. //}

  211. 

  212. // Inactive tree:

  213. .fancytree-plain {

  214. 	&.fancytree-colorize-selected {

  215. 		span.fancytree-node.fancytree-selected,

  216. 		span.fancytree-node.fancytree-selected span.fancytree-title { // selected nodes inside inactive tree

  217. 			background-color: lighten(@fancy-select-color, 10%);

  218. 			border-color: lighten(@fancy-select-color, 10%);

  219. 			color: @fancy-active-text;

  220. 		}

  221. 		span.fancytree-node.fancytree-selected:hover span.fancytree-title {

  222. 			background-color: lighten(@fancy-select-color, 5%);

  223. 		}

  224. 		span.fancytree-node.fancytree-active.fancytree-selected span.fancytree-title { // active nodes inside inactive tree

  225. 			color: lighten(@fancy-select-color, 10%);

  226. 		}

  227. 		&.fancytree-treefocus {

  228. 			span.fancytree-title:hover {

  229. 				background-color: @fancy-hover-color;

  230. 			}

  231. 			span.fancytree-node.fancytree-selected span.fancytree-title {

  232. 				background-color: @fancy-select-color;

  233. 			}

  234. 			span.fancytree-node.fancytree-selected:hover span.fancytree-title {

  235. 				background-color: darken(@fancy-select-color, 5%);

  236. 			}

  237. 			span.fancytree-node.fancytree-active.fancytree-selected span.fancytree-title {

  238. 				color: @fancy-select-color;

  239. 			}

  240. 		}

  241. 	}

  242. 

  243. 	&.fancytree-container {  // adding this class to increase specificity, so we can override .fancytree-colorize-selected

  244. 		span.fancytree-node {

  245. 			margin-top: 2px;

  246. 			margin-bottom: 2px;

  247. 		}

  248. 		span.fancytree-title {

  249. 			border: @fancy-node-border-width solid transparent;  // avoid jumping, when a border is added on hover

  250. 			border-radius: @border-radius-small;

  251. 			outline-radius: @border-radius-small;

  252. 		}

  253. 		span.fancytree-title:hover {

  254. 			background-color: @fancy-hover-color;

  255. 		}

  256. 		span.fancytree-node.fancytree-active span.fancytree-title { // active nodes inside inactive tree

  257. 			background-color: lighten(@fancy-active-color, 10%);

  258. 			color: @fancy-active-text;

  259. 		}

  260. 		span.fancytree-node.fancytree-active:hover span.fancytree-title {

  261. 			background-color: lighten(@fancy-active-color, 5%);

  262. 		}

  263. 		&.fancytree-ext-wide span.fancytree-node.fancytree-active { // in wide mode, icons of active nodes must be white-on-color

  264. 			color: @fancy-active-text;

  265. 		}

  266. 

  267. 		// Active tree:

  268. 		&.fancytree-treefocus {

  269. 			span.fancytree-node.fancytree-focused span.fancytree-title {

  270. 				border-color: @brand-primary;

  271. 			}

  272. 			span.fancytree-node.fancytree-active span.fancytree-title {

  273. 				background-color: @fancy-active-color;

  274. 				border-color: @fancy-active-color;

  275. 			}

  276. 			span.fancytree-node.fancytree-active:hover span.fancytree-title {

  277. 				background-color: darken(@fancy-active-color, 5%);

  278. 			}

  279. 		}

  280. 	}

  281. }

  282. 

  283. ///*******************************************************************************

  284. // * 'table' extension

  285. // * Modifier classes on <table>:

  286. // * table-hover                : Enable a light mouse hover effect

  287. // * fancytree-colorize-selected: Give selected (checked) rows a color

  288. // */

  289. //table.fancytree-ext-table {

  290. //	>tbody >tr >td span.fancytree-title {

  291. //		border: none;

  292. //	}

  293. //

  294. //	// Give a separate color for selected (checked) rows

  295. //	// Define *before* the .fancytree-active rules, because active color should

  296. //	// override selected color.

  297. //	&.fancytree-colorize-selected {

  298. //		>tbody >tr.fancytree-selected >td {

  299. //			// dimmed, if inside inactive tree

  300. //			background-color: lighten(@fancy-select-color, 10%);

  301. //			// white text for selected nodes

  302. //			&,

  303. //			span.fancytree-title {

  304. //				color: @fancy-active-text;

  305. //			}

  306. //		}

  307. //		&.fancytree-treefocus >tbody >tr.fancytree-selected >td {

  308. //			background-color: @fancy-select-color;

  309. //		}

  310. //		&.table-hover >tbody >tr.fancytree-selected:hover >td {

  311. //			// dimmed, if inside inactive tree

  312. //			background-color: lighten(@fancy-select-color, 5%);

  313. //		}

  314. //		&.fancytree-treefocus.table-hover >tbody >tr.fancytree-selected:hover >td {

  315. //			background-color: darken(@fancy-select-color, 5%);

  316. //		}

  317. //		&.fancytree-treefocus.table-hover >tbody >tr.fancytree-selected.fancytree-active:hover >td,

  318. //		&.table-hover >tbody >tr.fancytree-selected.fancytree-active:hover >td {

  319. //			background-color: darken(@fancy-active-color, 5%);

  320. //		}

  321. //		>tbody >tr.fancytree-active.fancytree-selected  {

  322. //			outline-width: 2px;

  323. //			outline-offset: -2px;

  324. //			outline-style: solid;

  325. //			outline-color: lighten(@fancy-select-color, 10%);

  326. //		}

  327. //	}

  328. //

  329. //	// General tree (slightly dimmed, since we also define colors for inactive

  330. //	// mode here).

  331. //

  332. //	&.fancytree-container >tbody >tr.fancytree-active >td {

  333. //		background-color: lighten(@fancy-active-color, 10%);

  334. //		// white text for selected nodes

  335. //		&,

  336. //		span.fancytree-title {

  337. //			color: @fancy-active-text;

  338. //		}

  339. //	}

  340. //

  341. //	// Reset to standard colors if tree has keyboard focus.

  342. //	// We add .fancytree-container to increase specificity, so we can override

  343. //	// .fancytree-colorize-selected defined above

  344. //

  345. //	&.fancytree-treefocus.fancytree-container {

  346. //		>tbody >tr.fancytree-focused span.fancytree-title {

  347. //			outline: 1px dotted #000;

  348. //		}

  349. //		>tbody >tr.fancytree-active >td {

  350. //			background-color: @fancy-active-color;

  351. //		}

  352. //		&.table-hover >tbody >tr.fancytree-active:hover >td {

  353. //			background-color: darken(@fancy-active-color, 5%);

  354. //		}

  355. //	}

  356. //}