1/*!
2 * Fancytree "bootstrap" skin (highlighting the node span instead of title-only).
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// Override the variable after the import.
23// NOTE: Variables are always resolved as the last definition, even if it is
24// after where it is used.
25@fancy-use-sprites: false;  // false: suppress all background images (i.e. icons)
26@fancy-loading-url: none;
27
28@fancy-icon-width: 1em;
29@fancy-icon-height: 1em;
30@fancy-line-height: 1em;
31@fancy-icon-spacing: 0.5em;
32
33// Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
34// @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
35// Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
36// instead of linking to that file:
37// @fancy-inline-sprites: true;
38
39// We need to define this variable here (not in skin-common.less) to make it
40// work with grunt and webpack:
41@fancy-image-prefix: "./skin-bootstrap-n/";
42
43//default 10pt, which is used in a relative manner resulting in 13.3 in dokuwiki-template.
44@fancy-font-size: 93%; //@fancy-cst-size;
45
46ul.fancytree-container ul {
47	padding: 0 0 0 1.5em;
48	margin: 0;
49}
50/* Prevent focus frame */
51.fancytree-container:focus {
52	outline: none;
53}
54
55// Error status node
56.fancytree-container span.fancytree-statusnode-error span.fancytree-expander  {
57	color: @fancy-font-error-color;
58}
59
60/////
61// Original bootstrap colors (http://getbootstrap.com/css/#responsive-utilities)
62@gray-darker:  lighten(#000, 13.5%); // #222
63@gray-dark:    lighten(#000, 20%);   // #333
64@gray:         lighten(#000, 33.5%); // #555
65@gray-light:   lighten(#000, 60%);   // #999
66@gray-lighter: lighten(#000, 93.5%); // #eee
67
68@brand-primary: #428bca;  // blue
69@brand-success: #5cb85c;  // green
70@brand-info:    #5bc0de;  // light blue
71@brand-warning: #f0ad4e;  // orange
72@brand-danger:  #d9534f;  // red
73
74@border-radius-base:  4px;
75@border-radius-large: 6px;
76@border-radius-small: 3px;
77/////////////
78
79span.fancytree-node {
80	border: @fancy-node-border-width solid transparent;  // avoid jumping, when a border is added on hover
81	border-radius: @border-radius-small;
82	padding-left: 8px;
83    color: @fancy-font-color; //set icon color to font color as well
84}
85span.fancytree-title {
86	border-radius: @border-radius-small;
87}
88// Inactive tree:
89span.fancytree-node.fancytree-selected { // selected nodes inside inactive tree
90	background-color: lighten(@brand-success, 10%);
91	border-color: lighten(@brand-success, 10%);
92	span.fancytree-title {
93		background-color: lighten(@brand-success, 10%); // green title, even when active
94	}
95}
96span.fancytree-node.fancytree-active { // active nodes inside inactive tree
97	background-color: lighten(@brand-primary, 10%);
98}
99// Active tree:
100.fancytree-container.fancytree-treefocus {
101	span.fancytree-node:hover {
102		background-color: lighten(@brand-primary, 42%);
103	}
104	span.fancytree-node.fancytree-focused {
105		border-color: @brand-primary;
106	}
107	span.fancytree-node.fancytree-selected {
108		background-color: @brand-success;
109		span.fancytree-title {
110			background-color: @brand-success; // green title, even when active
111		}
112	}
113	span.fancytree-node.fancytree-active {
114		background-color: @brand-primary;
115		border-color: @brand-primary;
116	}
117}
118
119///*******************************************************************************
120// * 'table' extension
121// */
122//table.fancytree-ext-table tbody {
123//	tr td {
124//	  border: 1px solid @gray-lighter;
125//	}
126//	// span.fancytree-node,
127//	// span.fancytree-node:hover { // undo standard tree css
128//	// 	border: none;
129//	// 	background: none;
130//	// }
131//	// // Title get's a white background, when hovered. Undo standard node formatting
132//	// span.fancytree-title:hover {
133//	//   border: none;
134//	//   background: inherit;
135//	//   background: transparent;
136//	//   background: none;
137//	//   filter: none;
138//	// }
139//	// dimmed, if inside inactive tree
140//	tr.fancytree-selected {
141//		background-color: lighten(@brand-success, 10%);
142//		span.fancytree-node {
143//			background-color: lighten(@brand-success, 10%);
144//		}
145//		span.fancytree-title {
146//			background-color: lighten(@brand-success, 10%); // green title, even when active
147//		}
148//	}
149//	tr.fancytree-active {  // dimmed, if inside inactive tree
150//		background-color: lighten(@brand-primary, 10%);
151//		span.fancytree-node {
152//			background-color: lighten(@brand-primary, 10%);
153//		}
154//	}
155//}
156//
157//table.fancytree-ext-table.fancytree-treefocus tbody {
158//	tr:hover  {
159//		background-color: lighten(@brand-primary, 42%);
160//	    // outline: 1px solid @brand-primary;
161//	}
162//	tr.fancytree-focused span.fancytree-title {
163//		outline: 1px dotted @brand-primary;
164//	}
165//	tr.fancytree-active:hover,
166//	tr.fancytree-selected:hover {
167//		// background-color: #CBE8F6;
168//	 //    outline: 1px solid #26A0DA;
169//	}
170//	tr.fancytree-selected {
171//		background-color: @brand-success;
172//		span.fancytree-node {
173//			background-color: @brand-success;
174//		}
175//		span.fancytree-title {
176//			background-color: @brand-success; // green title, even when active
177//		}
178//	}
179//	tr.fancytree-active {
180//		background-color: @brand-primary;
181//		span.fancytree-node {
182//			background-color: @brand-primary;
183//		}
184//	}
185//}
186