xref: /template/sprintdoc/css/area_nav-pagetools.less (revision 8221fa277b5ca4f2a9077bac1acdfefdd8ece490) 
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#dokuwiki__aside {
25    @media @screen_max-md {
26        display: none !important;
27    }
28}
29
30nav#dokuwiki__pagetools {
31    @toolbox-size: 30px;
32
33    top: 3.05rem;
34    z-index: 100;
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                span {
86                    .sr-only();
87
88                    padding-right: .5rem;
89                    padding-left: .3rem;
90                }
91
92                svg {
93                    display: inline-block;
94                    width: @page-tools_svg-size;
95                    height: @page-tools_svg-size;
96                    vertical-align: middle;
97                    border: solid 1px transparent;
98                    margin: @page-tools_svg-space;
99
100                    @media @screen_min-md {
101                        fill: @ini_nav_menu_color;
102                    }
103
104                    @media @screen_max-md {
105                        fill: @ini_existing;
106                    }
107                }
108
109                &.top {
110                    margin-top: 1em;
111                }
112            }
113        }
114    }
115
116    &:hover {
117        ul {
118            box-shadow: @box-shadow; // @box-shadow-offset;
119            background-color: @ini_background;
120            border-color: @wikiicons-border;
121
122            li {
123                color: @ini_existing;
124
125                a {
126                    box-shadow: none;
127                    background-image: none;
128                    border-color: transparent;
129                    color: inherit;
130                    padding: 2px 0 2px 2px;
131
132                    svg {
133                        border: solid 1px transparent;
134                        border-radius: @ini_default_border_radius;
135                        fill: @ini_existing;
136                        transition: @transition background-color, @transition border-color, @transition fill;
137                    }
138
139                    &:hover,
140                    &:focus,
141                    &:active {
142                        svg {
143                            background-color: @ini_existing;
144                            border-color: @ini_existing;
145                            fill: @ini_background;
146                        }
147                    }
148
149                    span {
150                        position: static;
151                        width: auto;
152                        height: auto;
153                        margin: auto;
154                    }
155                }
156            }
157        }
158    }
159}
160