1/*!
2 * Fancytree "Vista" skin.
3 *
4 * DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
5 * the LESS templates.
6 */
7
8/*
9both:
10   unselected background: #FCFCFC 'nearly white'
11   hover bar (unselected, inactive): #F8FCFE..#EFF9FE (border: #D8F0FA) 'very light blue'
12   active node: #F6FBFD..#D5EFFC (border: #99DEFD)  'light blue'
13   active node with hover: #F2F9FD..#C4E8FA (border: #B6E6FB)
14
15Tree view:
16   active node, tree inactive: #FAFAFB..#E5E5E5 (border: #D9D9D9) 'light gray, selected, but tree not active'
17
18List view:
19   selected bar: --> active bar
20   focus  bar: active + border 1px dotted #090402 (inside the blue border)
21
22   table left/right border: #EDEDED 'light gray'
23 */
24
25// Import common styles
26@import "skin-common.less";
27
28
29/*******************************************************************************
30 * Styles specific to this skin.
31 *
32 * This section is automatically generated from the `ui-fancytree.less` template.
33 ******************************************************************************/
34
35
36// Override the variable after the import.
37// NOTE: Variables are always resolved as the last definition, even if it is
38// after where it is used.
39@fancy-use-sprites: true;  // false: suppress all background images (i.e. icons)
40
41@fancy-icon-width: 16px;
42@fancy-icon-height: 16px;
43@fancy-line-height: 16px;
44@fancy-icon-spacing: 3px;
45
46// We need to define this variable here (not in skin-common.less) to make it
47// work with grunt and webpack:
48@fancy-image-prefix: "./skin-vista/";
49
50// Use 'data-uri(...)' to embed the image into CSS instead of linking to 'loading.gif':
51// @fancy-loading-url: data-uri("@{fancy-image-prefix}loading.gif");
52// Set to `true` to use `data-uri(...)` which will embed icons.gif into CSS
53// instead of linking to that file:
54// @fancy-inline-sprites: true;
55
56//default 10pt, which is used in a relative manner resulting in 13.3 in dokuwiki-template.
57@fancy-font-size: 93%;
58
59/*******************************************************************************
60 * Node titles
61 */
62span.fancytree-title {
63  border: @fancy-node-border-width solid transparent;  // avoid jumping, when a border is added on hover
64}
65span.fancytree-title:hover {
66   background-color: #F2F7FD; // light blue
67   border-color: #B8D6FB; // darker light blue
68}
69.fancytree-folder span.fancytree-title {
70   // font-weight: bold;
71}
72span.fancytree-focused span.fancytree-title {
73   background-color: #EFEBDE; // gray
74   outline: 1px dotted gray;
75}
76span.fancytree-has-children span.fancytree-title {
77  // font-style: oblique;
78}
79span.fancytree-expanded span.fancytree-title {
80}
81span.fancytree-selected span.fancytree-title {
82   font-style: italic;
83}
84span.fancytree-active span.fancytree-title {
85   border: 1px solid #99DEFD;
86   background-color: #D8F0FA;
87}
88
89/*******************************************************************************
90 * 'table' extension
91 */
92
93table.fancytree-ext-table {
94   border-collapse: collapse;
95   tbody tr.fancytree-focused {
96      background-color: #99DEFD;
97   }
98   tbody tr.fancytree-active {
99      background-color: royalblue;
100   }
101   tbody tr.fancytree-selected {
102      background-color: #99FDDE;
103   }
104}
105
106/*******************************************************************************
107 * 'columnview' extension
108 */
109
110table.fancytree-ext-columnview {
111   span.fancytree-node.fancytree-expanded {
112      background-color: #ccc;
113   }
114   span.fancytree-node.fancytree-active {
115      background-color: royalblue;
116   }
117}
118