1/*!
2 * Fancytree "Win8" 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// Borders have NO radius and NO gradients are used!
19
20// both:
21//    unselected background: white
22//    hover bar (unselected, inactive): #E5F3FB (border: #70C0E7) 'very light blue'
23//    active node: #CBE8F6 (border: #26A0DA)  'light blue'
24//    active node with hover: wie active node
25
26// Tree view:
27//    active node, tree inactive: #F7F7F7 (border: #DEDEDE) 'light gray, selected, but tree not active'
28
29// List view:
30//    selected bar: --> active bar
31//    focus  bar: transparent(white) + border 1px solid #3399FF  ()
32
33//    table left/right border: #EDEDED 'light gray'
34
35// Override the variable after the import.
36// NOTE: Variables are always resolved as the last definition, even if it is
37// after where it is used.
38@fancy-use-sprites: true;      // false: suppress all background images (i.e. icons)
39
40@fancy-line-height: 20px;      // height of a nodes selection bar including borders
41@fancy-node-v-spacing: 0px;    // gap between two node borders
42@fancy-icon-width: 16px;
43@fancy-icon-height: 16px;
44@fancy-icon-spacing: 3px;      // margin between icon/icon or icon/title
45@fancy-icon-ofs-top: 2px;      // extra vertical offset for expander, checkbox and icon
46@fancy-title-ofs-top: 0px;     // extra vertical offset for title
47@fancy-node-border-width: 1px;
48@fancy-node-border-radius: 0px;
49@fancy-node-outline-width: 1px;
50
51
52// @fancy-icon-width: 16px;
53// @fancy-icon-height: 16px;
54// @fancy-line-height: 16px;
55// @fancy-icon-spacing: 3px;
56
57// We need to define this variable here (not in skin-common.less) to make it
58// work with grunt and webpack:
59@fancy-image-prefix: "./skin-win8/";
60
61// Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
62// @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
63// Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
64// instead of linking to that file:
65// @fancy-inline-sprites: true;
66
67//default 10pt, which is used in a relative manner resulting in 13.3 in dokuwiki-template.
68@fancy-font-size: 93%;
69
70/*******************************************************************************
71 * Node titles
72 */
73.fancytree-plain  {
74	span.fancytree-title {
75		border: @fancy-node-border-width solid transparent;  // avoid jumping, when a border is added on hover
76	}
77	&.fancytree-container.fancytree-treefocus span.fancytree-focused span.fancytree-title {
78		border-color: #3399ff;
79	}
80	span.fancytree-active span.fancytree-title,
81	span.fancytree-selected span.fancytree-title { // active/selcted nodes inside inactive tree
82		background-color: #f7f7f7;
83		border-color: #dedede;
84	}
85	span.fancytree-node span.fancytree-selected span.fancytree-title {
86		font-style: italic;
87	}
88	span.fancytree-node:hover span.fancytree-title {
89		background-color: #eff9fe; // hover is always colored, even if tree is unfocused
90		border-color: #70c0e7;
91	}
92	&.fancytree-container.fancytree-treefocus {
93		span.fancytree-active span.fancytree-title,
94		span.fancytree-selected span.fancytree-title {
95			background-color: #cbe8f6;
96			border-color: #26a0da;
97		}
98	}
99}
100
101/*******************************************************************************
102 * 'table' extension
103 */
104table.fancytree-ext-table tbody {
105	tr td {
106	  border: 1px solid #EDEDED;
107	}
108	span.fancytree-node,
109	span.fancytree-node:hover { // undo standard tree css
110		border: none;
111		background: none;
112	}
113	// Title gets a white background, when hovered. Undo standard node formatting
114	// span.fancytree-title:hover {
115	//   border: none; //1px solid transparent;
116	//   background: inherit;
117	//   background: transparent;
118	//   background: none;
119	//   filter: none;
120	// }
121	tr:hover  {
122		background-color: #E5F3FB;
123	    outline: 1px solid #70C0E7;
124	}
125	// tr:hover td {
126	//   outline: 1px solid #D8F0FA;
127	// }
128	// tr.fancytree-focused {
129	// 	border-color: #3399FF;
130 //    	outline: 1px dotted black;
131	// }
132	tr.fancytree-focused span.fancytree-title {
133	  outline: 1px dotted black;
134	}
135
136	tr.fancytree-active:hover,
137	tr.fancytree-selected:hover {
138		background-color: #CBE8F6;
139	    outline: 1px solid #26A0DA;
140	}
141	tr.fancytree-active {  // dimmed, if inside inactive tree
142		background-color: #F7F7F7;
143	    outline: 1px solid #DEDEDE;
144	}
145	tr.fancytree-selected {  // dimmed, if inside inactive tree
146		background-color: #F7F7F7;
147	}
148}
149
150table.fancytree-ext-table.fancytree-treefocus tbody {
151	tr.fancytree-active {
152		background-color: #CBE8F6;
153	    outline: 1px solid #26A0DA;
154	}
155	tr.fancytree-selected {
156		background-color: #CBE8F6;
157	}
158}
159