xref: /template/sprintdoc/css/area_nav-pagetools.less (revision 7db19d88c1971a46e6e0b7a1572ce5f7c8a9febb) 
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                color: @color-nav;
62                font-size: @font-size-default;
63                padding: 2px @toolbox-size 2px 2px;
64
65                * {
66                    color: inherit;
67                }
68
69                &::before {
70                    display: none;
71                }
72
73                &:hover,
74                &:focus,
75                &:active {
76                    opacity: 1;
77                    color: @color-nav-hover;
78                    background-color: #FFF;
79                }
80
81                span {
82                    .sr-only();
83
84                    padding-right: .5rem;
85                    padding-left: .3rem;
86                }
87
88                svg {
89                    display: inline-block;
90                    width: @page-tools_svg-size;
91                    height: @page-tools_svg-size;
92                    vertical-align: middle;
93                    fill: @color-nav;
94                    margin: @page-tools_svg-space;
95                }
96
97                &.top {
98                    margin-top: 1em;
99                }
100            }
101
102            &.plugin_move_page {
103                a {
104                    opacity: .6;
105                    color: @color-nav;
106
107                    * {
108                        color: inherit;
109                    }
110
111                    &:hover,
112                    &:focus,
113                    &:active {
114                        color: @color-nav-hover;
115                        background-color: #fff;
116                        opacity: 1;
117                    }
118                }
119            }
120        }
121    }
122
123    &:hover {
124        ul {
125            background-color: #fff;
126            box-shadow: @box-shadow-offset;
127
128            li {
129                a {
130                    box-shadow: none;
131                    background-image: none;
132                    opacity: .8;
133                    border-color: transparent;
134                    padding: 2px 0 2px 2px;
135
136                    &:hover,
137                    &:focus,
138                    &:active {
139                        opacity: 1;
140
141                        svg {
142                            fill: @color-nav-hover;
143                        }
144                    }
145
146                    span {
147                        position: static;
148                        width: auto;
149                        height: auto;
150                        margin: auto;
151                    }
152                }
153            }
154        }
155    }
156}
157