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