pagetools.less 3.4 KB

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