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