8221fa277bIn the dokuwiki standard template __background__ is the variable defining the background-color of the content. It is one of the guaranteed placeholder that every template must provide. Hence we should use it with the way it is used in the default template, so other plugins can rely on it and look consistently. Also some other base-dokuwiki styles still use it accordingly, for example the footnotes. SPR-954
320 lines
9 KiB
Text
Executable file
320 lines
9 KiB
Text
Executable file
/**
|
|
* This file provides the design styles for the direct / menu jump links.
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
|
|
#dokuwiki__usertools.nav-usertools {
|
|
@media @screen_min-md {
|
|
right: 1.25rem;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
position: absolute;
|
|
top: 0;
|
|
left: (@toggle-size + 1.25); // margin-left content
|
|
right: @headericons-margin-xxs;
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.has-bar {
|
|
@media @screen_min-md {
|
|
margin-top: @height-context-bar;
|
|
padding-top: .5em;
|
|
}
|
|
}
|
|
|
|
|
|
/* + + + + + icon list + + + + + */
|
|
ul {
|
|
float: right;
|
|
padding: 0;
|
|
margin: (@very-small-spacing * 2) -.25rem 0 0;
|
|
|
|
li {
|
|
.btn-usertools-wrapper(); // uniform li
|
|
.btn-usertools-num();
|
|
|
|
float: right;
|
|
min-height: 28px;
|
|
|
|
@media @screen_max-xs {
|
|
display: block;
|
|
float: none;
|
|
margin-bottom: @headericons-margin-xxs;
|
|
}
|
|
|
|
> strong,
|
|
> a {
|
|
display: block;
|
|
width: auto;
|
|
min-height: @toggle-size;
|
|
overflow: hidden;
|
|
border: 1px solid @wikiicons-border;
|
|
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
|
text-align: center;
|
|
margin: 0;
|
|
|
|
@media @screen_md-xlg {
|
|
padding-top: .14rem;
|
|
}
|
|
|
|
@media @screen_max-xxlg {
|
|
min-height: 28px;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
min-height: @toggle-size;
|
|
}
|
|
}
|
|
|
|
&.user {
|
|
@space-min-xxlg: .35rem;
|
|
@space-max-xxlg: .4rem;
|
|
@space-max-xlg: .5rem;
|
|
@space-max-md: .35rem;
|
|
|
|
position: relative;
|
|
display: table-cell;
|
|
background-color: @ini_background_site;
|
|
border: solid 1px @wikiicons-border; // @ini_border_light;
|
|
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
|
color: @ini_text_webframe;
|
|
padding-right: .3rem;
|
|
|
|
@media @screen_min-xxlg {
|
|
padding-top: @space-min-xxlg;
|
|
}
|
|
|
|
@media @screen_max-xxlg {
|
|
padding-top: @space-max-xxlg;
|
|
}
|
|
|
|
@media @screen_max-xlg {
|
|
padding-top: @space-max-xlg;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
min-height: @toggle-size;
|
|
padding-top: @space-max-md;
|
|
}
|
|
|
|
@media @screen_max-xs {
|
|
position: absolute;
|
|
top: @headericons-margin-xxs;
|
|
right: (@toggle-size + @headericons-margin-xxs);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin: -1px 0 0;
|
|
}
|
|
|
|
@media @screen_max-xxs {
|
|
left: -10px;
|
|
width: auto;
|
|
}
|
|
|
|
> a {
|
|
.display-flex();
|
|
.align-items();
|
|
|
|
position: relative;
|
|
min-height: 26px;
|
|
height: 1rem; // for IE11
|
|
overflow: visible;
|
|
background: @ini_nav_menu_hover_bg; // for removing bg-image
|
|
border: 0 none;
|
|
color: @ini_nav_menu_hover_color;
|
|
text-indent: 0;
|
|
font-size: inherit;
|
|
margin-right: -.3rem;
|
|
padding: 0 .2em 0 0;
|
|
|
|
@media @screen_only-xlg {
|
|
padding-bottom: .1em;
|
|
}
|
|
|
|
@media @screen_min-xxlg {
|
|
margin-top: -(@space-min-xxlg);
|
|
}
|
|
|
|
@media @screen_max-xxlg {
|
|
margin-top: -(@space-max-xxlg);
|
|
}
|
|
|
|
@media @screen_max-xlg {
|
|
margin-top: -(@space-max-xlg);
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
min-height: (@toggle-size - .1);
|
|
margin-top: -(@space-max-md);
|
|
}
|
|
|
|
@media @screen_max-xxs {
|
|
min-height: (@toggle-size - .15);
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
top: -1px;
|
|
bottom: -1px;
|
|
left: -1px;
|
|
right: -1px;
|
|
width: auto;
|
|
opacity: 0;
|
|
border: solid 1px @ini_nav_menu_hover_color;
|
|
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
|
|
color: inherit;
|
|
transform: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: @ini_nav_menu_hover_color;
|
|
border-color: @ini_nav_menu_hover_color;
|
|
color: @ini_nav_menu_hover_bg;
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
bdi,
|
|
bdi:first-of-type {
|
|
color: @ini_nav_menu_hover_bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
bdi {
|
|
display: inline-block;
|
|
color: inherit;
|
|
}
|
|
|
|
bdi:first-of-type {
|
|
.fontello();
|
|
.icon-user-circle();
|
|
|
|
position: relative;
|
|
margin: 0 0 0 .25rem;
|
|
padding: 0 .1rem 0 1.3rem;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
left: -2px;
|
|
font-size: 1.4rem;
|
|
margin: 0;
|
|
|
|
@media @screen_min-xxlg {
|
|
top: -.25rem;
|
|
}
|
|
|
|
@media @screen_max-xxlg {
|
|
top: -.2rem;
|
|
}
|
|
|
|
@media @screen_max-xs {
|
|
top: -.25rem;
|
|
|
|
}
|
|
}
|
|
}
|
|
} // user
|
|
|
|
&.user-task {
|
|
position: relative;
|
|
|
|
a {
|
|
position: relative;
|
|
overflow: visible;
|
|
white-space: normal;
|
|
text-indent: 0;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.prefix {
|
|
.btn-prefix();
|
|
.icon-clipboard();
|
|
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
text-align: center;
|
|
margin-bottom: -1px;
|
|
}
|
|
} // user-task
|
|
|
|
&.noopentasks {
|
|
strong {
|
|
background-color: @ini_background_site;
|
|
border-color: @noopentasks-border;
|
|
color: @ini_text_webframe;
|
|
}
|
|
|
|
.num {
|
|
background-color: @noopentasks-border; // fix
|
|
color: @noopentasks-color; // fix
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
} // li
|
|
|
|
|
|
/* + + + icons + + + */
|
|
a {
|
|
.fontello();
|
|
.hide-text-show-before();
|
|
.btn-hover();
|
|
|
|
cursor: pointer;
|
|
position: relative;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
|
|
@media @screen_md-xlg {
|
|
min-width: 2rem;
|
|
}
|
|
|
|
&::before {
|
|
.center-middle();
|
|
|
|
content: "?";
|
|
cursor: pointer;
|
|
display: block;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: @font-size-default + (@font-scale-factor * 4);
|
|
line-height: 1;
|
|
}
|
|
|
|
/* icon register new user */
|
|
&.register {
|
|
.icon-user();
|
|
}
|
|
|
|
/* icon log-out */
|
|
&.logout {
|
|
.icon-logout();
|
|
}
|
|
|
|
/* icon log-in */
|
|
&.login {
|
|
.icon-login();
|
|
}
|
|
|
|
/* icon admin */
|
|
&.admin {
|
|
.icon-cog();
|
|
|
|
&::before {
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
} // a
|
|
} // ul
|
|
} // nav-usertools
|