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