blob: 5473594d8c2a239056a7f18333d0bb759e89299a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
/**
* This file provides the styles for the page tools
* (fly out navigation beside the page to edit, etc).
*
* @author Anika Henke <anika@selfthinker.org>
* @author Andreas Gohr <andi@splitbrain.org>
*/
#dokuwiki__site > .site {
/* give space to the right so the tools won't disappear on smaller screens */
/* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
padding-right: 40px;
/* give the same space to the left to balance it out */
padding-left: 40px;
}
.dokuwiki div.page {
height: 190px;
min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
height: auto;
}
#dokuwiki__pagetools {
@ico-width: 28px;
@ico-margin: 8px;
@item-width: (@ico-width + @ico-margin + @ico-margin);
@item-height: (@ico-width + @ico-margin);
position: absolute;
right: (-1 * @item-width);
/* on same vertical level as first headline, because .page has 2em padding */
top: 2em;
width: @item-width;
div.tools {
position: fixed;
width: @item-width;
ul {
position: absolute;
right: 0;
text-align: right;
margin: 0;
padding: 0;
/* add transparent border to prevent jumping when proper border is added on hover */
border: 1px solid transparent;
z-index: 10;
li {
padding: 0;
margin: 0;
list-style: none;
font-size: 0.875em;
a {
display: block;
/* add transparent border to prevent jumping when proper border is added on focus */
border: 1px solid transparent;
white-space: nowrap;
line-height: @item-height;
vertical-align: middle;
height: @item-height;
span {
display: none; // hide label until hover
margin: 0 @ico-margin;
}
svg {
width: @ico-width;
height: @ico-width;
margin: 0 @ico-margin;
display: inline-block;
vertical-align: middle;
fill: @ini_border;
}
}
// on interaction show the full item
a:active,
a:focus,
a:hover {
background-color: @ini_background_alt;
span {
display: inline-block;
}
svg {
fill: @ini_link;
}
}
}
}
}
[dir=rtl] & {
right: auto;
left: (-1 * @item-width);
div.tools {
ul {
right: auto;
left: 0;
text-align: left;
}
}
}
}
// on hover or focus show all items
#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
div.tools ul {
background-color: @ini_background;
border-color: @ini_border;
border-radius: 2px;
box-shadow: 2px 2px 2px @ini_text_alt;
li a span {
display: inline-block;
}
}
}
|
