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