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