Current File : /www/varak.net/recepty.varak.net/lib/tpl/dokuwiki/css/pagetools.less
/**
* This file provides the styles for the page tools
* (fly out navigation beside the page to edit, etc).
*
* @author Anika Henke <anika@selfthinker.org>
* @author Andreas Gohr <andi@splitbrain.org>
*/
#dokuwiki__site > .site {
/* give space to the right so the tools won't disappear on smaller screens */
/* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
padding-right: 40px;
/* give the same space to the left to balance it out */
padding-left: 40px;
}
.dokuwiki div.page {
height: 190px;
min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
height: auto;
}
#dokuwiki__pagetools {
@ico-width: 28px;
@ico-margin: 8px;
@item-width: (@ico-width + @ico-margin + @ico-margin);
@item-height: (@ico-width + @ico-margin);
position: absolute;
right: (-1 * @item-width);
/* on same vertical level as first headline, because .page has 2em padding */
top: 2em;
width: @item-width;
div.tools {
position: fixed;
width: @item-width;
ul {
position: absolute;
right: 0;
text-align: right;
margin: 0;
padding: 0;
/* add transparent border to prevent jumping when proper border is added on hover */
border: 1px solid transparent;
z-index: 10;
li {
padding: 0;
margin: 0;
list-style: none;
font-size: 0.875em;
a {
display: block;
/* add transparent border to prevent jumping when proper border is added on focus */
border: 1px solid transparent;
white-space: nowrap;
line-height: @item-height;
vertical-align: middle;
height: @item-height;
span {
display: none; // hide label until hover
margin: 0 @ico-margin;
}
svg {
width: @ico-width;
height: @ico-width;
margin: 0 @ico-margin;
display: inline-block;
vertical-align: middle;
fill: @ini_border;
}
}
// on interaction show the full item
a:active,
a:focus,
a:hover {
background-color: @ini_background_alt;
span {
display: inline-block;
}
svg {
fill: @ini_link;
}
}
}
}
}
[dir=rtl] & {
right: auto;
left: (-1 * @item-width);
div.tools {
ul {
right: auto;
left: 0;
text-align: left;
}
}
}
}
// on hover or focus show all items
#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
div.tools ul {
background-color: @ini_background;
border-color: @ini_border;
border-radius: 2px;
box-shadow: 2px 2px 2px @ini_text_alt;
li a span {
display: inline-block;
}
}
}
Mini Shell