1/*!
2 * Fancytree "XP" 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// Override the variable after the import.
19// NOTE: Variables are always resolved as the last definition, even if it is
20// after where it is used.
21@fancy-use-sprites: true;      // false: suppress all background images (i.e. icons)
22
23@fancy-icon-width: 16px;
24@fancy-icon-height: 16px;
25@fancy-icon-spacing: 3px;
26@fancy-node-border-width: 0;
27@fancy-node-v-spacing: 0px;    // gap between two node borders
28
29// We need to define this variable here (not in skin-common.less) to make it
30// work with grunt and webpack:
31@fancy-image-prefix: "./skin-xp/";
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//default 10pt, which is used in a relative manner resulting in 13.3 in dokuwiki-template.
40@fancy-font-size: 93%;
41
42/*******************************************************************************
43 * Tree container
44 */
45ul.fancytree-container {
46	li {
47		// background-image: url("vline.gif");
48		// Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
49		/* CHANGE: replace data-uri() with url() */
50		background-image: url("@{fancy-image-prefix}vline.gif");
51		background-position: 0 1px;
52	}
53	&.fancytree-rtl {
54		li {
55			background-position: right 1px;
56			background-image: url("@{fancy-image-prefix}vline-rtl.gif");
57		}
58		.fancytree-exp-n span.fancytree-expander {
59			background-image: url("@{fancy-image-prefix}icons-rtl.gif");
60			.useSprite(0, 4);
61		}
62		.fancytree-exp-nl span.fancytree-expander {
63			background-image: url("@{fancy-image-prefix}icons-rtl.gif");
64			.useSprite(1, 4);
65		}
66	}
67	// Suppress lines for last child node
68	li.fancytree-lastsib {
69		background-image: none;
70	}
71}
72// Suppress lines if level is fixed expanded (option minExpandLevel)
73ul.fancytree-no-connector > li {
74	background-image: none;
75}
76
77// XP theme always displays connectors (not only when .fancytree-connectors is set)
78.fancytree-exp-n span.fancytree-expander,
79.fancytree-exp-nl span.fancytree-expander {
80	.setBgImageUrl("icons.gif");
81	// margin-top: 0;
82}
83.fancytree-exp-n span.fancytree-expander,       // End-node, not last sibling
84.fancytree-exp-n span.fancytree-expander:hover {
85	.useSprite(0, 4);
86}
87.fancytree-exp-nl span.fancytree-expander,      // End-node, last sibling
88.fancytree-exp-nl span.fancytree-expander:hover {
89	.useSprite(1, 4);
90}
91
92/*******************************************************************************
93 * Node titles
94 */
95
96span.fancytree-title {
97  border: @fancy-node-border-width solid transparent;  // avoid jumping, when a border is added on hover
98}
99span.fancytree-title:hover {
100	background-color: #F2F7FD; // light blue
101	border-color: #B8D6FB; // darker light blue
102}
103span.fancytree-focused span.fancytree-title {
104	outline: 1px dotted black;
105	background-color: #EFEBDE; // gray
106}
107.fancytree-folder span.fancytree-title {
108	font-weight: bold;
109}
110.fancytree-selected span.fancytree-title {
111	color: green;
112	font-style: italic;
113}
114.fancytree-active span.fancytree-title {
115	background-color: #3169C6 !important;
116	color: white !important; // @ IE6
117}
118
119///*******************************************************************************
120// * 'table' extension
121// */
122//table.fancytree-ext-table {
123//	border-collapse: collapse;
124//	tbody tr.fancytree-focused {
125//		background-color: #99DEFD;
126//	}
127//	tbody tr.fancytree-active {
128//		background-color: royalblue;
129//	}
130//	tbody tr.fancytree-selected {
131//		background-color: #99FDDE;
132//	}
133//}
134