streamline page attributes

Page attribute icons should now align better and all look the same.
This commit is contained in:
Andreas Gohr 2023-09-12 11:06:19 +02:00
parent 1e03e2a55f
commit b8adbb9e24
7 changed files with 37 additions and 160 deletions

View file

@ -1,78 +1,54 @@
/**
* Page Attribute Icons in the breadcrumb bar
*/
/* + + + + + icons in breadcrumb area + + + + + */
.page-attributes {
list-style: none;
float: right;
display: inline-block;
max-width: 30%;
margin: -.45em 0 0;
margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed
padding: 0;
@media @screen_max-xs {
max-width: 90%;
}
display: flex;
gap: 0.5rem;
> li {
.btn-usertools-wrapper(); // uniform li
.btn-usertools-num();
margin: 0;
padding: 0;
border: 1px solid @wikiicons-border;
border-radius: @ini_default_border_radius;
position: relative;
float: left;
display: block;
width: auto;
min-height: @toggle-size;
text-align: center;
margin: 0 .25rem;
display: flex;
align-items: center;
justify-content: center;
transition: @transition background-color, @transition border-color, @transition color;
strong {
// override any plugin element styles
* {
margin: 0;
padding: 0;
line-height: normal;
display: block;
min-height: 1.64rem;
border: 1px solid @wikiicons-border;
border-radius: @ini_default_border_radius;
}
a {
display: block;
width: auto;
min-height: 1.64rem;
background-color: @ini_nav_menu_hover_bg;
border: 1px solid @wikiicons-border;
border-radius: @ini_default_border_radius;
transition: @transition background-color, @transition border-color, @transition color;
// number badge
.btn-usertools-num();
&:hover,
&:focus,
&:active {
background-color: @ini_nav_menu_hover_color;
border-color: @ini_nav_menu_hover_color;
color: @ini_nav_menu_hover_bg;
// icon
svg {
height: 1.5em;
width: 1.5em;
span {
fill: @ini_nav_menu_hover_bg;
color: @ini_nav_menu_hover_bg;
}
path {
fill: @ini_nav_menu_color;
}
}
.prefix {
.btn-prefix(.26rem);
.icon-clipboard();
// adjust colors on hover
&:hover {
background-color: @ini_nav_menu_hover_color;
border-color: @ini_nav_menu_hover_color;
display: block;
font-size: 1.2rem;
line-height: 1;
}
.num {
top: -.6em;
font-size: @font-size-very-small;
}
&:empty {
display: none;
svg path {
fill: @ini_nav_menu_hover_bg;
}
}
}
}

View file

@ -2,27 +2,6 @@
* This file provides styles for do-task plugin
*/
/* + + + + + global + + + + + */
ul.page-attributes {
.plugin_do_pagetasks {
position: relative;
border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
strong {
overflow: hidden;
background-color: @ini_background_site;
border-color: @noopentasks-border;
color: @ini_text_webframe;
}
&.do_none {
.num {
background-color: @noopentasks-border; // fix
color: @noopentasks-color; // fix
}
}
}
}
/* + + + + + usertool icon in header + + + + + */
#dokuwiki__usertools.nav-usertools {

View file

@ -2,30 +2,6 @@
* Styles for the QC plugin
*/
/* + + + + + icon in breadcrumb + + + + + */
.page-attributes .plugin_qc {
.qc_icon {
margin: 0;
svg {
margin-top: .1em;
width: 1.6em;
height: 1.6em;
font-size: (@font-size-small - .06);
}
}
a {
&:hover,
&:focus,
&:active {
svg path {
fill: @ini_nav_menu_hover_bg;
}
}
}
}
/* + + + + + slideout output + + + + + */
.qc-output {
position: relative;

View file

@ -1,24 +0,0 @@
/**
* This file provides styles for the quicksubscribe plugin
*/
.page-attributes {
li.plugin_quicksubscribe {
a.plugin_qsub_subscribe {
svg {
width: 1.6em;
height: 1.6em;
font-size: 0.82rem;
fill: @ini_nav_menu_hover_color;
}
}
a:hover,
a:focus,
a:active {
svg {
fill: @ini_nav_menu_hover_bg;
}
}
}
}

View file

@ -1,43 +1,10 @@
/**
* This file provides styles for starred plugin
*/
.page-attributes {
li.plugin_starred {
.starred {
display: block;
padding-top: .05rem;
svg {
width: 1.6em;
height: 1.6em;
font-size: 0.82rem;
fill: @ini_nav_menu_hover_color;
}
}
a {
max-height: @toggle-size;
}
a:hover,
a:focus,
a:active {
.starred svg {
fill: @ini_nav_menu_hover_bg;
}
}
}
}
nav.nav-starred {
ul {
list-style: none;
&#sidebar-menu-starred {
margin-left: 0;
}
li {
margin-left: 0;

View file

@ -113,7 +113,6 @@ css/plugins/extension__manager.less = all
css/plugins/folded.less = all
css/plugins/configmanager.less = all
css/plugins/starred.less = all
css/plugins/quicksubscribe.less = all
css/plugins/sitemapnavi.less = all
css/plugins/data.less = all
css/plugins/fastwiki.less = all

View file

@ -39,9 +39,13 @@ if($doPlugin !== null) {
$class = 'do_late';
$title = sprintf(tpl_getLang('tasks_page_late'), $count['undone'], $count['late']);
}
$markup = "<li class=\"plugin_do_pagetasks $class\" title=\"$title\"><strong><span class=\"num\">{$count['undone']}</span><span class=\"prefix\">" . tpl_getLang('prefix_tasks_page') . " </span></strong></li>";
echo $markup;
echo '<li class="plugin_do_pagetasks">';
echo '<span title="'.$title.'" class="'.$class.'">';
echo inlineSVG(DOKU_PLUGIN . 'do/pix/clipboard-text.svg');
echo '</span>';
echo '<span class="num">' . $count['undone'] . '</span>';
echo '</li>';
}
if($starredPlugin !== null) {