xref: /template/sprintdoc/css/area_nav-pagetools.less (revision 146c8265e6b7dfd89f7b04e9477843a1811ac22a) 
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                //opacity: .6;
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                    //opacity: 1;
84                    //color: @ini_nav_menu_hover_color;
85                    background-color: transparent;
86                }
87
88                span {
89                    .sr-only();
90
91                    padding-right: .5rem;
92                    padding-left: .3rem;
93                }
94
95                svg {
96                    display: inline-block;
97                    width: @page-tools_svg-size;
98                    height: @page-tools_svg-size;
99                    vertical-align: middle;
100                    margin: @page-tools_svg-space;
101
102                    @media @screen_min-md {
103                        fill: @ini_nav_menu_color;
104                    }
105
106                    @media @screen_max-md {
107                        fill: @ini_existing;
108                    }
109                }
110
111                &.top {
112                    margin-top: 1em;
113                }
114            }
115
116            &.plugin_move_page {
117                a {
118                    .btn-hover();
119
120                    //opacity: .6;
121                    color: @ini_nav_menu_color;
122
123                    * {
124                        color: inherit;
125                    }
126                }
127            }
128        }
129    }
130
131    &:hover {
132        ul {
133            box-shadow: @box-shadow;//@box-shadow-offset;
134            background-color: @ini_background_content;
135            border-color: @wikiicons-border;
136
137            li {
138                color: @ini_existing;
139
140                a {
141                    box-shadow: none;
142                    background-image: none;
143                    //opacity: .8;
144                    border-color: transparent;
145                    color: inherit;
146                    padding: 2px 0 2px 2px;
147
148                    svg {
149                        border-radius: @ini_default_border_radius;
150                        fill: @ini_existing;
151                    }
152
153                    &:hover,
154                    &:focus,
155                    &:active {
156                        //opacity: 1;
157
158                        svg {
159                            background-color: @ini_existing;
160                            border: solid 2px @ini_existing;
161                            fill: @ini_background_content;
162                        }
163                    }
164
165                    span {
166                        position: static;
167                        width: auto;
168                        height: auto;
169                        margin: auto;
170                    }
171                }
172            }
173        }
174    }
175}
176