1/** 2 * This file provides the design styles for the page specific tool bar. 3 */ 4 5/* 6 FIXME 7.pagetools-item(edit, 1); 8.pagetools-item(create, 2); 9.pagetools-item(show, 4); 10.pagetools-item(source, 5); 11.pagetools-item(draft, 3); 12.pagetools-item(revs, 7, revisions); 13.pagetools-item(backlink, 8, backlink); 14.pagetools-item(top, 10); 15.pagetools-item(revert, 6, revert); 16.pagetools-item(subscribe, 9, subscribe); 17.pagetools-item(mediaManager, 11); 18.pagetools-item(back, 12); 19.pagetools-item(img_backto, 12); 20*/ 21 22#dokuwiki__aside { 23 @media @screen_max-md { 24 display: none !important; 25 } 26} 27 28nav#dokuwiki__pagetools { 29 @toolbox-size: 30px; 30 31 @page-tools_svg-size: 25px; 32 @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2; 33 @item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space); 34 @item-height: (@page-tools_svg-size + @page-tools_svg-space); 35 36 top: 3.05rem; 37 position: absolute; 38 39 width: @item-width; 40 41 @media @screen_min-md { 42 right: -2.5rem; 43 } 44 45 @media @screen_max-md { 46 right: 8px; 47 } 48 49 @media @screen_max-xxs { 50 display: none; 51 } 52 div.tools { 53 position: fixed; 54 width: @item-width; 55 } 56 57 ul { 58 position: absolute; 59 right: 0; 60 text-align: right; 61 margin: 0; 62 padding: 0; 63 /* add transparent border to prevent jumping when proper border is added on hover */ 64 border: 1px solid transparent; 65 66 li { 67 padding: 0; 68 margin: 0; 69 list-style: none; 70 71 a { 72 display: inline-table; 73 /* add transparent border to prevent jumping when proper border is added on focus */ 74 border: 1px solid transparent; 75 white-space: nowrap; 76 vertical-align: middle; 77 height: @item-height; 78 79 position: relative; 80 line-height: 20px; 81 font-size: @font-size-default; 82 padding: 2px 0 2px 2px; 83 84 @media @screen_min-md { 85 color: @ini_nav_menu_color; 86 } 87 88 @media @screen_max-md { 89 color: @ini_existing; 90 } 91 92 &::before { 93 display: none; 94 } 95 96 &:hover, 97 &:focus, 98 &:active { 99 background-color: transparent; 100 } 101 102 &:focus { 103 box-shadow: @box-shadow; 104 background-image: none; 105 background-color: @ini_background; 106 color: @ini_existing; 107 108 span { 109 position: relative; 110 display: inline; 111 width: auto; 112 height: auto; 113 } 114 115 svg { 116 fill: @ini_existing; 117 } 118 } 119 120 span { 121 .sr-only(); 122 123 padding-right: .5rem; 124 padding-left: .3rem; 125 } 126 127 svg { 128 display: inline-block; 129 width: @page-tools_svg-size; 130 height: @page-tools_svg-size; 131 vertical-align: middle; 132 border: solid 1px transparent; 133 margin: @page-tools_svg-space; 134 135 @media @screen_min-md { 136 fill: @ini_nav_menu_color; 137 } 138 139 @media @screen_max-md { 140 fill: @ini_existing; 141 } 142 } 143 144 &.top { 145 margin-top: 1em; 146 } 147 } 148 } 149 } 150 151 &:hover { 152 ul { 153 box-shadow: @box-shadow; // @box-shadow-offset; 154 background-color: @ini_background; 155 border-color: @wikiicons-border; 156 157 li { 158 color: @ini_existing; 159 160 a { 161 box-shadow: none; 162 background-image: none; 163 border-color: transparent; 164 color: inherit; 165 166 svg { 167 border: solid 1px transparent; 168 border-radius: @ini_default_border_radius; 169 fill: @ini_existing; 170 transition: @transition background-color, @transition border-color, @transition fill; 171 } 172 173 &:hover, 174 &:focus, 175 &:active { 176 svg { 177 background-color: @ini_existing; 178 border-color: @ini_existing; 179 fill: @ini_background; 180 } 181 } 182 183 span { 184 position: static; 185 width: auto; 186 height: auto; 187 margin: auto; 188 } 189 } 190 } 191 } 192 } 193} 194