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