nav-tools menu icons
This commit is contained in:
Jana Deutschländer
parent
414d889f3f
commit
da7e18f852
6 changed files with 165 additions and 26 deletions
|
|
@ -10,17 +10,92 @@
|
|||
li{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
border: 1px solid @color-border;
|
||||
margin: 0 .1rem;
|
||||
padding: 0;
|
||||
font-size: .8rem;
|
||||
*{
|
||||
font-size: .8rem;
|
||||
}
|
||||
a{
|
||||
.fontello();
|
||||
&.register{
|
||||
color: @color-nav;
|
||||
box-sizing: content-box;
|
||||
padding: .3em .25em .15em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active, &:focus{
|
||||
background-color: @color-nav-hover-bg;
|
||||
border-width: 3px;
|
||||
border-style: double;
|
||||
margin: 0;
|
||||
|
||||
//-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
//box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
|
||||
color: @color-nav-hover;
|
||||
}
|
||||
|
||||
.fontello();
|
||||
.hide-text-show-before();
|
||||
&:before{
|
||||
font-size: 1.12em;
|
||||
cursor: pointer;
|
||||
content: "?";
|
||||
}
|
||||
|
||||
/* icon register new user */
|
||||
&.register{
|
||||
.icon-user();
|
||||
}
|
||||
/* icon log-out */
|
||||
&.logout{
|
||||
.icon-logout();
|
||||
}
|
||||
/* icon log-in */
|
||||
&.login{
|
||||
.icon-login();
|
||||
}
|
||||
/* icon admin */
|
||||
&.admin{
|
||||
.icon-cog();
|
||||
}
|
||||
|
||||
/* add more icons if needed */
|
||||
}
|
||||
|
||||
&.user{
|
||||
border: 1px solid @color-border;
|
||||
border-radius: @border-radius;
|
||||
color: @color-nav;
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
min-height: 20px;
|
||||
min-width: 24px;
|
||||
box-sizing: content-box;
|
||||
padding: .3em .25em .15em;
|
||||
margin-top: 2px;
|
||||
bdi{
|
||||
color: @color-nav;
|
||||
display: inline-block;
|
||||
padding-top: 1px;
|
||||
}
|
||||
>bdi:first-of-type{
|
||||
.fontello();
|
||||
.icon-user();
|
||||
&:before{
|
||||
border: 4px solid @color-nav;
|
||||
margin-top: -1px;
|
||||
border-radius: 50%;
|
||||
background: @color-nav;
|
||||
color: #fff;
|
||||
font-size: .5rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,30 +62,35 @@
|
|||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* col width */
|
||||
@c12: 100%;
|
||||
@c11: 91.66666667%;
|
||||
@c10: 83.33333333%;
|
||||
@c9: 75%;
|
||||
@c8: 66.66666667%;
|
||||
@c7: 58.33333333%;
|
||||
@c6: 50%;
|
||||
@c5: 41.66666667%;
|
||||
@c4: 33.33333333%;
|
||||
@c3: 25%;
|
||||
@c2: 16.66666667%;
|
||||
@c1: 8.33333333%;
|
||||
@c12: 100%;
|
||||
@c11: 91.66666667%;
|
||||
@c10: 83.33333333%;
|
||||
@c9: 75%;
|
||||
@c8: 66.66666667%;
|
||||
@c7: 58.33333333%;
|
||||
@c6: 50%;
|
||||
@c5: 41.66666667%;
|
||||
@c4: 33.33333333%;
|
||||
@c3: 25%;
|
||||
@c2: 16.66666667%;
|
||||
@c1: 8.33333333%;
|
||||
|
||||
@grid-columns: 12;
|
||||
@grid-columns: 12;
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* margin / padding */
|
||||
@margin-big: 2.5rem;
|
||||
@margin-big: 2.5rem;
|
||||
|
||||
@border-radius: __default_border_radius__;
|
||||
|
||||
|
||||
|
||||
@color-border: __border__;
|
||||
@color-border: __border__;
|
||||
@color-nav: __nav_menu_color__;
|
||||
@color-nav-hover: __nav_menu_hover_color__;
|
||||
@color-nav-hover-bg:__nav_menu_hover_bg__;
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* all media */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
html, body{
|
||||
|
|
|
|||
|
|
@ -65,6 +65,44 @@
|
|||
|
||||
}
|
||||
|
||||
.fontello-double(){
|
||||
|
||||
&::before, &::after{
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: .2em;
|
||||
text-align: center;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: .2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
@ -103,6 +141,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
.hide-text-show-before(){
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-indent: -9999px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
min-height: 20px;
|
||||
min-width: 24px;
|
||||
&::before{
|
||||
text-indent: 0;
|
||||
float: left;
|
||||
}
|
||||
&::after{
|
||||
text-indent: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
/* Screenreader / Hide */
|
||||
/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
|
||||
|
|
|
|||
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
12
style.ini
12
style.ini
|
|
@ -114,12 +114,12 @@ __highlight__ = "#efefef" ; @ini_highlight
|
|||
; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
|
||||
|
||||
; these are used for links
|
||||
__existing__ = "#286da8" ; @ini_existing
|
||||
__missing__ = "#CD5360" ; @ini_missing
|
||||
__existing__ = "#286da8" ; @ini_existing
|
||||
__missing__ = "#CD5360" ; @ini_missing
|
||||
|
||||
; widths
|
||||
__site_width__ = "64em" ; @ini_site_width
|
||||
__sidebar_width__ = "16em" ; @ini_sidebar_width
|
||||
__site_width__ = "64em" ; @ini_site_width
|
||||
__sidebar_width__ = "16em" ; @ini_sidebar_width
|
||||
|
||||
__font_family_screen__ = "roboto, 'helvetica', arial, sans-serif"
|
||||
__font_family_menu__ = "'roboto condensed', 'helvetica neue', arial, sans-serif"
|
||||
|
|
@ -128,6 +128,10 @@ __font_family_print__ = "'times new roman', serif"
|
|||
__nav_direct_background__ = "#FFF"
|
||||
__nav_direct_color__ = "#286da8"
|
||||
__box_shadow__ = "0 0 .5em rgba(40,109,168,.5)"
|
||||
__nav_menu_color__ = "#696969"
|
||||
__nav_menu_hover_color__ = "#286da8"
|
||||
__nav_menu_hover_bg__ = "#FFFFFF"
|
||||
|
||||
|
||||
__default_border_radius__ = "5px"
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,14 @@
|
|||
<nav id="dokuwiki__usertools" class="nav-usertools">
|
||||
<h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['user_tools']; ?></h6>
|
||||
<ul>
|
||||
<li class="log"><?php tpl_actionlink('login'); ?></li>
|
||||
<?php
|
||||
if (!empty($_SERVER['REMOTE_USER'])) {
|
||||
echo '<li class="user"><span class="sr-only">'.$lang['loggedinas'].' </span>'.userlink().'</li>';
|
||||
}?>
|
||||
<li class="log"><?php tpl_actionlink('login'); ?></li>
|
||||
|
||||
<?php tpl_toolsevent('usertools', array(
|
||||
'admin' => tpl_action('admin', 1, 'li', 1),
|
||||
'userpage' => _tpl_action('userpage', 1, 'li', 1),
|
||||
'profile' => tpl_action('profile', 1, 'li', 1),
|
||||
'register' => tpl_action('register', 1, 'li', 1),
|
||||
)); ?>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue