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 //transition: @transition opacity; 133 } 134 135 &:hover, 136 &:focus, 137 &:active { 138 background-color: @ini_nav_menu_hover_color; 139 border-color: @ini_nav_menu_hover_color; 140 color: @ini_nav_menu_hover_bg; 141 142 &::before { 143 opacity: 1; 144 } 145 146 bdi, 147 bdi:first-of-type { 148 color: @ini_nav_menu_hover_bg; 149 } 150 } 151 } 152 153 bdi { 154 display: inline-block; 155 color: inherit; 156 //transition: @transition color; 157 } 158 159 bdi:first-of-type { 160 .fontello(); 161 .icon-user-circle(); 162 163 position: relative; 164 margin: 0 0 0 .25rem; 165 padding: 0 .1rem 0 1.3rem; 166 167 &::before { 168 position: absolute; 169 left: -2px; 170 font-size: 1.4rem; 171 margin: 0; 172 //transition: @transition color; 173 174 @media @screen_min-xxlg { 175 top: -.25rem; 176 } 177 178 @media @screen_max-xxlg { 179 top: -.2rem; 180 } 181 182 @media @screen_max-xxs { 183 top: -.25rem; 184 185 } 186 } 187 } 188 } // user 189 190 &.user-task { 191 position: relative; 192 193 a { 194 position: relative; 195 overflow: visible; 196 white-space: normal; 197 text-indent: 0; 198 199 &::before { 200 content: ''; 201 position: absolute; 202 } 203 } 204 205 .prefix { 206 .btn-prefix(); 207 .icon-clipboard(); 208 209 display: block; 210 font-size: 1.2rem; 211 text-align: center; 212 margin-bottom: -1px; 213 } 214 } // user-task 215 216 &.noopentasks { 217 strong { 218 background-color: @ini_background; 219 border-color: @noopentasks-border; 220 color: @ini_text_webframe; 221 } 222 223 .num { 224 background-color: @noopentasks-border; // fix 225 color: @noopentasks-color; // fix 226 margin-top: 1px; 227 } 228 } 229 } // li 230 231 232/* + + + icons + + + */ 233 a { 234 .fontello(); 235 .hide-text-show-before(); 236 .btn-hover(); 237 238 cursor: pointer; 239 position: relative; 240 line-height: 1; 241 text-decoration: none; 242 243 @media @screen_only-lg { 244 min-width: 2rem; 245 } 246 247 &::before { 248 .center-middle(); 249 250 content: "?"; 251 cursor: pointer; 252 display: block; 253 width: 100%; 254 box-sizing: border-box; 255 font-size: @font-size-default + (@font-scale-factor * 4); 256 line-height: 1; 257 } 258 259 /* icon register new user */ 260 &.register { 261 .icon-user(); 262 } 263 264 /* icon log-out */ 265 &.logout { 266 .icon-logout(); 267 } 268 269 /* icon log-in */ 270 &.login { 271 .icon-login(); 272 } 273 274 /* icon admin */ 275 &.admin { 276 .icon-cog(); 277 278 &::before { 279 vertical-align: top; 280 } 281 } 282 } // a 283 } // ul 284} // nav-usertools 285