1/** 2 * This file provides the design styles for the direct / menu jump links. 3 * 4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de> 5 */ 6 7 8.nav-usertools { 9 &.has-bar { 10 margin-top: @height-context-bar; 11 padding-top: .5em; 12 } 13 14 15/* + + + + + icon list + + + + + */ 16 ul { 17 float: right; 18 padding: 0; 19 margin: (@very-small-spacing * 2) -.25rem 0 0; 20 21 li { 22 .btn-usertools-wrapper(); // uniform li 23 .btn-usertools-num(); 24 25 float: right; 26 min-height: 28px; 27 28 > strong, 29 > a { 30 display: block; 31 width: auto; 32 min-height: @toggle-size; 33 overflow: hidden; 34 border: 1px solid @wikiicons-border; 35 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 36 text-align: center; 37 margin: 0; 38 39 @media @screen_only-lg { 40 padding-top: .14rem; 41 } 42 43 @media @screen_max-xxlg { 44 min-height: 28px; 45 } 46 47 @media @screen_max-md { 48 min-height: @toggle-size; 49 } 50 } 51 52 &.user { 53 @space-min-xxlg: .35rem; 54 @space-max-xxlg: .4rem; 55 @space-max-xlg: .5rem; 56 @space-max-md: .35rem; 57 58 position: relative; 59 display: table-cell; 60 background-color: @ini_background; 61 border: solid 1px @noopentasks-border;//@ini_border_light; 62 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 63 color: @ini_text_webframe; 64 padding-right: .3rem; 65 66 @media @screen_min-xxlg { 67 padding-top: @space-min-xxlg; 68 } 69 70 @media @screen_max-xxlg { 71 padding-top: @space-max-xxlg; 72 } 73 74 @media @screen_max-xlg { 75 padding-top: @space-max-xlg; 76 } 77 78 @media @screen_max-md { 79 min-height: @toggle-size; 80 padding-top: @space-max-md; 81 } 82 83 > a { 84 .display-flex(); 85 .align-items(); 86 87 position: relative; 88 min-height: 26px; 89 height: 1rem; // for IE11 90 overflow: visible; 91 background: @ini_nav_menu_hover_bg; // for removing bg-image 92 border: 0 none; 93 color: @ini_nav_menu_hover_color; 94 text-indent: 0; 95 font-size: inherit; 96 margin-right: -.3rem; 97 padding: 0 .2em 0 0; 98 99 @media @screen_only-xlg { 100 padding-bottom: .1em; 101 } 102 103 @media @screen_min-xxlg { 104 margin-top: -(@space-min-xxlg); 105 } 106 107 @media @screen_max-xxlg { 108 margin-top: -(@space-max-xxlg); 109 } 110 111 @media @screen_max-xlg { 112 margin-top: -(@space-max-xlg); 113 } 114 115 @media @screen_max-md { 116 min-height: (@toggle-size - .1); 117 margin-top: -(@space-max-md); 118 } 119 120 &::before { 121 content: ''; 122 top: -1px; 123 bottom: -1px; 124 left: -1px; 125 right: -1px; 126 width: auto; 127 opacity: 0; 128 border: solid 1px @ini_nav_menu_hover_color; 129 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius 130 color: inherit; 131 transform: none; 132 } 133 134 &:hover, 135 &:focus, 136 &:active { 137 background-color: @ini_nav_menu_hover_color; 138 border-color: @ini_nav_menu_hover_color; 139 color: @ini_nav_menu_hover_bg; 140 141 &::before { 142 opacity: 1; 143 } 144 145 bdi, 146 bdi:first-of-type { 147 color: @ini_nav_menu_hover_bg; 148 } 149 } 150 } 151 152 bdi { 153 display: inline-block; 154 color: inherit; 155 } 156 157 bdi:first-of-type { 158 .fontello(); 159 .icon-user-circle(); 160 161 position: relative; 162 margin: 0 0 0 .25rem; 163 padding: 0 .1rem 0 1.3rem; 164 165 &::before { 166 position: absolute; 167 left: -2px; 168 font-size: 1.4rem; 169 margin: 0; 170 171 @media @screen_min-xxlg { 172 top: -.25rem; 173 } 174 175 @media @screen_max-xxlg { 176 top: -.2rem; 177 } 178 179 @media @screen_max-xxs { 180 top: -.25rem; 181 182 } 183 } 184 } 185 } // user 186 187 &.user-task { 188 position: relative; 189 190 a { 191 position: relative; 192 overflow: visible; 193 white-space: normal; 194 text-indent: 0; 195 196 &::before { 197 content: ''; 198 position: absolute; 199 } 200 } 201 202 .prefix { 203 .btn-prefix(); 204 .icon-clipboard(); 205 206 display: block; 207 font-size: 1.2rem; 208 text-align: center; 209 margin-bottom: -1px; 210 } 211 } // user-task 212 213 &.noopentasks { 214 strong { 215 background-color: @ini_background; 216 border-color: @noopentasks-border; 217 color: @ini_text_webframe; 218 } 219 220 .num { 221 background-color: @noopentasks-border; // fix 222 color: @noopentasks-color; // fix 223 margin-top: 1px; 224 } 225 } 226 } // li 227 228 229/* + + + icons + + + */ 230 a { 231 .fontello(); 232 .hide-text-show-before(); 233 .btn-hover(); 234 235 cursor: pointer; 236 position: relative; 237 line-height: 1; 238 text-decoration: none; 239 240 @media @screen_only-lg { 241 min-width: 2rem; 242 } 243 244 &::before { 245 .center-middle(); 246 247 content: "?"; 248 cursor: pointer; 249 display: block; 250 width: 100%; 251 box-sizing: border-box; 252 font-size: @font-size-default + (@font-scale-factor * 4); 253 line-height: 1; 254 } 255 256 /* icon register new user */ 257 &.register { 258 .icon-user(); 259 } 260 261 /* icon log-out */ 262 &.logout { 263 .icon-logout(); 264 } 265 266 /* icon log-in */ 267 &.login { 268 .icon-login(); 269 } 270 271 /* icon admin */ 272 &.admin { 273 .icon-cog(); 274 275 &::before { 276 vertical-align: top; 277 } 278 } 279 } // a 280 } // ul 281} // nav-usertools 282