diff options
Diffstat (limited to 'lib/tpl/dokuwiki/css/pagetools.less')
-rw-r--r-- | lib/tpl/dokuwiki/css/pagetools.less | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/lib/tpl/dokuwiki/css/pagetools.less b/lib/tpl/dokuwiki/css/pagetools.less new file mode 100644 index 000000000..ecb3038c3 --- /dev/null +++ b/lib/tpl/dokuwiki/css/pagetools.less @@ -0,0 +1,233 @@ +/** + * This file provides the styles for the page tools + * (fly out navigation beside the page to edit, etc). + * + * @author Anika Henke <anika@selfthinker.org> + * @author Andreas Gohr <andi@splitbrain.org> + */ + +#dokuwiki__site > .site { + /* give space to the right so the tools won't disappear on smaller screens */ + /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */ + padding-right: 40px; + /* give the same space to the left to balance it out */ + padding-left: 40px; +} +.dokuwiki div.page { + height: 190px; + min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */ + height: auto; +} +#dokuwiki__usertools { + /* move the tools just outside of the site */ + right: 40px; +} +[dir=rtl] #dokuwiki__usertools { + right: auto; + left: 40px; +} + + +#dokuwiki__pagetools { + position: absolute; + right: -40px; + /* on same vertical level as first headline, because .page has 2em padding */ + top: 2em; + width: 40px; +} +[dir=rtl] #dokuwiki__pagetools { + right: auto; + left: -40px; +} + +#dokuwiki__pagetools div.tools { + position: fixed; + width: 40px; +} + +#dokuwiki__pagetools 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; + z-index: 10; +} +[dir=rtl] #dokuwiki__pagetools ul { + right: auto; + left: 0; + text-align: left; +} + +#dokuwiki__pagetools ul li { + padding: 0; + margin: 0; + list-style: none; + font-size: 0.875em; +} + +#dokuwiki__pagetools ul li a { + display: block; + min-height: 20px; /* 30 - 2x5 */ + line-height: 20px; + padding: 0; + background-position: right 0; + background-repeat: no-repeat; + /* add transparent border to prevent jumping when proper border is added on focus */ + border: 1px solid transparent; + white-space: nowrap; + width: 30px; + height: 30px; + overflow: hidden; + margin-left: auto; /* align right if the ul is larger because one item is focused */ +} + +#dokuwiki__pagetools ul li a:before { + content: url(images/pagetools-sprite.png?v=2); + display: inline-block; + font-size: 0; + line-height: 0; +} + +[dir=rtl] #dokuwiki__pagetools ul li a { + background-position: left 0; + margin-right: auto; + margin-left: 0; +} + +/* show all tools on hover and individual tools on focus */ +#dokuwiki__pagetools:hover ul, +#dokuwiki__pagetools ul li a:focus, +#dokuwiki__pagetools ul li a:active { + background-color: @ini_background; + border-color: @ini_border; + border-radius: 2px; + box-shadow: 2px 2px 2px @ini_text_alt; +} + +#dokuwiki__pagetools:hover ul li a, +#dokuwiki__pagetools ul li a:focus, +#dokuwiki__pagetools ul li a:active { + width: auto; + height: auto; + overflow: visible; + padding: 5px 40px 5px 5px; + background-image: url(images/pagetools-sprite.png?v=2); +} + +#dokuwiki__pagetools:hover ul li a:before, +#dokuwiki__pagetools ul li a:focus:before { + content: none; +} + +[dir=rtl] #dokuwiki__pagetools:hover ul, +[dir=rtl] #dokuwiki__pagetools ul li a:focus { + box-shadow: -2px 2px 2px @ini_text_alt; +} + +[dir=rtl] #dokuwiki__pagetools:hover li a, +[dir=rtl] #dokuwiki__pagetools ul li a:focus, +[dir=rtl] #dokuwiki__pagetools ul li a:active { + padding: 5px 5px 5px 40px; +} + +/* IE7 fixes, doesn't work without images */ + +#IE7 #dokuwiki__pagetools ul li a { + background-image: url(images/pagetools-sprite.png?v=2); +} + +#IE7 #dokuwiki__pagetools:hover ul li a span, +#IE7 #dokuwiki__pagetools ul li a:focus span, +#IE7 #dokuwiki__pagetools ul li a:active span { + clip: auto; + display: inline; + position: static; +} + +#IE7 #dokuwiki__pagetools ul li a span { + clip: rect(0 0 0 0); + position: absolute; +} + +#dokuwiki__pagetools ul li a:hover, +#dokuwiki__pagetools ul li a:active, +#dokuwiki__pagetools ul li a:focus { + text-decoration: none; +} +#dokuwiki__pagetools ul li a:hover { + background-color: @ini_background_alt; +} + +/*____________ all available icons in sprite ____________*/ + +@pagetools_icon_space: -90px; + +/** + * page tools without highlighting + * + * @param string @action The action class + * @param int @position Position in the page tools sprite + */ +.pagetools-item(@action, @position) { + @position-active: (@position+0.5); + + #dokuwiki__pagetools ul li a.@{action} { + background-position: right @pagetools_icon_space * @position; + + &:before { + margin-top: @pagetools_icon_space * @position; + } + &:hover, + &:active, + &:focus { + background-position: right @pagetools_icon_space * @position-active; + } + } + [dir=rtl] #dokuwiki__pagetools ul li a.@{action} { + background-position: left @pagetools_icon_space * @position; + + &:hover, + &:active, + &:focus { + background-position: left @pagetools_icon_space * @position-active; + } + } +} + +/** + * page tools with highlighting + * + * @param string @action The action class + * @param int @position Position in the page tools sprite + * @param string @mode The mode in which this tool should be highlighted + */ +.pagetools-item(@action, @position, @mode) { + .pagetools-item(@action, @position); + @position-active: (@position+0.5); + + .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} { + background-position: right @pagetools_icon_space * @position-active; + &:before { + margin-top: @pagetools_icon_space * @position-active; + } + } + [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} { + background-position: left @pagetools_icon_space * @position-active; + } +} + +.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); |