xref: /template/sprintdoc/css/area_nav-pagetools.less (revision b3aa151af476d317b6ae1192643feec22bad29c1) 
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    top: 3.05rem;
35    z-index: 100;
36
37    @media @screen_min-md {
38        right: -2.5rem;
39    }
40
41    @media @screen_max-md {
42        right: 8px;
43    }
44
45    ul {
46        li {
47            @page-tools_svg-size: 25px;
48            @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
49
50            * {
51                font-size: @font-size-default;
52            }
53
54            a {
55                .fontello-double();
56
57                position: relative;
58                height: auto;
59                min-height: @toolbox-size; // for nav:hover
60                width: @toolbox-size; // for nav:hover
61                font-size: @font-size-default;
62                padding: 2px @toolbox-size 2px 2px;
63
64                @media @screen_min-md {
65                    color: @ini_nav_menu_color;
66                }
67
68                @media @screen_max-md {
69                    color: @ini_existing;
70                }
71
72                * {
73                    color: inherit;
74                }
75
76                &::before {
77                    display: none;
78                }
79
80                &:hover,
81                &:focus,
82                &:active {
83                    background-color: transparent;
84                }
85
86                &:focus {
87                    box-shadow: @box-shadow;
88                    background-image: none;
89                    background-color: @ini_background;
90                    color: @ini_existing;
91                    padding-top: 2px;
92                    padding-bottom: 2px;
93                    padding-right: .1rem;
94
95                    span {
96                        position: relative;
97                        display: inline;
98                        width: auto;
99                        height: auto;
100                    }
101
102                    svg {
103                        fill: @ini_existing;
104                    }
105                }
106
107                span {
108                    .sr-only();
109
110                    padding-right: .5rem;
111                    padding-left: .3rem;
112                }
113
114                svg {
115                    display: inline-block;
116                    width: @page-tools_svg-size;
117                    height: @page-tools_svg-size;
118                    vertical-align: middle;
119                    border: solid 1px transparent;
120                    margin: @page-tools_svg-space;
121
122                    @media @screen_min-md {
123                        fill: @ini_nav_menu_color;
124                    }
125
126                    @media @screen_max-md {
127                        fill: @ini_existing;
128                    }
129                }
130
131                &.top {
132                    margin-top: 1em;
133                }
134            }
135        }
136    }
137
138    &:hover {
139        ul {
140            box-shadow: @box-shadow; // @box-shadow-offset;
141            background-color: @ini_background;
142            border-color: @wikiicons-border;
143
144            li {
145                color: @ini_existing;
146
147                a {
148                    box-shadow: none;
149                    background-image: none;
150                    border-color: transparent;
151                    color: inherit;
152                    padding: 2px 0 2px 2px;
153
154                    svg {
155                        border: solid 1px transparent;
156                        border-radius: @ini_default_border_radius;
157                        fill: @ini_existing;
158                        transition: @transition background-color, @transition border-color, @transition fill;
159                    }
160
161                    &:hover,
162                    &:focus,
163                    &:active {
164                        svg {
165                            background-color: @ini_existing;
166                            border-color: @ini_existing;
167                            fill: @ini_background;
168                        }
169                    }
170
171                    span {
172                        position: static;
173                        width: auto;
174                        height: auto;
175                        margin: auto;
176                    }
177                }
178            }
179        }
180    }
181}
182