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