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