1
2@ico-width: 28px;
3@ico-margin: 8px;
4@item-width: (@ico-width + @ico-margin + @ico-margin);
5@item-height: (@ico-width + @ico-margin);
6@canvas-control-height: 45vh;
7@primary: rgba(0, 0, 0, 0.65);
8@primary-icon: rgba(0, 0, 0, 0.35);
9@secondary: #ccc;
10
11.railbar {
12
13    text-align: right;
14    margin: 0;
15    padding: 0;
16    /* add transparent border to prevent jumping when proper border is added on hover */
17    border: 1px solid transparent;
18
19    li {
20        padding: 0;
21        margin: 0;
22        list-style: none;
23
24        a {
25
26            display: block;
27            /* add transparent border to prevent jumping when proper border is added on focus */
28            border: 1px solid transparent;
29            white-space: nowrap;
30            line-height: @item-height;
31            height: @item-height;
32            color: @primary;
33            font-weight: 400;
34            font-size: 1rem;
35            text-decoration: none;
36
37            span {
38                margin: 0 @ico-margin;
39            }
40
41            svg {
42                width: @ico-width;
43                height: @ico-width;
44                margin: 0 @ico-margin;
45                display: inline-block;
46                vertical-align: middle;
47                fill: @primary-icon;
48            }
49        }
50
51        // on interaction show the full item
52        a:active,
53        a:focus,
54        a:hover {
55            background-color: @secondary;
56            text-decoration: underline;
57            span {
58                display: inline-block;
59            }
60        }
61
62    }
63}
64
65
66#railbar-fixed {
67
68    position: absolute;
69    right: (-1 * @item-width);
70    /* on same vertical level as first headline, because .page has 2em padding */
71    top: 4rem;
72    width: @item-width;
73
74    div.tools {
75        position: fixed;
76        width: @item-width;
77
78        ul {
79            position: absolute;
80            right: 0;
81            li {
82                a {
83                    span {
84                        display: none; // hide label until hover
85                    }
86                }
87            }
88        }
89    }
90
91    [dir=rtl] & {
92        right: auto;
93        left: (-1 * @item-width);
94
95        div.tools {
96            ul {
97                right: auto;
98                left: 0;
99                text-align: left;
100            }
101        }
102    }
103}
104
105// on hover show all items
106#railbar-fixed:hover {
107    div.tools ul {
108        background-color: @ini_background;
109        border-color: @ini_border;
110        border-radius: 2px;
111        box-shadow: 2px 2px 2px @ini_text_alt;
112
113        li a span {
114            display: inline-block;
115        }
116    }
117}
118
119#railbar-offcanvas-wrapper {
120    .btn {
121        background-color: #e2f1ff;
122        border-color: #e2f1ff;
123        color:@ini_link;
124    }
125}
126
127#railbar-offcanvas-open {
128    position: fixed;
129    right: 0;
130    top: @canvas-control-height;
131}
132
133#railbar-offcanvas-open:before {
134    content: "<";
135}
136
137#railbar-offcanvas-close {
138    position: relative;
139    left: -37px;
140    width: fit-content;
141    top: @canvas-control-height;
142    opacity: 1;
143}
144
145#railbar-offcanvas-close:before {
146    content: ">";
147}
148
149#railbar-offcanvas {
150    width: fit-content
151}
152