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