1/** 2 * This file provides the styles for the page tools 3 * (fly out navigation beside the page to edit, etc). 4 * 5 * @author Anika Henke <anika@selfthinker.org> 6 * @author Andreas Gohr <andi@splitbrain.org> 7 */ 8 9#dokuwiki__site > .site { 10 /* give space to the right so the tools won't disappear on smaller screens */ 11 /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */ 12 padding-right: 40px; 13 /* give the same space to the left to balance it out */ 14 padding-left: 40px; 15} 16 17.dokuwiki div.page { 18 height: 190px; 19 min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */ 20 height: auto; 21} 22 23#dokuwiki__pagetools { 24 @ico-width: 28px; 25 @ico-margin: 8px; 26 @item-width: (@ico-width + @ico-margin + @ico-margin); 27 @item-height: (@ico-width + @ico-margin); 28 29 position: absolute; 30 right: (-1 * @item-width); 31 /* on same vertical level as first headline, because .page has 2em padding */ 32 top: 2em; 33 width: @item-width; 34 35 div.tools { 36 position: fixed; 37 width: @item-width; 38 39 ul { 40 position: absolute; 41 right: 0; 42 text-align: right; 43 margin: 0; 44 padding: 0; 45 /* add transparent border to prevent jumping when proper border is added on hover */ 46 border: 1px solid transparent; 47 z-index: 10; 48 49 li { 50 padding: 0; 51 margin: 0; 52 list-style: none; 53 font-size: 0.875em; 54 55 a { 56 57 display: block; 58 /* add transparent border to prevent jumping when proper border is added on focus */ 59 border: 1px solid transparent; 60 white-space: nowrap; 61 line-height: @item-height; 62 vertical-align: middle; 63 height: @item-height; 64 65 span { 66 display: none; // hide label until hover 67 margin: 0 @ico-margin; 68 } 69 70 svg { 71 width: @ico-width; 72 height: @ico-width; 73 margin: 0 @ico-margin; 74 display: inline-block; 75 vertical-align: middle; 76 fill: @ini_border; 77 } 78 } 79 80 // on interaction show the full item 81 a:active, 82 a:focus, 83 a:hover { 84 background-color: @ini_background_alt; 85 86 span { 87 display: inline-block; 88 } 89 90 svg { 91 fill: @ini_link; 92 } 93 } 94 } 95 } 96 } 97 98 [dir=rtl] & { 99 right: auto; 100 left: (-1 * @item-width); 101 102 div.tools { 103 ul { 104 right: auto; 105 left: 0; 106 text-align: left; 107 } 108 } 109 } 110} 111 112// on hover or focus show all items 113#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within { 114 div.tools ul { 115 background-color: @ini_background; 116 border-color: @ini_border; 117 border-radius: 2px; 118 box-shadow: 2px 2px 2px @ini_text_alt; 119 120 li a span { 121 display: inline-block; 122 } 123 } 124} 125