ui.fancytree.less
4.61 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
/*!
* Fancytree "Win7" skin.
*
* DON'T EDIT THE CSS FILE DIRECTLY, since it is automatically generated from
* the LESS templates.
*/
// Dynatree Vista styles
// both:
// unselected background: #FCFCFC 'nearly white'
// hover bar (unselected, inactive): #F8FCFE..#EFF9FE (border: #D8F0FA) 'very light blue'
// background: #f8fcfe; //
// background: -moz-linear-gradient(top, #f8fcfe 0%, #eff9fe 100%);
// active node: #F6FBFD..#D5EFFC (border: #99DEFD) 'light blue'
// background: #f6fbfd;
// background: -moz-linear-gradient(top, #f6fbfd 0%, #d5effc 100%);
// active node with hover: #F2F9FD..#C4E8FA (border: #B6E6FB)
// background: #f2f9fd;
// background: -moz-linear-gradient(top, #f2f9fd 0%, #c4e8fa 100%);
// Tree view:
// active node, tree inactive: #FAFAFB..#E5E5E5 (border: #D9D9D9) 'light gray, selected, but tree not active'
// background: #fafafb;
// background: -moz-linear-gradient(top, #fafafb 0%, #e5e5e5 100%);
// List view:
// selected bar: --> active bar
// focus bar: active + border 1px dotted #090402 (inside the blue border)
// table left/right border: #EDEDED 'light gray'
// Import common styles
@import "../skin-common.less";
/*******************************************************************************
* Styles specific to this skin.
*
* This section is automatically generated from the `ui-fancytree.less` template.
******************************************************************************/
// Override the variable after the import.
// NOTE: Variables are always resolved as the last definition, even if it is
// after where it is used.
@fancy-use-sprites: true;
@fancy-hide-connectors: true;
@fancy-icon-width: 16px;
@fancy-icon-height: 16px;
@fancy-line-height: 16px;
@fancy-icon-margin-left: 3px;
/*******************************************************************************
* Node titles
*/
span.fancytree-title {
border: @fancy-node-border-width solid transparent; // avoid jumping, when a border is added on hover
border-radius: 3px;
}
span.fancytree-title:hover {
.spanStyleMixin(inherit, #f8fcfe, #D8F0FA, #f8fcfe, #eff9fe);
}
span.fancytree-focused span.fancytree-title {
outline: 1px dotted black;
}
// Safari does not support outline on a tags?
// @media screen and (-webkit-min-device-pixel-ratio:0) {
// span.fancytree-focused a:link
// {
// border: 1px dotted black;
// }
// }
// active nodes inside an UN-focused tree are gray instead of blue
span.fancytree-active .fancytree-title {
.spanStyleMixin(inherit, #e5e5e5, #d9d9d9, #fafafb, #e5e5e5);
}
.fancytree-treefocus span.fancytree-active .fancytree-title,
span.fancytree-selected .fancytree-title {
.spanStyleMixin(inherit, #f6fbfd, #99defd, #f6fbfd, #d5effc);
}
span.fancytree-active .fancytree-title:hover,
span.fancytree-active.fancytree-focused .fancytree-title,
span.fancytree-selected .fancytree-title:hover,
span.fancytree-selected.fancytree-focused .fancytree-title {
.spanStyleMixin(inherit, #f2f9fd, #B6E6FB, #f2f9fd, #c4e8fa);
}
// File Explorer does not distinguish selected and active (if multiple nodes are selected)
// span.fancytree-active .fancytree-title,
// span.fancytree-active.fancytree-focused .fancytree-title {
// .spanStyleMixin(inherit, #daedff, #3399FF, #daedff, #b4d9ff);
// }
.fancytree-selected .fancytree-title {
font-style: italic;
}
.fancytree-has-children .fancytree-title {
}
.fancytree-expanded .fancytree-title {
}
/*******************************************************************************
* 'table' extension
*/
table.fancytree-ext-table tbody {
tr td {
border: 1px solid #EDEDED;
}
tr:hover {
.spanStyleMixin(inherit, #f8fcfe, inherit, #f8fcfe, #eff9fe);
outline: 1px solid #D8F0FA;
}
// tr:hover td {
// outline: 1px solid #D8F0FA;
// }
tr.fancytree-focused {
// background-color: #99DEFD;
outline: 1px dotted #090402;
}
span.fancytree-focused span.fancytree-title {
outline: solid dotted black;
}
// Title get's a white background, when hovered. Undo standard node formatting
span.fancytree-title:hover {
border: 1px solid transparent;
background: inherit;
background: transparent;
background: none;
filter: none;
}
tr.fancytree-active:hover,
tr.fancytree-selected:hover {
.spanStyleMixin(inherit, #f2f9fd, inherit, #f2f9fd, #c4e8fa);
outline: 1px solid #B6E6FB;
}
tr.fancytree-active,
tr.fancytree-selected {
.spanStyleMixin(inherit, #f6fbfd, inherit, #f6fbfd, #d5effc);
outline: 1px solid #99DEFD;
}
// tr.fancytree-selected .fancytree-title {
// font-style: italic;
// }
}