123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- /**
- * 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;
- }
- }
- }
|