Err404

/**
* 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
*/

#dokuwikisite > .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;
}

#dokuwikipagetools {

  @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
#dokuwikipagetools:hover, #dokuwikipagetools: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;
}
}
}