be2951ad9aDokuWikis Pagetools CSS changes significantly between Frusterick Manners and Greebo, Since we already have pagetools like in Greebo in this template by default, it makes sense to use our own styles all the way to reduce duplication and to ensure a consistent look. This made some more adjustments/simplifications necessary/possible.
196 lines
5.1 KiB
Text
Executable file
196 lines
5.1 KiB
Text
Executable file
/**
|
|
* This file provides the design styles for the page specific tool bar.
|
|
*
|
|
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
|
|
*/
|
|
|
|
/*
|
|
FIXME
|
|
.pagetools-item(edit, 1);
|
|
.pagetools-item(create, 2);
|
|
.pagetools-item(show, 4);
|
|
.pagetools-item(source, 5);
|
|
.pagetools-item(draft, 3);
|
|
.pagetools-item(revs, 7, revisions);
|
|
.pagetools-item(backlink, 8, backlink);
|
|
.pagetools-item(top, 10);
|
|
.pagetools-item(revert, 6, revert);
|
|
.pagetools-item(subscribe, 9, subscribe);
|
|
.pagetools-item(mediaManager, 11);
|
|
.pagetools-item(back, 12);
|
|
.pagetools-item(img_backto, 12);
|
|
*/
|
|
|
|
|
|
#dokuwiki__aside {
|
|
@media @screen_max-md {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
nav#dokuwiki__pagetools {
|
|
@toolbox-size: 30px;
|
|
|
|
@page-tools_svg-size: 25px;
|
|
@page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
|
|
@item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space);
|
|
@item-height: (@page-tools_svg-size + @page-tools_svg-space);
|
|
|
|
top: 3.05rem;
|
|
position: absolute;
|
|
|
|
width: @item-width;
|
|
|
|
@media @screen_min-md {
|
|
right: -2.5rem;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
right: 8px;
|
|
}
|
|
|
|
@media @screen_max-xxs {
|
|
display: none;
|
|
}
|
|
div.tools {
|
|
position: fixed;
|
|
width: @item-width;
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: right;
|
|
margin: 0;
|
|
padding: 0;
|
|
/* add transparent border to prevent jumping when proper border is added on hover */
|
|
border: 1px solid transparent;
|
|
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
|
|
a {
|
|
display: inline-table;
|
|
/* add transparent border to prevent jumping when proper border is added on focus */
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
height: @item-height;
|
|
|
|
position: relative;
|
|
line-height: 20px;
|
|
font-size: @font-size-default;
|
|
padding: 2px 0 2px 2px;
|
|
|
|
@media @screen_min-md {
|
|
color: @ini_nav_menu_color;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
color: @ini_existing;
|
|
}
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:focus {
|
|
box-shadow: @box-shadow;
|
|
background-image: none;
|
|
background-color: @ini_background;
|
|
color: @ini_existing;
|
|
|
|
span {
|
|
position: relative;
|
|
display: inline;
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
svg {
|
|
fill: @ini_existing;
|
|
}
|
|
}
|
|
|
|
span {
|
|
.sr-only();
|
|
|
|
padding-right: .5rem;
|
|
padding-left: .3rem;
|
|
}
|
|
|
|
svg {
|
|
display: inline-block;
|
|
width: @page-tools_svg-size;
|
|
height: @page-tools_svg-size;
|
|
vertical-align: middle;
|
|
border: solid 1px transparent;
|
|
margin: @page-tools_svg-space;
|
|
|
|
@media @screen_min-md {
|
|
fill: @ini_nav_menu_color;
|
|
}
|
|
|
|
@media @screen_max-md {
|
|
fill: @ini_existing;
|
|
}
|
|
}
|
|
|
|
&.top {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
ul {
|
|
box-shadow: @box-shadow; // @box-shadow-offset;
|
|
background-color: @ini_background;
|
|
border-color: @wikiicons-border;
|
|
|
|
li {
|
|
color: @ini_existing;
|
|
|
|
a {
|
|
box-shadow: none;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
color: inherit;
|
|
|
|
svg {
|
|
border: solid 1px transparent;
|
|
border-radius: @ini_default_border_radius;
|
|
fill: @ini_existing;
|
|
transition: @transition background-color, @transition border-color, @transition fill;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
svg {
|
|
background-color: @ini_existing;
|
|
border-color: @ini_existing;
|
|
fill: @ini_background;
|
|
}
|
|
}
|
|
|
|
span {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
margin: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|