1/**
2 * This file provides the design styles for the page specific tool bar.
3 */
4
5/*
6 FIXME
7.pagetools-item(edit, 1);
8.pagetools-item(create, 2);
9.pagetools-item(show, 4);
10.pagetools-item(source, 5);
11.pagetools-item(draft, 3);
12.pagetools-item(revs, 7, revisions);
13.pagetools-item(backlink, 8, backlink);
14.pagetools-item(top, 10);
15.pagetools-item(revert, 6, revert);
16.pagetools-item(subscribe, 9, subscribe);
17.pagetools-item(mediaManager, 11);
18.pagetools-item(back, 12);
19.pagetools-item(img_backto, 12);
20*/
21
22#dokuwiki__aside {
23    @media @screen_max-md {
24        display: none !important;
25    }
26}
27
28nav#dokuwiki__pagetools {
29    @toolbox-size: 30px;
30
31    @page-tools_svg-size: 25px;
32    @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
33    @item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space);
34    @item-height: (@page-tools_svg-size + @page-tools_svg-space);
35
36    top: 3.05rem;
37    position: absolute;
38
39    width: @item-width;
40
41    @media @screen_min-md {
42        right: -2.5rem;
43    }
44
45    @media @screen_max-md {
46        right: 8px;
47    }
48
49    @media @screen_max-xxs {
50        display: none;
51    }
52    div.tools {
53        position: fixed;
54        width: @item-width;
55    }
56
57    ul {
58        position: absolute;
59        right: 0;
60        text-align: right;
61        margin: 0;
62        padding: 0;
63        /* add transparent border to prevent jumping when proper border is added on hover */
64        border: 1px solid transparent;
65
66        li {
67            padding: 0;
68            margin: 0;
69            list-style: none;
70
71            a {
72                display: inline-table;
73                /* add transparent border to prevent jumping when proper border is added on focus */
74                border: 1px solid transparent;
75                white-space: nowrap;
76                vertical-align: middle;
77                height: @item-height;
78
79                position: relative;
80                line-height: 20px;
81                font-size: @font-size-default;
82                padding: 2px 0 2px 2px;
83
84                @media @screen_min-md {
85                    color: @ini_nav_menu_color;
86                }
87
88                @media @screen_max-md {
89                    color: @ini_existing;
90                }
91
92                &::before {
93                    display: none;
94                }
95
96                &:hover,
97                &:focus,
98                &:active {
99                    background-color: transparent;
100                }
101
102                &:focus {
103                    box-shadow: @box-shadow;
104                    background-image: none;
105                    background-color: @ini_background;
106                    color: @ini_existing;
107
108                    span {
109                        position: relative;
110                        display: inline;
111                        width: auto;
112                        height: auto;
113                    }
114
115                    svg {
116                        fill: @ini_existing;
117                    }
118                }
119
120                span {
121                    .sr-only();
122
123                    padding-right: .5rem;
124                    padding-left: .3rem;
125                }
126
127                svg {
128                    display: inline-block;
129                    width: @page-tools_svg-size;
130                    height: @page-tools_svg-size;
131                    vertical-align: middle;
132                    border: solid 1px transparent;
133                    margin: @page-tools_svg-space;
134
135                    @media @screen_min-md {
136                        fill: @ini_nav_menu_color;
137                    }
138
139                    @media @screen_max-md {
140                        fill: @ini_existing;
141                    }
142                }
143
144                &.top {
145                    margin-top: 1em;
146                }
147            }
148        }
149    }
150
151    &:hover {
152        ul {
153            box-shadow: @box-shadow; // @box-shadow-offset;
154            background-color: @ini_background;
155            border-color: @wikiicons-border;
156
157            li {
158                color: @ini_existing;
159
160                a {
161                    box-shadow: none;
162                    background-image: none;
163                    border-color: transparent;
164                    color: inherit;
165
166                    svg {
167                        border: solid 1px transparent;
168                        border-radius: @ini_default_border_radius;
169                        fill: @ini_existing;
170                        transition: @transition background-color, @transition border-color, @transition fill;
171                    }
172
173                    &:hover,
174                    &:focus,
175                    &:active {
176                        svg {
177                            background-color: @ini_existing;
178                            border-color: @ini_existing;
179                            fill: @ini_background;
180                        }
181                    }
182
183                    span {
184                        position: static;
185                        width: auto;
186                        height: auto;
187                        margin: auto;
188                    }
189                }
190            }
191        }
192    }
193}
194