diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index 050b5e0..0000000 --- a/.gitattributes +++ /dev/null @@ -1,2 +0,0 @@ -/.* export-ignore -/_test export-ignore diff --git a/.github/auto-comment.yml b/.github/auto-comment.yml deleted file mode 100644 index f6a72e3..0000000 --- a/.github/auto-comment.yml +++ /dev/null @@ -1,9 +0,0 @@ -# auto replies used by probot/auto-comment - -issuesOpened: > - Thank you for opening this issue. - - [CosmoCode](https://www.cosmocode.de) is a software company in Berlin providing services for wiki, app and web development. As such we can't guarantee quick responses for issues opened on our Open Source projects. - - If you require certain features or bugs fixed, you can always hire us. Feel free to contact us at dokuwiki@cosmocode.de for an offer. - diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml new file mode 100644 index 0000000..0bc03db --- /dev/null +++ b/.gitlab-ci.yml @@ -0,0 +1,18 @@ +sprintdoc-farm: + environment: sprintdoc-farm + tags: + - locally + only: + - live + script: + - fab deploy + + +cosmocode-farm: + environment: cosmocode-farm + tags: + - locally + only: + - live + script: + - fab deploy \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index d159169..0000000 --- a/LICENSE +++ /dev/null @@ -1,339 +0,0 @@ - GNU GENERAL PUBLIC LICENSE - Version 2, June 1991 - - Copyright (C) 1989, 1991 Free Software Foundation, Inc., - 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA - Everyone is permitted to copy and distribute verbatim copies - of this license document, but changing it is not allowed. - - Preamble - - The licenses for most software are designed to take away your -freedom to share and change it. By contrast, the GNU General Public -License is intended to guarantee your freedom to share and change free -software--to make sure the software is free for all its users. This -General Public License applies to most of the Free Software -Foundation's software and to any other program whose authors commit to -using it. (Some other Free Software Foundation software is covered by -the GNU Lesser General Public License instead.) You can apply it to -your programs, too. - - When we speak of free software, we are referring to freedom, not -price. Our General Public Licenses are designed to make sure that you -have the freedom to distribute copies of free software (and charge for -this service if you wish), that you receive source code or can get it -if you want it, that you can change the software or use pieces of it -in new free programs; and that you know you can do these things. - - To protect your rights, we need to make restrictions that forbid -anyone to deny you these rights or to ask you to surrender the rights. -These restrictions translate to certain responsibilities for you if you -distribute copies of the software, or if you modify it. - - For example, if you distribute copies of such a program, whether -gratis or for a fee, you must give the recipients all the rights that -you have. You must make sure that they, too, receive or can get the -source code. And you must show them these terms so they know their -rights. - - We protect your rights with two steps: (1) copyright the software, and -(2) offer you this license which gives you legal permission to copy, -distribute and/or modify the software. - - Also, for each author's protection and ours, we want to make certain -that everyone understands that there is no warranty for this free -software. If the software is modified by someone else and passed on, we -want its recipients to know that what they have is not the original, so -that any problems introduced by others will not reflect on the original -authors' reputations. - - Finally, any free program is threatened constantly by software -patents. We wish to avoid the danger that redistributors of a free -program will individually obtain patent licenses, in effect making the -program proprietary. To prevent this, we have made it clear that any -patent must be licensed for everyone's free use or not licensed at all. - - The precise terms and conditions for copying, distribution and -modification follow. - - GNU GENERAL PUBLIC LICENSE - TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION - - 0. This License applies to any program or other work which contains -a notice placed by the copyright holder saying it may be distributed -under the terms of this General Public License. The "Program", below, -refers to any such program or work, and a "work based on the Program" -means either the Program or any derivative work under copyright law: -that is to say, a work containing the Program or a portion of it, -either verbatim or with modifications and/or translated into another -language. (Hereinafter, translation is included without limitation in -the term "modification".) Each licensee is addressed as "you". - -Activities other than copying, distribution and modification are not -covered by this License; they are outside its scope. The act of -running the Program is not restricted, and the output from the Program -is covered only if its contents constitute a work based on the -Program (independent of having been made by running the Program). -Whether that is true depends on what the Program does. - - 1. You may copy and distribute verbatim copies of the Program's -source code as you receive it, in any medium, provided that you -conspicuously and appropriately publish on each copy an appropriate -copyright notice and disclaimer of warranty; keep intact all the -notices that refer to this License and to the absence of any warranty; -and give any other recipients of the Program a copy of this License -along with the Program. - -You may charge a fee for the physical act of transferring a copy, and -you may at your option offer warranty protection in exchange for a fee. - - 2. You may modify your copy or copies of the Program or any portion -of it, thus forming a work based on the Program, and copy and -distribute such modifications or work under the terms of Section 1 -above, provided that you also meet all of these conditions: - - a) You must cause the modified files to carry prominent notices - stating that you changed the files and the date of any change. - - b) You must cause any work that you distribute or publish, that in - whole or in part contains or is derived from the Program or any - part thereof, to be licensed as a whole at no charge to all third - parties under the terms of this License. - - c) If the modified program normally reads commands interactively - when run, you must cause it, when started running for such - interactive use in the most ordinary way, to print or display an - announcement including an appropriate copyright notice and a - notice that there is no warranty (or else, saying that you provide - a warranty) and that users may redistribute the program under - these conditions, and telling the user how to view a copy of this - License. (Exception: if the Program itself is interactive but - does not normally print such an announcement, your work based on - the Program is not required to print an announcement.) - -These requirements apply to the modified work as a whole. If -identifiable sections of that work are not derived from the Program, -and can be reasonably considered independent and separate works in -themselves, then this License, and its terms, do not apply to those -sections when you distribute them as separate works. But when you -distribute the same sections as part of a whole which is a work based -on the Program, the distribution of the whole must be on the terms of -this License, whose permissions for other licensees extend to the -entire whole, and thus to each and every part regardless of who wrote it. - -Thus, it is not the intent of this section to claim rights or contest -your rights to work written entirely by you; rather, the intent is to -exercise the right to control the distribution of derivative or -collective works based on the Program. - -In addition, mere aggregation of another work not based on the Program -with the Program (or with a work based on the Program) on a volume of -a storage or distribution medium does not bring the other work under -the scope of this License. - - 3. You may copy and distribute the Program (or a work based on it, -under Section 2) in object code or executable form under the terms of -Sections 1 and 2 above provided that you also do one of the following: - - a) Accompany it with the complete corresponding machine-readable - source code, which must be distributed under the terms of Sections - 1 and 2 above on a medium customarily used for software interchange; or, - - b) Accompany it with a written offer, valid for at least three - years, to give any third party, for a charge no more than your - cost of physically performing source distribution, a complete - machine-readable copy of the corresponding source code, to be - distributed under the terms of Sections 1 and 2 above on a medium - customarily used for software interchange; or, - - c) Accompany it with the information you received as to the offer - to distribute corresponding source code. (This alternative is - allowed only for noncommercial distribution and only if you - received the program in object code or executable form with such - an offer, in accord with Subsection b above.) - -The source code for a work means the preferred form of the work for -making modifications to it. For an executable work, complete source -code means all the source code for all modules it contains, plus any -associated interface definition files, plus the scripts used to -control compilation and installation of the executable. However, as a -special exception, the source code distributed need not include -anything that is normally distributed (in either source or binary -form) with the major components (compiler, kernel, and so on) of the -operating system on which the executable runs, unless that component -itself accompanies the executable. - -If distribution of executable or object code is made by offering -access to copy from a designated place, then offering equivalent -access to copy the source code from the same place counts as -distribution of the source code, even though third parties are not -compelled to copy the source along with the object code. - - 4. You may not copy, modify, sublicense, or distribute the Program -except as expressly provided under this License. Any attempt -otherwise to copy, modify, sublicense or distribute the Program is -void, and will automatically terminate your rights under this License. -However, parties who have received copies, or rights, from you under -this License will not have their licenses terminated so long as such -parties remain in full compliance. - - 5. You are not required to accept this License, since you have not -signed it. However, nothing else grants you permission to modify or -distribute the Program or its derivative works. These actions are -prohibited by law if you do not accept this License. Therefore, by -modifying or distributing the Program (or any work based on the -Program), you indicate your acceptance of this License to do so, and -all its terms and conditions for copying, distributing or modifying -the Program or works based on it. - - 6. Each time you redistribute the Program (or any work based on the -Program), the recipient automatically receives a license from the -original licensor to copy, distribute or modify the Program subject to -these terms and conditions. You may not impose any further -restrictions on the recipients' exercise of the rights granted herein. -You are not responsible for enforcing compliance by third parties to -this License. - - 7. If, as a consequence of a court judgment or allegation of patent -infringement or for any other reason (not limited to patent issues), -conditions are imposed on you (whether by court order, agreement or -otherwise) that contradict the conditions of this License, they do not -excuse you from the conditions of this License. If you cannot -distribute so as to satisfy simultaneously your obligations under this -License and any other pertinent obligations, then as a consequence you -may not distribute the Program at all. For example, if a patent -license would not permit royalty-free redistribution of the Program by -all those who receive copies directly or indirectly through you, then -the only way you could satisfy both it and this License would be to -refrain entirely from distribution of the Program. - -If any portion of this section is held invalid or unenforceable under -any particular circumstance, the balance of the section is intended to -apply and the section as a whole is intended to apply in other -circumstances. - -It is not the purpose of this section to induce you to infringe any -patents or other property right claims or to contest validity of any -such claims; this section has the sole purpose of protecting the -integrity of the free software distribution system, which is -implemented by public license practices. Many people have made -generous contributions to the wide range of software distributed -through that system in reliance on consistent application of that -system; it is up to the author/donor to decide if he or she is willing -to distribute software through any other system and a licensee cannot -impose that choice. - -This section is intended to make thoroughly clear what is believed to -be a consequence of the rest of this License. - - 8. If the distribution and/or use of the Program is restricted in -certain countries either by patents or by copyrighted interfaces, the -original copyright holder who places the Program under this License -may add an explicit geographical distribution limitation excluding -those countries, so that distribution is permitted only in or among -countries not thus excluded. In such case, this License incorporates -the limitation as if written in the body of this License. - - 9. The Free Software Foundation may publish revised and/or new versions -of the General Public License from time to time. Such new versions will -be similar in spirit to the present version, but may differ in detail to -address new problems or concerns. - -Each version is given a distinguishing version number. If the Program -specifies a version number of this License which applies to it and "any -later version", you have the option of following the terms and conditions -either of that version or of any later version published by the Free -Software Foundation. If the Program does not specify a version number of -this License, you may choose any version ever published by the Free Software -Foundation. - - 10. If you wish to incorporate parts of the Program into other free -programs whose distribution conditions are different, write to the author -to ask for permission. For software which is copyrighted by the Free -Software Foundation, write to the Free Software Foundation; we sometimes -make exceptions for this. Our decision will be guided by the two goals -of preserving the free status of all derivatives of our free software and -of promoting the sharing and reuse of software generally. - - NO WARRANTY - - 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY -FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN -OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES -PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED -OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF -MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS -TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE -PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, -REPAIR OR CORRECTION. - - 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING -WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR -REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, -INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING -OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED -TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY -YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER -PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE -POSSIBILITY OF SUCH DAMAGES. - - END OF TERMS AND CONDITIONS - - How to Apply These Terms to Your New Programs - - If you develop a new program, and you want it to be of the greatest -possible use to the public, the best way to achieve this is to make it -free software which everyone can redistribute and change under these terms. - - To do so, attach the following notices to the program. It is safest -to attach them to the start of each source file to most effectively -convey the exclusion of warranty; and each file should have at least -the "copyright" line and a pointer to where the full notice is found. - - - Copyright (C) - - This program is free software; you can redistribute it and/or modify - it under the terms of the GNU General Public License as published by - the Free Software Foundation; either version 2 of the License, or - (at your option) any later version. - - This program is distributed in the hope that it will be useful, - but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along - with this program; if not, write to the Free Software Foundation, Inc., - 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. - -Also add information on how to contact you by electronic and paper mail. - -If the program is interactive, make it output a short notice like this -when it starts in an interactive mode: - - Gnomovision version 69, Copyright (C) year name of author - Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. - This is free software, and you are welcome to redistribute it - under certain conditions; type `show c' for details. - -The hypothetical commands `show w' and `show c' should show the appropriate -parts of the General Public License. Of course, the commands you use may -be called something other than `show w' and `show c'; they could even be -mouse-clicks or menu items--whatever suits your program. - -You should also get your employer (if you work as a programmer) or your -school, if any, to sign a "copyright disclaimer" for the program, if -necessary. Here is a sample; alter the names: - - Yoyodyne, Inc., hereby disclaims all copyright interest in the program - `Gnomovision' (which makes passes at compilers) written by James Hacker. - - , 1 April 1989 - Ty Coon, President of Vice - -This General Public License does not permit incorporating your program into -proprietary programs. If your program is a subroutine library, you may -consider it more useful to permit linking proprietary applications with the -library. If this is what you want to do, use the GNU Lesser General -Public License instead of this License. diff --git a/README b/README old mode 100644 new mode 100755 index 6cadc0c..89f53df --- a/README +++ b/README @@ -1,27 +1,7 @@ -sprintdoc template for DokuWiki +sprintDoc Template (FIXME URL) +for DokuWiki [https://www.dokuwiki.org] +by Jana Deutschlaender -modern, responsive template that integrates multiple plugins -All documentation for this template can be found at -https://www.dokuwiki.org/template:sprintdoc - -If you install this template manually, make sure it is installed in -lib/tpl/sprintdoc/ - if the folder is called different it -will not work! - -Please refer to http://www.dokuwiki.org/extensions for additional info -on how to install extensions in DokuWiki. - ----- -Copyright (C) Jana Deutschlaender - -This program is free software; you can redistribute it and/or modify -it under the terms of the GNU General Public License as published by -the Free Software Foundation; version 2 of the License - -This program is distributed in the hope that it will be useful, -but WITHOUT ANY WARRANTY; without even the implied warranty of -MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -GNU General Public License for more details. - -See the LICENSING file for details +Version: see template.info.txt +License: GPL2, see COPYING diff --git a/README.md b/README.md new file mode 100755 index 0000000..216f47d --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# sprintDoc Template for dokuwiki diff --git a/Template.php b/Template.php index 1cd2739..b2924d9 100644 --- a/Template.php +++ b/Template.php @@ -11,19 +11,15 @@ namespace dokuwiki\template\sprintdoc; */ class Template { - /** @var array loaded plugins */ + /** + * @var array loaded plugins + */ protected $plugins = array( 'sqlite' => null, 'tagging' => null, 'magicmatcher' => null, - 'tplinc' => null, - 'sitemapnavi' => null, ); - /** @var string the type of special navigation to use */ - protected $nav = ''; - - /** * Get the singleton instance * @@ -40,26 +36,12 @@ class Template { */ protected function __construct() { $this->initializePlugins(); - $this->initNavigationCookie(); /** @var \Doku_Event_Handler */ global $EVENT_HANDLER; $EVENT_HANDLER->register_hook('PLUGIN_TPLINC_LOCATIONS_SET', 'BEFORE', $this, 'registerIncludes'); } - /** - * Load all the plugins we support directly - */ - protected function initializePlugins() { - $this->plugins['sqlite'] = plugin_load('helper', 'sqlite'); - if($this->plugins['sqlite']) { - $this->plugins['tagging'] = plugin_load('helper', 'tagging'); - $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist'); - } - $this->plugins['tplinc'] = plugin_load('helper', 'tplinc'); - $this->plugins['sitemapnavi'] = plugin_load('helper', 'sitemapnavi'); - } - /** * Makes include position info available to the tplinc plugin * @@ -69,8 +51,6 @@ class Template { $event->data['footer'] = 'Footer below the page content'; $event->data['sidebarfooter'] = 'Footer below the sidebar'; $event->data['sidebarheader'] = 'Header above the sidebar'; - $event->data['navtop'] = 'Additional navigation items at the top'; - $event->data['navbottom'] = 'Additional navigation items at the bottom'; } /** @@ -91,81 +71,15 @@ class Template { } /** - * Sets a cookie to remember the requested special navigation + * Load all the plugins we support directly */ - protected function initNavigationCookie() { - if ($this->plugins['sitemapnavi'] === null) return; - global $INPUT; - - $nav = $INPUT->str('nav'); - if($nav) { - set_doku_pref('nav', $nav); - $this->nav = $INPUT->str('nav'); - } else { - $this->nav = get_doku_pref('nav', 'sidebar'); + protected function initializePlugins() { + $this->plugins['sqlite'] = plugin_load('helper', 'sqlite'); + if($this->plugins['sqlite']) { + $this->plugins['tagging'] = plugin_load('helper', 'tagging'); + $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist'); } - } - - /** - * Return the navigation for the sidebar - * - * Defaults to the standard sidebar mechanism, but supports also the sitemapnavi plugin - * - * @return string - */ - public function getNavigation() { - global $ID; - global $conf; - - // id of the current sidebar, each sidebar must have its own state - $header = sprintf('
', md5(page_findnearest($conf['sidebar']))); - // add tabs if multiple navigation types available - if ($this->plugins['sitemapnavi'] !== null) { - $header .= ''; - } - - // decide what to show - if ($this->nav === 'sitemap') { - // site tree created by sitemapnavi plugin - $nav = ''; - } else { - // main navigation, loaded from standard sidebar, fixed up by javascript - $nav = ''; - } - - return $header . $nav; - } - - /** - * Default class defining is the sidebar should collapse - * - * @return string - */ - public function fullWidthClass() { - global $ACT; - // no auto collapsing? empty class - if (!tpl_getConf('autocollapse')) return ''; - // mode show? empty class - if ($ACT === "show") return ''; - // anything else? wide content - return 'wide-content '; + $this->plugins['tplinc'] = plugin_load('helper', 'tplinc'); } /** @@ -215,10 +129,9 @@ class Template { * @param array $attributes * @param int $w * @param int $h - * @param bool $crop * @return string */ - public static function getResizedImgTag($tag, $attributes, $w, $h, $crop = true) { + public static function getResizedImgTag($tag, $attributes, $w, $h) { $attr = ''; $medias = array(); @@ -241,7 +154,7 @@ class Template { if($media === '') return ''; // replace the array - $media = ml($media, array('w' => $w, 'h' => $h, 'crop' => (int) $crop), true, '&'); + $media = ml($media, array('w' => $w, 'h' => $h, 'crop' => 1), true, '&'); $attributes[$attr] = $media; // return the full tag @@ -264,62 +177,32 @@ class Template { $title = tpl_getLang('adjunct_start_logo_text') . $conf['title']; } - $logo = << -EH22 DEMO -HTML; + $desktop = self::getResizedImgTag( + 'img', + array( + 'class' => 'mobile-hide', + 'src' => array('wiki:logo-wide.png', 'wiki:logo.png'), + 'alt' => $title, + ), + 0, 0 + ); + $mobile = self::getResizedImgTag( + 'img', + array( + 'class' => 'mobile-only', + 'src' => array('wiki:logo-32x32.png', 'wiki:favicon.png', 'wiki:logo-square.png', 'wiki:logo.png'), + 'alt' => $title, + ), + 32, 32 + ); // homepage logo should not link to itself (BITV accessibility requirement) if($linkit) { - tpl_link(wl(), $logo, 'accesskey="h" title="[H]"'); + tpl_link(wl(), $desktop, 'accesskey="h" title="[H]"'); + tpl_link(wl(), $mobile, 'accesskey="h" title="[H]"'); } else { - echo $logo; + echo $desktop; + echo $mobile; } } - - /** - * Add the current mode information to the hierarchical breadcrumbs - */ - public function breadcrumbSuffix() { - global $ACT; - global $lang; - global $INPUT; - global $ID; - global $conf; - global $IMG; - if($ACT == 'show') return; - - // find an apropriate label for the current mode - if($ACT) { - $label = tpl_getLang('mode_' . $ACT); - if(!$label) { - if(isset($lang['btn_' . $ACT])) { - $label = $lang['btn_' . $ACT]; - } else { - $label = $ACT; - } - } - } else { - // actually we would need to create a proper namespace breadcrumb path here, - // but this is the most simplest thing we can do for now - if(defined('DOKU_MEDIADETAIL')) { - $label = hsc(noNS($IMG)); - } else { - return; - } - } - - if($ACT == 'admin' && $INPUT->has('page')) { - $link = wl($ID, array('do' => 'admin')); - echo ' : ' . $label . ''; - - /** @var \DokuWiki_Admin_Plugin $plugin */ - $plugin = plugin_load('admin', $INPUT->str('page')); - if(!$plugin) return; - - $label = $plugin->getMenuText($conf['lang']); - } - - echo ' : ' . $label . ''; - } } diff --git a/conf/default.php b/conf/default.php index f666d04..9f1418e 100755 --- a/conf/default.php +++ b/conf/default.php @@ -5,7 +5,4 @@ */ $conf['sidebar_sections'] = 'h1,h2,h3,h4,h5'; -$conf['header_layout'] = 'header-default'; -$conf['autocollapse'] = 1; -$conf['closedwiki'] = 0; -$conf['copyright'] = ''; + diff --git a/conf/metadata.php b/conf/metadata.php index 863b778..274f7c5 100755 --- a/conf/metadata.php +++ b/conf/metadata.php @@ -9,15 +9,3 @@ $meta['sidebar_sections'] = array( 'li.level1 > .li', ), ); - -$meta['header_layout'] = array( - 'multichoice', - '_choices' => array( - 'header-default', - 'header-compact', - ), - ); - -$meta['autocollapse'] = array('onoff'); -$meta['closedwiki'] = array('onoff'); -$meta['copyright'] = array(''); diff --git a/css/area_content.less b/css/area_content.less index 67f2840..76c8f30 100755 --- a/css/area_content.less +++ b/css/area_content.less @@ -1,53 +1,65 @@ /** * This file provides the design styles for the page content. + * + * @author Jana Deutschlaender */ -.picker { - z-index: 2; // position over .content -} - .content .row { > .col-xs-12 { - z-index: 1; - - background-color: var(--color-background); - + box-shadow: @box-shadow; #dokuwiki__content { position: relative; + z-index: 10; - .page-content { - padding-top: @page-header_height; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: -1; + height: @page-header_height; + box-sizing: border-box; + width: 100%; + background-color: @ini_background_page_header; + border-bottom: 1px solid @ini_border_light; + } - .msg-area + * { + .msg-area + * { + clear: both; + padding-top: 1em; // as h1 + } + + #plugin__highlightparent { + clear: none; + display: block; + + + * { clear: both; padding-top: 1em; // as h1 } } } } - @media @screen_min-md { - > .col-xs-12 { - border-left: dashed 0.25em var(--color-shade-4); - border-radius: 0; - } - } } + .main-content > .level2, .main-content > .level1, .main-content > .level3, .main-content > .level4, .main-content > .level5, .main-content > .level6 { - > p, - > ul > li .li { + //padding-bottom: 1rem; + + > p, > ul > li .li { a { font-size: inherit; } } } + .level1, .level2, .level3, diff --git a/css/area_footer.less b/css/area_footer.less index 7e103bd..a76bb4b 100755 --- a/css/area_footer.less +++ b/css/area_footer.less @@ -1,16 +1,20 @@ /** * This file provides the design styles for the page footer + * + * @author Jana Deutschlaender */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* no print */ + @media screen { .page-footer { min-height: @page-header_height; - background-color: var(--color-background); - border-top: 1px solid var(--color-shade-4); + background-color: @ini_background_page_header; + border-top: 1px solid @ini_border_light; border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius - color: var(--color-shade-4); + color: @ini_background_page_footer; font-size: @font-size-default; text-align: right; padding: @margin-small @margin-default; @@ -34,22 +38,27 @@ #dokuwiki__footer { .main-footer { position: relative; + z-index: 2; box-sizing: border-box; - background-color: var(--color-background); - margin-top: 5px; // for box-shadow of content - text-align: center; + background-color: @ini_background_site; } p { - color: var(--color-shade-4); + color: @ini_text_webframe; font-size: @font-size-default; margin: 0; } + + a { + color: @ini_nav_menu_color; + } } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1024px */ + @media @screen_min-md { #dokuwiki__footer { .col-xs-12 { @@ -82,8 +91,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1023px */ + @media @screen_max-md { #dokuwiki__footer { .main-footer { @@ -93,8 +104,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 768px */ + @media @screen_max-xs { .page-footer { padding-left: @margin-small; @@ -111,8 +124,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 480px */ + @media @screen_max-xxs { #dokuwiki__footer { .main-footer { diff --git a/css/area_footnotes.less b/css/area_footnotes.less deleted file mode 100644 index 87abded..0000000 --- a/css/area_footnotes.less +++ /dev/null @@ -1,55 +0,0 @@ -/** - * This file provides the design styles for the footnotes. - */ - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* footnotes section */ -.dokuwiki div.footnotes { - div.fn { - margin-bottom: .2rem; - display: table; - vertical-align: top; - - > sup, - .content { - display: table-cell; - } - - > sup { - vertical-align: top; - - // footnote anchor - a.fn_bot { - font-size: .86em; - padding-right: .2em; - } - } - - .content { - vertical-align: top; - line-height: 135%; - } - - // footnote text - div.content { - line-height: 135%; - } - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* footnotes in content */ -.main-content sup, -.main-content > div > p sup, -.main-content > div > ul > li .li sup { - a.fn_top { - font-size: .7rem; - font-weight: bold; - padding-right: .2em; - } -} - -.insitu-footnote { - line-height: 130%; - z-index: 100; -} diff --git a/css/area_forms.less b/css/area_forms.less index d7be3cf..996bd68 100644 --- a/css/area_forms.less +++ b/css/area_forms.less @@ -1,13 +1,18 @@ /** * This file provides the design styles for forms. + * + * @author Jana Deutschlaender */ + /* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ + form { display: inline; margin: 0; padding: 0; + // multiline label fieldset > label.block > span:first-child { display: inline-block; @@ -59,8 +64,8 @@ meter, progress { font: inherit; font-weight: normal; - color: var(--color-foreground); - background-color: var(--color-background); + color: #333; + background-color: #fff; line-height: normal; margin: 0; vertical-align: middle; @@ -90,7 +95,8 @@ textarea, select, keygen { min-height: @formfield_min-height; - border: 1px solid var(--color-shade-4); + border: 1px solid @ini_border; + box-shadow: inset 0 0 1px #eee; border-radius: @fix_border-radius; padding-left: .3rem; padding-right: .3rem; @@ -109,6 +115,7 @@ input[type="image"] { //box-shadow: none; :in ie picture and checkbox disappear } + input:active, input:focus, textarea:active, @@ -117,7 +124,7 @@ select:active, select:focus, keygen:active, keygen:focus { - border-color: var(--color-shade-4); + border-color: #999; } input[type="file"] { @@ -125,6 +132,7 @@ input[type="file"] { padding-bottom: .1rem; } + /* + + + + + buttons + + + + + */ button { background-color: #eee; @@ -147,6 +155,7 @@ button { } } + /* + + + all types of submit-buttons + + + */ form input[type=submit], // heredity 'adnewpage' a.button, @@ -157,21 +166,19 @@ button[type=submit], cursor: pointer; box-shadow: none; background-image: none; - background-color: var(--color-shade-1); - border: solid 0.1rem var(--color-shade-2); - border-radius: 0.5rem; - color: var(--color-foreground); + background-color: @ini_button_background; + border: 1px solid @ini_button_background; + border-radius: @fix_border-radius; + color: @ini_button_color; vertical-align: top; padding: .3em @grid; + transition: @transition background-color, @transition color; &:hover, &:active, &:focus { - background-color: transparent; - color: var(--color-glow-primary); - border-color: var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); + background-color: @ini_button_color; + color: @ini_button_background; } } @@ -206,6 +213,7 @@ button[type=submit] { } } + /* + + + all types of buttons not being submit-buttons + + + */ input.button, input[type=button] { @@ -229,6 +237,7 @@ input[type=button] { } } + /* + + + all disabled buttons + + + */ input[disabled], button[disabled], @@ -240,11 +249,13 @@ button[readonly], select[readonly], textarea[readonly] { cursor: auto; - background-color: var(--color-background); + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); + background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); + background-color: #eee; opacity: .5; border: 1px solid @ini_border; border-radius: @fix_border-radius; - color: var(--color-shade-4); + color: #333; font-weight: normal; padding: .3em @grid; transition: @transition background-color, @transition color; @@ -266,8 +277,10 @@ button::-moz-focus-inner { padding: 0; } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* media queries - Styles for auth forms */ + @media @screen_max-xs { .tpl_sprintdoc { #dw__login, diff --git a/css/area_header.less b/css/area_header.less index b041641..eedc601 100755 --- a/css/area_header.less +++ b/css/area_header.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for the page header. + * + * @author Jana Deutschlaender */ + #dokuwiki__header { @header-font-opacity: 1; @@ -9,23 +12,25 @@ min-height: 120px; } - /* + + + wiki logo + + + */ + +/* + + + wiki logo + + + */ @media @screen_min-md { .logo { padding: 1rem 0 .3rem; - text-align: center; img { - height: 200px; + height: 4.6rem; width: auto; - transition: transform 200ms ease-in-out; + border-style: solid; + border-color: transparent; + border-width: 2px 0; } a:hover, a:focus, a:active { img { - transform: scale(1.05); + border-width: 0; } } } @@ -33,13 +38,7 @@ @media @screen_max-md { .logo { - //display: table-cell; - text-align: center; - width: 100%; - - img { - max-height: 200px; - } + display: table-cell; .mobile-only { margin: .8rem 1rem .6rem 0; @@ -47,7 +46,8 @@ } } - /* + + + + + DESKTOP - wiki title + claim + + + + + */ + +/* + + + + + DESKTOP - wiki title + claim + + + + + */ .main-title.desktop-only { @media @screen_min-md { display: table-cell; @@ -76,7 +76,8 @@ } } - /* + + + + + MOBILE - wiki title wrapper + + + + + */ + +/* + + + + + MOBILE - wiki title wrapper + + + + + */ .main-title:not([class*="desktop-only"]) { @media @screen_max-md { display: table-cell; @@ -88,9 +89,10 @@ } } - /* + + + wiki title + + + */ + +/* + + + wiki title + + + */ p.title { - background-color: var(--color-background); + background-color: @ini_background_site; opacity: @header-font-opacity; color: @ini_text_webframe; line-height: @line-height-default; @@ -107,7 +109,8 @@ } } - /* + + + + + DESKTOP - wiki claim, logo, title wrapper + + + + + */ + +/* + + + + + DESKTOP - wiki claim, logo, title wrapper + + + + + */ @media @screen_min-md { div.claim { display: table-cell; @@ -116,7 +119,8 @@ } } - /* + + + wiki claim + + + */ + +/* + + + wiki claim + + + */ p.claim { opacity: @header-font-opacity; color: @ini_text_webframe; @@ -128,50 +132,48 @@ } } - /* + + + mobile nav togglelink + + + */ + +/* + + + mobile nav togglelink + + + */ .menu-togglelink { position: relative; + z-index: 1; margin: @headericons-margin-xxs -(@very-small-spacing) 0 0; a { .fontello(); .icon-menu(); - .btn-hover(); display: block; min-height: @toggle-size; min-width: @toggle-size; box-sizing: border-box; + background-color: #fff; border: 1px solid @ini_border; border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius + color: @ini_nav_menu_color; font-size: 1rem; text-align: center; text-decoration: none; line-height: 1; + transition: @transition color, @transition background-color, @transition border-color; &::before { font-size: 1.5rem; margin: .1rem 0 0; } + + &:hover, + &:active, + &:focus { + background-color: @ini_nav_menu_hover_bg; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_color; + } } } - /* + + + mobile select for doku wiki tools + + + */ - .menu-tool-select { - position: relative; - z-index: 1000; - display: none; - @media @screen_max-xxs { - display: block; - } - select { - display: block; - width:100%; - } - } - - /* + + + + + with magic matcher + + + + + */ +/* + + + + + with magic matcher + + + + + */ &.has-magicmatcher { .logo { @media @screen_min-md { @@ -201,82 +203,3 @@ } } } - -/* + + + + + layout option compact + + + + + */ -.header-compact { - #dokuwiki__header { - min-height: 2.7rem; - margin-bottom: 0.5rem; - - .main-title.desktop-only p.claim, - p.claim { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - max-width: 35em; - } - - // desktop - @media @screen_min-md { - div.claim { - vertical-align: top; - } - - .main-title.desktop-only { - vertical-align: top; - } - - .main-title.desktop-only, - .logo { - padding-top: 0.4rem; - } - - .logo img { - height: 3.6rem; - } - } - - // mobile middle - @media @screen_max-md { - - .main-title.desktop-only p.claim, - p.claim { - display: none; - } - - .logo { - display: block; - position: absolute; - top: 0; - left: 3rem; - - .mobile-only { - margin: .4rem; - height: 1.75rem; - } - } - - .main-title:not([class*="desktop-only"]) { - display: inline-block; - vertical-align: top; - padding-left: 1.75rem; - } - - p.title { - font-size: 1rem; - } - } - - @media @screen_max-xxs { - min-height: 70px; // needed for menu select toolbar - - .logo { - left: 2rem; - } - - .menu-tool-select { - padding-top: .3rem; - } - } - } -} diff --git a/css/area_main-content-anchor.less b/css/area_main-content-anchor.less deleted file mode 100644 index c5e55dc..0000000 --- a/css/area_main-content-anchor.less +++ /dev/null @@ -1,36 +0,0 @@ -#dokuwiki__content.main-content { - h1, h2, h3, h4, h5 { - a.anchor { - vertical-align: middle; - margin-left: 0.25em; - display: none; - position: absolute; - - svg { - width: 1em; - height: 1em; - fill: var(--color-foreground); - } - } - - &:hover { - a.anchor { - display: inline-block; - transition-property: filter, border-color; - transition-duration: 200ms; - transition-timing-function: ease-out; - - &:hover { - color: var(--color-glow-primary); - filter: var(--filter-glow-primary); - transition: var(--transition-glow); - - svg { - fill: var(--color-glow-primary); - } - } - - } - } - } -} diff --git a/css/area_main-content-secedit.less b/css/area_main-content-secedit.less index 1d26e34..976d752 100644 --- a/css/area_main-content-secedit.less +++ b/css/area_main-content-secedit.less @@ -1,32 +1,41 @@ /** - * This styles the "section editing button" (if not added by data-plugin) + * This styles the section editing buttons and highlighting */ + #dokuwiki__content.main-content { - .secedit:not([class*="plugin"]):not([class*="table"]) { + div.section_highlight { + clear: right; + background: repeating-linear-gradient( + -45deg, + @highlight-odd-ini_text, + @highlight-odd-ini_text 10px, + @highlight-even-ini_text 10px, + @highlight-even-ini_text 20px, + ); + border-color: @ini_background_page_header; + } + + .editbutton_section { position: relative; + z-index: 2; top: 0; float: right; - margin-top: 0; // for best position of edit-tab beneath table form div.no { button { - margin-top: -.4rem; - margin-right: -0.4rem; - padding: 0.2rem 0.4rem; + padding-right: 0; } } - // "section editing button" button { - display: flex; - align-items: center; background-color: transparent; color: transparent; border-color: transparent; &::after { content: ''; + float: right; display: inline-block; background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat; height: 1em; @@ -36,20 +45,20 @@ border-radius: @ini_default_border_radius; margin-left: @small-spacing; margin-top: -1px; - - color: var(--color-foreground); - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - background: currentColor !important; - - mask-image: url('img/pencil.svg'); } &:hover, &:active, &:focus { - .fnActiveButton(); + //background-color: @ini_existing; + color: @ini_existing; + //border-color: @ini_existing; + + &::after { + background-color: @ini_existing; + background-image: url("svg.php?svg=pencil.svg&f=background_content"); + border-color: @ini_existing; + } } } } diff --git a/css/area_main-content.less b/css/area_main-content.less index 6058c8c..da0ecd7 100755 --- a/css/area_main-content.less +++ b/css/area_main-content.less @@ -1,12 +1,15 @@ /** * This file provides the design styles for the main-content. + * + * @author Jana Deutschlaender */ + #dokuwiki__content.main-content { - div[class^="level"] { + .level2 { p a.media { img { - border: 1px dotted var(--color-background); + border: 1px dotted @ini_background_site; } &:hover, @@ -20,7 +23,7 @@ } > div, - div[class^="level"] { + .section_highlight > div { > ul, > ol { &:not([class="tabs"]) > li { @@ -39,12 +42,16 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ -// @media @screen_min-xlg { -// } + +@media @screen_min-xlg { +} + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1199px */ -// @media @screen_max-xlg { -// } + +@media @screen_max-xlg { +} diff --git a/css/area_main-sidebar-content.less b/css/area_main-sidebar-content.less new file mode 100644 index 0000000..1797837 --- /dev/null +++ b/css/area_main-sidebar-content.less @@ -0,0 +1,63 @@ +/** + * This file provides the design styles the non-navigational elements in the sidebar + */ + + +#dokuwiki__aside { + ul, + ol { + margin-left: -.4rem; + padding-left: 0; + + ul, + ol { + padding-left: 1.8rem; + + @media @screen_md-lg { + padding-left: @menu-margin-lg; + } + + li { + margin-left: 0; + } + } + } +} + + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ +/* max-width: 1023px */ + +@media @screen_max-md { + #dokuwiki__aside { + display: none; + } + + body.show-mobile-sidebar { + #dokuwiki__aside { + display: block !important; + position: absolute; + left: 1.25rem; //left margin of content container + z-index: 200; // above all + box-shadow: @box-shadow-right-bottom; + min-width: 45%; + max-width: 90%; + height: auto; + + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + width: 100%; + height: 100%; + background: @ini_background_site; + background: -webkit-linear-gradient(left, @ini_background_site, @ini_background); + background: linear-gradient(left, @ini_background_site, @ini_background); + z-index: 0; + } + } + } +} diff --git a/css/area_main-sidebar-nav.less b/css/area_main-sidebar-nav.less index 8363b35..61fd70d 100755 --- a/css/area_main-sidebar-nav.less +++ b/css/area_main-sidebar-nav.less @@ -1,51 +1,32 @@ /** * This file provides the design styles the navigational elements in the sidebar + * + * @author Jana Deutschlaender + * @author Andreas Gohr */ + #dokuwiki__aside { @icon-size: @font-size-big; @menu-margin: @icon-size + @margin-small * 2; - @media @screen_md-lg { - margin-left: -1.25rem; - } + nav > p, + .mmissuelist li, + .mmissuelist div { + color: @ini_nav_menu_color; - @media @screen_max-md { - display: none; - } + &.noissue { + color: @ini_text_webframe; - ul { - padding-left: 0; + * { + color: inherit; + } + } } nav { - display: flex; - flex-direction: column; - gap: 0.75rem; - - &.nav-main { - margin-bottom: @nav-margin; - } - - > p { - color: var(--color-foreground); - - &.noissue { - color: @ini_text_webframe; - - * { - color: inherit; - } - } - } - - ul, - div.nav { - margin-bottom: 0; - } - li { - color: var(--color-foreground); + color: @ini_nav_menu_color; > div { color: @ini_text_webframe; @@ -60,191 +41,120 @@ li:not([class]), .li { padding: .15em 0; - - - /* + + + + + active + + + + + */ - - span.curid { - font-weight: bold; - } } } - a, label { + + /* jira itemlist */ + .mmissuelist { + li { + &.noissue { + list-style-type: none; + margin-left: 0; + } + + a { + display: inline-block; + } + } + + img { + vertical-align: bottom; + margin-right: .3rem; + } + + .mm__status { + padding-left: .3rem; + padding-right: .3rem; + } + + form { + vertical-align: text-top; + } + } + + > * { + margin-left: @menu-margin; // moves *all* sidebar content to the right + + @media @screen_md-lg { + margin-left: @menu-margin-lg; + } + } + + a { &:link, &:visited { opacity: .9; - color: var(--color-foreground); + color: @ini_nav_menu_color; } * { - color: var(--color-foreground); + color: inherit; } } - /* + + + the wrapper around the toggle to reserve space + + + */ + // the toggle element + a.nav { + .display-flex(); + .align-items(); - div.nav { + cursor: pointer; min-height: @icon-size + @margin-small; - background-color: var(--color-background); - border-radius: 0.5rem; + opacity: 1; + border: 1px solid transparent; + border-radius: @fix_border-radius; + color: @ini_nav_menu_color; + font-size: @font-size-head6; + font-weight: normal; + margin: -1px 0 (@font-size-head6 / 2) -(@menu-margin - .4); // moves the toggles back to the left (.4 from li margin) + transition: @transition color, @transition background-color, @transition border-color; - &.themeToggle input { - width: 0; - height: 0; - margin: 0; - padding: 0; - display: block; - opacity: 0; + @media @screen_md-lg { + margin-left: -(@menu-margin-lg + .8); } - // the toggle element - a, label { - border-radius: 0.5rem; - background-color: var(--color-shade-1); - transition: background-color 150ms; - color: var(--color-foreground); - font-size: 1.2em; - border: solid 0.1em var(--color-shade-1); - transition-property: filter, border-color; - transition-duration: 200ms; - transition-timing-function: ease-out; - - - cursor: pointer; - display: flex; - align-items: center; - width: 100%; - opacity: 1; - font-weight: normal; - margin: 0 0 @very-small-spacing; - padding: 0.4rem 0.1rem; - text-decoration: none; - - span { - display: inline-block; - vertical-align: middle; - color: inherit; - } - - span.ico { - display: flex; - align-items: center; - justify-content: center; - i[data-icon] { - font-size: 1.5rem; - } - } - - - /* + + + submenu entry is active + + + */ - /* + + + toggle: open + + + */ - - &.is-active, &.is-open { - background-color: var(--color-shade-2); - border-color: var(--color-shade-4); - color: var(--color-foreground); - - span.ico { - &:after { - background-color: currentColor; - } - - strong { - border-color: currentColor; - } - - svg { - path { - fill: currentColor; - } - } - } - } + span { + display: inline-block; + vertical-align: middle; + color: inherit; } - &:hover, - &:focus-within { - position: relative; // always show label, even with collapsed sidebar - z-index: 100; - - a, label { + span.lbl { + flex-grow: 1; + // wordbreak too late in IE 10 + @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { width: 100%; - background-color: transparent; - border: solid 0.1em var(--color-glow-primary); - text-decoration: none; - color: var(--color-glow-primary); - filter: var(--filter-glow-primary); - transition: var(--transition-glow); - - - span.ico { - &:after { - background-color: currentColor; - } - - strong { - border-color: inherit; - } - - svg { - path { - fill: currentColor; - } - } - } + box-sizing: border-box; + padding-right: 13px; } - } span.ico { - position: relative; - display: table-cell; - width: (@menu-margin - .1); - min-width: (@menu-margin - .1); + .flex(0 0 auto); + + width: @menu-margin; height: @icon-size; + border-right: 1px solid @ini_nav_menu_color; text-align: center; - vertical-align: middle; + margin-right: 4%; color: inherit; - &::after { - @border-height: 1.5rem; - - content: ''; - position: absolute; - right: 0; - top: 50%; - bottom: auto; - height: @border-height; - width: 1px; - background-color: currentColor; - margin-top: -(@border-height / 2); - - // wordbreak too late in IE 10 - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - top: 0; - bottom: .5rem; - height: 100%; - margin: 0; - } - } - // simple fake icon strong { display: inline-block; - width: @icon-size * 0.98; - height: @icon-size * 0.98; - border: 2px solid currentColor; - border-top-right-radius: 50%; - border-bottom-left-radius: 50%; - color: inherit; font-size: @icon-size * 0.5; + width: @icon-size * 0.9; + height: @icon-size * 0.9; line-height: @icon-size * 0.9; + margin: @icon-size * 0.05; vertical-align: baseline; text-align: center; - margin: @icon-size * 0.05; - padding: 0 .05em .05em; + color: inherit; + border: 2px solid @ini_nav_menu_color; + border-top-right-radius: 50%; + border-bottom-left-radius: 50%; + transition: @transition border-color; } // real icon @@ -253,43 +163,99 @@ height: @icon-size; path { - fill: currentColor; + fill: @ini_nav_menu_color; transition: @transition all; } } } - span.lbl { - display: table-cell; - font-size: inherit; - padding-left: .5rem; + &:hover, + &:focus, + &:active { + background-color: @ini_nav_menu_hover_bg; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_color; + text-decoration: none; + + span.ico { + border-color: inherit; + + strong { + border-color: inherit; + } + + svg { + path { + fill: @ini_nav_menu_hover_color; + } + } + } } } - /* + + + + + the panel (hidden by default) + + + + + */ + // without wrapping UL + nav > a.nav { + margin-left: -3.5rem; + @media @screen_md-lg { + margin-left: -2.5rem; + } + } + + +/* + + + + + active + + + + + */ + span.curid a { + font-weight: bold; + } + + +/* + + + + + the panel (hidden by default) + + + + + */ div.nav-panel { display: none; margin-top: .5rem; - margin-left: @margin-small; ul { margin-bottom: 1rem; ul { margin-bottom: 0; - margin-left: 16px; } } - - ul.toollist li { - margin-left: 0; - } } } + +/* + + + + + + wide page content border-bottom between a.nav (short width) + + + + + +.wide-content { + #dokuwiki__aside { + a.nav { + position: relative; + + &::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + height: 1px; + border-bottom: solid 1px @ini_border; + } + + &:hover, + &:focus, + &:active { + &::after { + display: none; + } + } + } + } +} */ + + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ + @media @screen_min-xlg { #dokuwiki__aside { nav { @@ -310,51 +276,34 @@ } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1440px */ -@media @screen_max-xlg { - #dokuwiki__aside { - div.nav { - a { - margin-left: 0; - } - } - } -} /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1023px */ + @media @screen_max-md { - #dokuwiki__aside { - div.nav { - a { - margin-left: 0; + // show when toggled + body.show-mobile-sidebar { + .search.main-sidebar { + display: block !important; + position: relative; + + form { + margin-bottom: 1rem; + + .no { + display: block; + } } } - } - body.show-mobile-sidebar { #dokuwiki__aside { - display: block !important; - position: absolute; - left: 1.25rem; // left margin of content container - box-shadow: @box-shadow-right-bottom; - min-width: 45%; - max-width: 90%; - height: auto; - background: var(--color-background); - > nav { position: relative; + z-index: 2; &:first-child { margin-top: 1.2rem; } - - a, - label { - font-size: @font-size-small; - } } a.nav { @@ -363,44 +312,28 @@ border-left-width: 0; } - div.nav-panel, + .nav-panel, a.nav { - margin-top: 0; padding-right: .8em; } } } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 768px */ -@media @screen_max-xs { - body.show-mobile-sidebar { - .page-wrapper > .tools { - top: 2.5rem; - } - - #dokuwiki__aside { - left: 1.25rem; - right: 1.25rem; - width: auto; - max-width: 100%; - margin-top: -1rem; - } - } -} /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 480px */ -@media @screen_max-xxs { - body.show-mobile-sidebar { - #dokuwiki__aside { - left: 4px; - right: 4px; +/* max-width: 1439px */ - > nav { - a { - font-size: @font-size-default; +@media @screen_max-xlg { + #dokuwiki__aside { + nav { + li:not([class]), + .li { + font-size: @font-size-default; + + * { + font-size: inherit; + font-weight: inherit; } } } diff --git a/css/area_main-sidebar-search.less b/css/area_main-sidebar-search.less index a14fbc6..eeef1b3 100644 --- a/css/area_main-sidebar-search.less +++ b/css/area_main-sidebar-search.less @@ -1,5 +1,7 @@ /** * This file provides the design styles for the quick search. + * + * @author Jana Deutschlaender */ .search.main-sidebar { @@ -13,7 +15,9 @@ p.toggleSearch a, button[type="submit"] { + .fontello(); .hide-text-show-before(); + .icon-search(); position: relative; width: @icon-size; @@ -24,65 +28,60 @@ border: solid 1px transparent; padding: 0; transition: @transition color, @transition background-color, @transition border-color; - display: flex; - align-items: center; &:hover, &:focus, &:active { - .fnActiveButton(); + min-height: @icon-size; + background-color: @ini_button_color; + border: solid 1px @ini_button_background; - &::after{ - background-color: var(--color-glow-primary); + &::after { + background-color: @ini_button_background; } } &::before { - width: @icon-size; - height: 0.8em; + width: 100%; + color: inherit; font-size: @icon-search_font-size; text-align: center; margin: 0; - color: var(--color-foreground); - content: ''; - display: block; - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - background-color: currentColor; - - - mask-image: url('img/search.svg'); } } p.toggleSearch { display: none; + margin: -2px 0 0; // reverse transparent border and box-sizing of a child padding: 0; + @media @screen_max-xxlg { + margin-top: -1px; + } + a { min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */ width: @main-ico-dummy; - border-radius: 0.5rem 0 0 0.5rem; - border-right: none; - background-color: var(--color-shade-1); - color: var(--color-foreground); + border-radius: @fix_border-radius; + color: @ini_nav_menu_color; text-decoration: none; box-sizing: border-box; &::before { - width: 100%; + position: absolute; + top: 50%; + left: 0; color: inherit; text-align: center; + margin-top: -(@icon-search_font-size / 2); } &:hover, &:focus, &:active { - border-right: none; - background-color: transparent; - border-color: var(--color-glow-primary); - color: var(--color-glow-primary); + background-color: @ini_nav_menu_hover_bg; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_color; } } } @@ -95,9 +94,21 @@ height: auto; min-height: (@icon-size - .2); color: @quicksearch-button-color; + + &:hover, + &:focus, + &:active { + top: 0; + bottom: 0; + min-height: @icon-size; + background-color: @ini_button_color; + border: solid 1px @ini_button_background; + color: @ini_button_background; + } } - /* + + + form + + + */ + +/* + + + form + + + */ form { position: relative; display: block; @@ -120,6 +131,7 @@ button[type="submit"] { border: solid 1px transparent; + border-right-color: @ini_border; margin-left: -(@icon-size); &::after { @@ -129,46 +141,36 @@ bottom: 15%; width: 1px; left: -1px; - background-color: var(--color-shade-4); + background-color: @ini_border; transition: @transition background-color; } } div.ajax_qsearch { box-shadow: none; - background-color: var(--color-shade-1); + background-color: #FFF; padding: 0; - z-index: 300; // otherwise hidden behind sidebar in mobile view - border: solid 0.1em var(--color-shade-4); - border-radius: 0.5rem; - > strong { - color: var(--color-foreground); - padding: 0.25rem 0.5rem; - border-bottom: solid 0.1em var(--color-shade-4); + strong, + ul li { + color: @quicksearch-button-color; + padding: .25rem .5rem; + + * { + color: inherit; + } } ul li { - color: var(--color-foreground); - - a { - display: block; - padding: 0.25rem 0.5rem; - overflow: hidden; - color: inherit; - text-overflow: ellipsis; - - &:hover, - &:focus, - &:active { - background-color: var(--color-shade-2); - } + &:nth-child(odd) { + background-color: @suggestion-zebra; } } } } - /* + + + + + suggestionlist + + + + + */ + +/* + + + + + suggestionlist + + + + + */ #qsearch__out { left: auto; top: auto; @@ -177,64 +179,33 @@ } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* min-width: 1024px */ -@media @screen_min-md { - - // wide page content - .wide-content { - .search.main-sidebar { - p.toggleSearch { - position: relative; - display: block; - float: left; - width: auto; - } - - form { - input { - border: 0 none; - } - - .no { - #qsearch__in { - width: 0; - padding: 0; - margin: 0; - } - - button[type="submit"] { - display: none; - } - } - } - } - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1023px */ -@media @screen_max-md { - - // show when toggled - body.show-mobile-sidebar { - #dokuwiki__aside { - padding: 0 1rem; - border-radius: 0.5rem; - } +/* + + + + + wide page content + + + + + */ +.wide-content { + .search.main-sidebar { p.toggleSearch { - display: none !important; + position: relative; + z-index: 1; + display: block; + float: left; + width: 100%; } - .search.main-sidebar { - display: block !important; - position: relative; - margin-left: -1px; - margin-right: -1px; + form { + input { + border: 0 none; + } - form { - margin-bottom: 1rem; + .no { + #qsearch__in { + width: 0; + padding: 0; + margin: 0; + } + + button[type="submit"] { + display: none; + } } } } diff --git a/css/area_main-sidebar-tabs.less b/css/area_main-sidebar-tabs.less deleted file mode 100644 index f2fdefd..0000000 --- a/css/area_main-sidebar-tabs.less +++ /dev/null @@ -1,33 +0,0 @@ -/** - * This file provides the design styles for tab list in sidebar - */ - -/* default view */ -#dokuwiki__aside ul.sidebar-tabs { - margin-top: 0; - margin-bottom: @nav-margin; - - border-bottom: 1px solid @ini_nav_menu_color; - - white-space: nowrap; - - li { - display: inline-block; - border: 1px solid @ini_nav_menu_color; - padding: 0.25em 0.5em; - margin-bottom: -1px; - margin-left: 0.5em; - border-top-right-radius: @fix_border-radius; - border-top-left-radius: @fix_border-radius; - - &.active { - border-bottom: 1px solid var(--color-background); - font-weight: bold; - } - } -} - -/* wide content view */ -.wide-content #dokuwiki__aside ul.sidebar-tabs { - visibility: hidden; -} diff --git a/css/area_msg.less b/css/area_msg.less index 8697293..6edc5c7 100644 --- a/css/area_msg.less +++ b/css/area_msg.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for message block + * + * @author Jana Deutschlaender */ + .msg-area { clear: both; padding-top: 1.6rem; @@ -15,65 +18,23 @@ } } +/* short fix: SPR-891 - Icons für Notifications in Message Area werden gekachelt */ div.success, div.error, div.info, div.notify { - display: block; - border: none; - border-left: solid 0.5rem var(--color-shade-4); - border-radius: 0.5rem; - padding: 1em; - background-image: none; - background-color: var(--color-shade-1); + background-repeat: no-repeat; + background-position: 8px 50%; + border: 1px solid #eeb; + font-size: 90%; + margin: 0 0 .5em; + padding: .4em; + padding-left: 32px; + overflow: hidden; + border-radius: @fix_border-radius; - &::before { - display: inline-block; - content: ""; - margin: 0.3em 0.2em 0 0; - width: 1em; - height: 1em; - mask-size: contain; - mask-position: center top; - mask-repeat: no-repeat; - background-color: currentColor; - vertical-align: top; - } - - &.success { - color: var(--color-success); - - &::before { - mask-image: url(img/tick_small.svg); - } - } - - &.error { - border-left-color: var(--color-error); - color: var(--color-foreground); - - &::before { - background-color: var(--color-error); - mask-image: url(img/power.svg); - } - } - - &.info { - color: var(--color-foreground); - - &::before { - mask-image: url(img/info.svg); - } - } - - &.notify { - border-left-color: var(--color-warning); - color: var(--color-foreground); - - &::before { - background-color: var(--color-warning); - mask-image: url(img/warning.svg); - } + * { + color: inherit; } a { diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less index 4200172..1c3818c 100755 --- a/css/area_nav-breadcrumb.less +++ b/css/area_nav-breadcrumb.less @@ -1,26 +1,37 @@ /** * This file provides the design styles for the breadcrumb + * + * @author Jana Deutschlaender */ + .breadcrumbs { position: relative; min-height: @page-header_height; box-sizing: border-box; - background-color: var(--color-background); - border-bottom: 1px solid var(--color-shade-4); + background-color: @ini_background; + border-bottom: 1px solid @ini_border_light; padding: 1rem 1.8rem .2rem; + @media @screen_max-md { + background-color: @ini_background_page_header; + } + @media @screen_max-xs { padding-left: @margin-small; padding-right: .75rem; } + @media @screen_xs-lg { + background-color: @ini_background; + } + > p { font-size: @font-size-small; margin: 0; @media @screen_max-xs{ - width: 0; + width: 1px; position: relative; overflow: hidden; height: 1.6rem; @@ -50,16 +61,14 @@ min-width: 1.9em; width: auto; box-sizing: border-box; - background-color: var(--color-shade-1); - border: solid .1em transparent; - border-radius: 0.5rem; + border: solid 1px transparent; + border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius vertical-align: middle; text-decoration: none; margin-top: -.2em; - transition: var(--transition-glow); + transition: @transition border-color; &:before { - color: var(--color-foreground); font-size: @font-size-default + (@font-scale-factor * 2); margin-top: .17rem; } @@ -67,14 +76,7 @@ &:hover, &:focus, &:active { - &:before { - color: var(--color-glow-primary); - } - - background-color: transparent; - border-color: var(--color-glow-primary); - color: var(--color-glow-primary); - filter: var(--filter-glow-primary); + border-color: @ini_existing; } } } diff --git a/css/area_nav-direct.less b/css/area_nav-direct.less index 62bbe63..5defc3b 100755 --- a/css/area_nav-direct.less +++ b/css/area_nav-direct.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for the direct / menu jump links. + * + * @author Jana Deutschlaender */ + .nav-direct { background-color: @nav_direct_background; margin-top: -1px; diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less index 1e16a28..211dea3 100755 --- a/css/area_nav-metabox.less +++ b/css/area_nav-metabox.less @@ -1,28 +1,26 @@ /** * This file provides the design styles for the metatabbox + * + * @author Jana Deutschlaender */ + #spr__meta-box { .display-flex(); .flex-direction(); .justify-content(flex-end); - clear: none; - display: block; position: relative; + z-index: 10; float: right; - - box-sizing: border-box; max-width: 40%; - padding-bottom: 0.5rem; - height: 4rem !important; - - color: var(--color-foreground); + margin-top: -(@page_padding-top); // reverse padding-top of .page container + margin-right: -1px; // >= 1024 @media @screen_min-md { height: @page-header_height; - border: 0 none; + border: 1px solid transparent; } // < 1024 @@ -31,34 +29,13 @@ top: .2rem; right: auto; float: none; + display: block; max-width: 100%; min-height: @page-header_height; height: auto; border: 0 none; } - &.sticky { - position: fixed; - top: 0; - - ul.meta-tabs > li > a { - border-top-color: var(--color-background); - border-bottom-color: var(--color-shade-4); - border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius; - - } - - .meta-content .tab-pane.active { - max-height: 80vh; - overflow: auto; - } - } - - + .msg-area + a { - clear: right; - margin-top: 20px; - } - .tab-container { display: table; @@ -75,7 +52,7 @@ } - /* + + + + + tab controls + + + + + */ +/* + + + + + tab controlls + + + + + */ ul.meta-tabs { list-style: none; line-height: 160%; @@ -121,23 +98,31 @@ position: relative; display: block; font-size: @font-size-small; - transition: var(--transition-glow); - background-color: var(--color-shade-1); - border: solid 0.1em transparent; - border-radius: 0.5rem; - color: var(--color-foreground); - padding: .25em; - margin-left: 0; + line-height: 1.42857143; + transition: @transition background-color, @transition border-color, @transition color; + + @media @screen_min-md { + background-color: @ini_background_site; + border: 1px solid @noopentasks-border; + border-bottom-color: @ini_background_site; + border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius + color: @ini_nav_menu_color; + margin-left: 4px; + padding: .3em 1rem .1em; + } @media @screen_max-md { top: 0; + border: 1px solid @ini_existing; + color: @ini_existing; margin-top: .2rem; + margin-left: 0; + padding: .2em .3rem; } * { cursor: pointer; color: inherit; - font-size: inherit; } .prefix { @@ -150,22 +135,44 @@ &:focus, &:active { text-decoration: none; - background-color: transparent; - border-color: var(--color-glow-secondary); - color: var(--color-glow-secondary); - filter: var(--filter-glow-secondary); + + @media @screen_min-md { + background-color: @ini_background; + border-color: @ini_existing; + color: @ini_existing; + } + + @media @screen_max-md { + background-color: @ini_existing; + border-color: @ini_background; + color: @ini_background; + } } } &.active { + z-index: 1; + > a { cursor: default; + background-color: @ini_background; + border-color: @ini_existing; + border-bottom-color: @ini_background; + color: @ini_existing; + + @media @screen_max-md { + background-color: @ini_existing; + border-bottom-color: @ini_existing; + border-radius: 0; + color: @ini_background; + } } } } } - /* + + + + + toggle content + + + + + */ + +/* + + + + + toggle content + + + + + */ .meta-content { margin-top: -1px; @@ -180,24 +187,24 @@ right: 0; display: none; width: 100%; - background-color: var(--color-shade-1); - border: solid .1em transparent; - border-radius: 0.5rem; + background-color: @ini_background; + border: 1px solid @ini_existing; @media @screen_min-xs { min-width: 20em; } @media @screen_min-md { - margin-top: 0.5rem; + border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius } &.active { display: block; + overflow: hidden; } a { - color: var(--color-foreground); + color: @ini_existing; } > div { @@ -215,12 +222,11 @@ ul { list-style: none; padding-left: 0; - } - li { - list-style-image: none; // overwrite universally styles - margin-left: 0; - padding-left: 1em; + li { + margin-left: 0; + padding-left: 1em; + } } } @@ -239,10 +245,8 @@ float: none; margin: 0; padding: .6rem .5rem .5rem .8rem; - background-color: transparent; - color: var(--color-foreground); - border: solid .1em var(--color-shade-4); - border-radius: 0.5rem; + background: transparent; + border: 0 none; h3 { display: none; @@ -276,7 +280,7 @@ width: 4px; height: 4px; overflow: hidden; - background-color: var(--color-shade-4); + background-color: @ini_existing; } } } @@ -288,113 +292,8 @@ } } - /* + + + + + tab issues + + + + + */ - #spr__tab-issues { - ul.mmissuelist { - padding-left: 0; - margin-top: 1rem; - - li { - &.noissue { - font-size: @font-size-small; - list-style-type: none; - margin-left: 0; - - .li { - font-size: @font-size-small; - margin-left: .5rem; - } - } - - a { - display: inline-block; - } - } - - img { - vertical-align: bottom; - margin-right: .3rem; - } - - .mm__status { - padding-left: .3rem; - padding-right: .3rem; - } - - form { - vertical-align: text-top; - } - } - } - - /* + + + + + tab issues + + + + + */ - /* see plugins/magic-matcher.less */ - #spr__tab-issues { - ul.mmissuelist { - padding-left: 0; - margin-top: .5rem; - margin-bottom: .6rem; - - li { - list-style-type: none; - margin-top: .3rem; - margin-left: .5rem; - - &.noissue { - list-style-type: none; - margin-left: 0; - } - } - - a { - display: inline-block; - font-size: @font-size-small; - - * { - font-size: inherit; - } - } - - img { - vertical-align: bottom; - margin-right: .3rem; - } - - .mm__status { - display: inline-block; - text-decoration: none; - padding-left: .3rem; - padding-right: .3rem; - } - - form { - vertical-align: text-top; - - button { - background: @ini_button_background; - border-color: @ini_button_background; - color: @ini_button_color; - font-size: @font-size-small; - padding: .2em .3em; - - &[name="removeIssue"] { - min-width: 20px; - font-size: .94rem; - font-weight: bold; - line-height: 95%; - text-align: center; - padding: 0 .1rem .1rem; - margin-left: .5rem; - } - - &:hover, - &:focus, - &:active { - background: @ini_button_color; - color: @ini_button_background; - } - } - } - } + + .msg-area + a { + clear: right; + margin-top: 20px; } } diff --git a/css/area_nav-page-attributes.less b/css/area_nav-page-attributes.less index 2d24c75..b7ab433 100644 --- a/css/area_nav-page-attributes.less +++ b/css/area_nav-page-attributes.less @@ -1,54 +1,75 @@ /** * Page Attribute Icons in the breadcrumb bar */ + + +/* + + + + + icons in breadcrumb area + + + + + */ + .page-attributes { list-style: none; float: right; - margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed + display: inline-block; + max-width: 30%; + margin: -.45em 0 0; padding: 0; - display: flex; - gap: 0.5rem; + + @media @screen_max-xs { + max-width: 90%; + } > li { - margin: 0; - padding: 0; - border: 1px solid @wikiicons-border; - border-radius: @ini_default_border_radius; - position: relative; - display: flex; - align-items: center; - justify-content: center; - transition: @transition background-color, @transition border-color, @transition color; - - // override any plugin element styles - * { - margin: 0; - padding: 0; - line-height: normal; - display: block; - } - - // number badge + .btn-usertools-wrapper(); // uniform li .btn-usertools-num(); - // icon - svg { - height: 1.5em; - width: 1.5em; + position: relative; + float: left; + display: block; + width: auto; + min-height: @toggle-size; + text-align: center; + margin: 0 .25rem; - path { - fill: @ini_nav_menu_color; + strong { + 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; + + &:hover, + &:focus, + &:active { + background-color: @ini_nav_menu_hover_color; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; + + span { + fill: @ini_nav_menu_hover_bg; + color: @ini_nav_menu_hover_bg; + } } } - // adjust colors on hover - &:hover { - background-color: @ini_nav_menu_hover_color; - border-color: @ini_nav_menu_hover_color; + .prefix { + .btn-prefix(.26rem); + .icon-clipboard(); - svg path { - fill: @ini_nav_menu_hover_bg; - } + display: block; + font-size: 1.2rem; + line-height: 1; + } + + .num { + top: -.6em; } } } diff --git a/css/area_nav-pagetools.less b/css/area_nav-pagetools.less index 7172ae1..d86af60 100755 --- a/css/area_nav-pagetools.less +++ b/css/area_nav-pagetools.less @@ -1,5 +1,7 @@ /** * This file provides the design styles for the page specific tool bar. + * + * @author Jana Deutschlaender */ /* @@ -28,15 +30,8 @@ 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; + z-index: 100; @media @screen_min-md { right: -2.5rem; @@ -46,40 +41,24 @@ nav#dokuwiki__pagetools { 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; + @page-tools_svg-size: 25px; + @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2; + + * { + font-size: @font-size-default; + } 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; + .fontello-double(); position: relative; - line-height: 20px; + height: auto; + min-height: @toolbox-size; // for nav:hover + width: @toolbox-size; // for nav:hover font-size: @font-size-default; - padding: 2px 0 2px 2px; + padding: 2px @toolbox-size 2px 2px; @media @screen_min-md { color: @ini_nav_menu_color; @@ -89,6 +68,10 @@ nav#dokuwiki__pagetools { color: @ini_existing; } + * { + color: inherit; + } + &::before { display: none; } @@ -99,25 +82,6 @@ nav#dokuwiki__pagetools { background-color: transparent; } - &:focus { - box-shadow: none; - background-image: none; - color: var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); - - span { - position: relative; - display: inline; - width: auto; - height: auto; - } - - svg { - fill: var(--color-glow-primary); - } - } - span { .sr-only(); @@ -132,7 +96,14 @@ nav#dokuwiki__pagetools { vertical-align: middle; border: solid 1px transparent; margin: @page-tools_svg-space; - fill: var(--color-foreground); + + @media @screen_min-md { + fill: @ini_nav_menu_color; + } + + @media @screen_max-md { + fill: @ini_existing; + } } &.top { @@ -145,37 +116,33 @@ nav#dokuwiki__pagetools { &:hover { ul { box-shadow: @box-shadow; // @box-shadow-offset; - background-color: var(--color-shade-1); - border-color: var(--color-shade-4); - border-radius: 0.5rem; + background-color: @ini_background; + border-color: @wikiicons-border; li { - color: var(--color-foreground); + color: @ini_existing; a { box-shadow: none; background-image: none; border-color: transparent; color: inherit; + padding: 2px 0 2px 2px; svg { border: solid 1px transparent; border-radius: @ini_default_border_radius; - fill: var(--color-foreground); + fill: @ini_existing; transition: @transition background-color, @transition border-color, @transition fill; } &:hover, &:focus, &:active { - color: var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); - svg { - background-color: transparent; - border: none; - fill: var(--color-glow-primary); + background-color: @ini_existing; + border-color: @ini_existing; + fill: @ini_background; } } diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less index 2762329..26f5a1a 100755 --- a/css/area_nav-usertools.less +++ b/css/area_nav-usertools.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for the direct / menu jump links. + * + * @author Jana Deutschlaender */ + #dokuwiki__usertools.nav-usertools { @media @screen_min-md { right: 1.25rem; @@ -23,43 +26,30 @@ } } - /* + + + + + icon list + + + + + */ + +/* + + + + + icon list + + + + + */ ul { float: right; padding: 0; margin: (@very-small-spacing * 2) -.25rem 0 0; - @media @screen_max-md { - margin-right: .5rem; - } - - @media @screen_max-xxs { - margin-right: -.3rem; - } - 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; } - @media @screen_max-xxs { - margin-bottom: (@headericons-margin-xxs - .2); - display: none; - } - > span, > a { display: block; width: auto; - min-width: (@toggle-size + .25); min-height: @toggle-size; overflow: hidden; border: 1px solid @wikiicons-border; @@ -70,26 +60,55 @@ @media @screen_md-xlg { padding-top: .14rem; } - } - /* !!! &.user-task FIND in plugins/do_tasks.less !!! */ - &.user { - position: relative; - display: table-cell; - background-color: var(--color-shade-1); - border: solid 1px var(--color-shade-2); - border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius - color: var(--color-foreground); - padding-right: .3rem; + @media @screen_max-xxlg { + min-height: 28px; + } @media @screen_max-md { min-height: @toggle-size; } + @media @screen_only-lg { + min-width: 2rem; + } + } + + &.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 + 1); // 1.75rem + 1 + (button login/out margin-right) + right: (@toggle-size + @headericons-margin-xxs); overflow: hidden; white-space: nowrap; margin: -1px 0 0; @@ -97,7 +116,6 @@ @media @screen_max-xxs { left: -10px; - right: 0; width: auto; } @@ -106,37 +124,40 @@ .align-items(); position: relative; + min-height: 26px; height: 1rem; // for IE11 overflow: visible; - background: var(--color-shade-1); // for removing bg-image + background: @ini_nav_menu_hover_bg; // for removing bg-image border: 0 none; - color: var(--color-foreground); + 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 { - min-height: (@toggle-size - .1); - margin-top: -.4rem; + margin-top: -(@space-min-xxlg); } @media @screen_max-xxlg { - min-height: (@toggle-size - .15); - margin-top: -.35rem; + 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: -.35rem; + margin-top: -(@space-max-md); } - @media @screen_max-sm { - margin-top: -.35rem; - } - - @media @screen_max-xs { - margin-top: -.4rem; + @media @screen_max-xxs { + min-height: (@toggle-size - .15); } &::before { @@ -147,7 +168,7 @@ right: -1px; width: auto; opacity: 0; - border: solid 1px var(--color-shade-2); + 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; @@ -156,15 +177,12 @@ &:hover, &:focus, &:active { - background-color: transparent; - color: var(--color-glow-secondary); - filter: var(--filter-glow-secondary); - transition: var(--transition-glow); + background-color: @ini_nav_menu_hover_color; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; &::before { opacity: 1; - filter: var(--filter-glow-secondary); - border-color: var(--color-glow-secondary); } bdi, @@ -189,61 +207,43 @@ &::before { position: absolute; - top: 2px; left: -2px; - font-size: @font-size-default + (@font-scale-factor * 4); + 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 } // li - /* + + + icons + + + */ - .menuitem, button { - padding: 2px 0 0 2px; - min-height: @toggle-size; // overrides button[type="submit"] styles - background-color: var(--color-shade-1); - color: var(--color-foreground); - border: solid 1px var(--color-shade-2); // overrides button[type="submit"] styles - .btn-hover(); - &:hover, - &:active, - &:focus { - background-color: transparent; - border-color: var(--color-glow-secondary); - color: var(--color-glow-secondary); - filter: var(--filter-glow-secondary); - } - - &:hover svg, - &:active svg, - &:focus svg { - transition: @transition fill; - fill: var(--color-glow-secondary); - } - - svg { - fill: var(--color-shade-1); - height: @font-size-default + (@font-scale-factor * 4); - } - - span { - display: none; - } - } - - a { // Pre-Greebo backwards compatibility, remove after transitioning to Greebo +/* + + + icons + + + */ + a { .fontello(); .hide-text-show-before(); .btn-hover(); - background-color: var(--color-shade-1); cursor: pointer; position: relative; line-height: 1; text-decoration: none; + @media @screen_md-xlg { + min-width: 2rem; + } + &::before { .center-middle(); @@ -281,72 +281,4 @@ } } // a } // ul -} // nav-usertools - -/* + + + + + layout option compact + + + + + */ -.header-compact { - #dokuwiki__usertools.nav-usertools { - - // mobile - @media @screen_max-md { - left: 6rem; - - ul { - overflow: hidden; - - li.user { - color: var(--color-background); - - bdi { - position: absolute; - width: 0; - padding: 0; - text-indent: -10000px; - - &:before { - transition: @transition background-color; - background-color: var(--color-shade-1); - color: var(--color-foreground); - text-indent: 0; - } - } - - > a { - padding: 0 .2em; - color: @ini_nav_menu_hover_bg; - - bdi { - &:before { - background-color: var(--color-shade-1); - color: var(--color-foreground); - } - } - - &:hover { - color: var(--color-glow-secondary); - - bdi { - &:before { - background-color: transparent; - color: var(--color-glow-secondary); - } - } - } - } - - bdi + bdi { - display: none; - } - } - } - } - - @media @screen_max-sm { - ul li { - position: static; - float: right; - top: 0; right: 0; - } - } - } -} +} // nav-usertools \ No newline at end of file diff --git a/css/area_recent.less b/css/area_recent.less index 9583da8..0722639 100644 --- a/css/area_recent.less +++ b/css/area_recent.less @@ -1,23 +1,24 @@ /** * This file provides the design styles for page revisions + * + * @author Jana Deutschlaender */ + .dokuwiki { - /* + + + + + list of changes + + + + + */ +/* + + + + + list of changes + + + + + */ form.changes { li { .sizechange { color: @color-editBox; &.positive { - background-color: var(--color-success); - color: var(--color-background); + background-color: #cfc; } &.negative { - background-color: var(--color-error); - color: var(--color-foreground); + background-color: #fdd; } } } @@ -58,7 +59,8 @@ } } - /* + + + + + view of differents + + + + + */ + +/* + + + + + view of differents + + + + + */ a.difflink { color: @ini_existing; @@ -69,10 +71,11 @@ .diffnav { a { - background-color: var(--color-background); - border: solid 1px var(--color-background); - border-radius: 0.5rem; - color: var(--color-foreground); + background-color: @ini_background_site; + border: solid 1px @ini_background_site; + border-radius: @ini_default_border_radius; + color: @ini_nav_menu_color; + transition: @transition background-color, @transition color, @transition border-color; &::before { background-color: inherit; @@ -83,11 +86,9 @@ &:hover, &:focus, &:active { - background-color: transparent; - border-color: var(--color-glow-primary); - color: var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); + background-color: @ini_nav_menu_color; + border: solid 1px @ini_nav_menu_color; + color: @ini_background_site; &::before { background-color: inherit; @@ -98,8 +99,10 @@ } table.diff { - background-color: var(--color-background); - border: none; + background-color: #fff; + border: solid 1px #fff; + border-top-width: 10px; + border-bottom-width: 10px; &.diff_inline { border-top-width: 0; @@ -111,8 +114,8 @@ } th { - background-color: var(--color-background); - color: var(--color-foreground); + background-color: @ini_background; + color: @ini_text; padding-top: 10px; padding-bottom: 10px; @@ -122,33 +125,30 @@ } td { - background-color: transparent; - color: var(--color-text-1); - &.diff-blockheader { - background-color: transparent; - color: var(--color-foreground); + background-color: #cfc; + color: @color-editBox; } &.diff-context { - background-color: transparent; - color: var(--color-text-1); + background-color: #eee; + color: @color-editBox; } } .diff-addedline { - background-color: var(--color-success-highlight); - color: var(--color-foreground); + background-color: #cfc; + color: @color-editBox; strong { background-color: transparent; - color: var(--color-success) !important; + color: #f00; } } .diff-deletedline { - background-color: var(--color-error-highlight); - color: var(--color-foreground); + background-color: #fdd; + color: @color-editBox; * { color: inherit; @@ -156,12 +156,8 @@ strong { background-color: transparent; - color: var(--color-error) !important; + color: #f00; } } - - .diff-lineheader { - background-color: transparent; - } } } diff --git a/css/area_search.less b/css/area_search.less index 503570e..9fddb00 100644 --- a/css/area_search.less +++ b/css/area_search.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for the search results + * + * @author Jana Deutschlaender */ + /* search hit in normal text */ .dokuwiki .search_hit { background-color: @ini_highlight; diff --git a/css/area_tabs.less b/css/area_tabs.less index 8b98f02..6574645 100644 --- a/css/area_tabs.less +++ b/css/area_tabs.less @@ -2,28 +2,22 @@ * This file provides styles for tab boxes */ + /* + + + + + tabs + + + + + */ + #dokuwiki__content { ul.tabs { li:not([class~="active"]) { strong, a { + color: @ini_text_neu; transition: @transition background-color, @transition color; } - a { - background-color: var(--color-shade-2); - color: var(--color-accent-1); - } - strong { - background-color: var(--color-shade-3); - color: inherit; - } - a:hover, a:focus, a:active { - color: var(--color-accent-3); + color: @ini_text; } } } diff --git a/css/area_togglelink.less b/css/area_togglelink.less index 9a12b47..816799e 100755 --- a/css/area_togglelink.less +++ b/css/area_togglelink.less @@ -1,51 +1,63 @@ /** * This file provides the design styles for the sidebar (navmain). + * + * @author Jana Deutschlaender */ + .togglelink { &.page_main-content { position: absolute; top: 0; bottom: -1px; width: 2rem; - left: -(@margin-default + 0.25rem); + left: -(@margin-default); + z-index: 1; @media @screen_max-md { display: none; } a { - position: absolute; - inset: 0; + .fontello-double(); + .icon-right-bold(); + .icon-left-bold(); + + .display-flex(); + .flex-direction(); + .justify-content(); width: @margin-default; height: 100%; - background-color: transparent; - border: solid 1px var(--color-shade-4); - border-right-style: none; - border-radius: 0.5rem 0 0 0.5rem; - color: var(--color-shade-4); + background-color: @ini_button_background; + border: solid 1px @ini_button_background; + border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius + color: @ini_button_color; text-decoration: none; transition: @transition color, @transition background-color, @transition border-color; - &::before { - content: ''; - display: block; - position: absolute; - inset: 0.3rem; - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - background-color: currentColor; - mask-image: url('img/arrow_left.svg'); + &::before, + &::after { + width: 100%; + opacity: .6; + font-size: 1rem; + line-height: 1; + text-align: center; + margin: 0; + transition: @transition opacity; + } + &::before { + opacity: 1; + font-size: 1.25rem; } &:hover, &:focus, &:active { - border-color: var(--color-glow-primary); - color: var(--color-glow-primary); + background-color: @ini_button_color; + border-color: @ini_button_background; + color: @ini_button_background; text-decoration: none; * { @@ -53,24 +65,43 @@ text-decoration: none; } - filter: var(--filter-glow-primary); - transition: var(--transition-glow); - + &::after { + opacity: 0; + } } } - /* + + + toggle out + + + */ - +/* + + + toggle out + + + */ .wide-content & { - left: 0; + left: -1px; a { - border-radius: 0 0.5rem 0.5rem 0; - border-style: solid; - border-left-style: none; + background-color: @ini_button_background; + border-color: @ini_button_background; + border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius &::before { - mask-image: url('img/arrow_right.svg'); + opacity: .6; + font-size: 1rem; + } + + &::after { + opacity: 1; + font-size: 1.25rem; + } + + &:hover, + &:focus, + &:active { + background-color: @ini_button_color; + + &::before { + opacity: 0; + } + + &::after { + opacity: 1; + } } } } diff --git a/css/base.less b/css/base.less index 5b50fb6..e757f62 100755 --- a/css/base.less +++ b/css/base.less @@ -1,17 +1,20 @@ /** - * This file provides the basic/reset styles. + * This file provides the basic vars and reset styles. + * + * @author Jana Deutschlaender */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* global vars */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@font_family_screen: "Athiti", ui-sans, sans-serif; -@font_family_print: "Athiti", ui-sans, sans-serif; -@nav_direct_background: var(--color-background); +@font_family_screen: arial, sans-serif; +@font_family_print: "Times New Roman", serif; + +@nav_direct_background: @ini_background; @nav_direct_color: @ini_existing; -@background_darker: rgba(230,230,230, .2); @ini_sidebar_width: (100 - @ini_site_width) - 4; @height-context-bar: 50px; @@ -19,7 +22,6 @@ @margin-small: 1rem; @margin-default: 2rem; @margin-big: 3.07rem; -@nav-margin: 1.3rem; @small-spacing: .3rem; @very-small-spacing: .2rem; @@ -35,10 +37,12 @@ @box-shadow-right-bottom: .1em .3rem .5em rgba(153,153,153,.5); @box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor -/* + + + for programmers customizing + + + */ -@fix_border-radius: 0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg -@toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle +/* + + + for programmers customizing + + + */ + +@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg + +@toggle-showsidebar_width: 3.07rem; // shown sidebar after toggle @headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons @@ -51,29 +55,35 @@ @code-background: #F6F6F6; /* code, pre, samp, kbd */ + /* icons */ @noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude */ @noopentasks-border: #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */ @noopentasks-color: #666; /* metabox tabs + num in icons + code, pre, samp, kbd */ @wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */ + + /* navigation left */ @menu-margin-lg: 1.3rem; @quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */ @suggestion-zebra: #EEE; + /* edit mode */ @highlight-odd-ini_text: fade(@ini_background, 95%); @highlight-even-ini_text: fade(@ini_text, 5%); -@color-editBox: var(--color-foreground); // editmode for tables, revision states +@color-editBox: #252525; // editmode for tables, revision states + //@nolinkedicon-ini_background: fade(@ini_background_site, 10%); //@opacity-ini_nav_menu_color: fade(@ini_nav_menu_color, 40%); -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* fonts */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @font-size-very-small: .73rem; @font-size-small: .88rem; @font-size-default: 1rem; @@ -96,9 +106,10 @@ @font-size-head2: @font-size-default + (@font-scale-factor * 7); @font-size-head1: @font-size-default + (@font-scale-factor * 9); -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* breakpoints */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @break-min-xxs: 480; @break-max-xxs: (@break-min-xxs - 1); @@ -120,9 +131,10 @@ @break-min-xxlg: 1600; @break-max-xxlg: (@break-min-xxlg - 1); -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* media queries for breakpoints */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)"; @screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)"; @@ -150,9 +162,10 @@ @screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)"; @screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)"; -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* col width */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @c12: 100%; @c11: 91.66666667%; @c10: 83.33333333%; @@ -169,104 +182,10 @@ @grid-columns: 12; - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* fonts */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -@font-face { - font-family: "Athiti"; - font-weight: 700; - src: url("fonts/athiti/Athiti-Bold.woff2") format("woff2"); -} - -@font-face { - font-family: "Athiti"; - font-weight: 600; - src: url("fonts/athiti/Athiti-SemiBold.woff2") format("woff2"); -} - -@font-face { - font-family: "Athiti"; - font-weight: 500; - src: url("fonts/athiti/Athiti-Medium.woff2") format("woff2"); -} - -@font-face { - font-family: "Athiti"; - font-weight: 400; - src: url("fonts/athiti/Athiti-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Athiti"; - font-weight: 300; - src: url("fonts/athiti/Athiti-Light.woff2") format("woff2"); -} - -@font-face { - font-family: "Athiti"; - font-weight: 200; - src: url("fonts/athiti/Athiti-ExtraLight.woff2") format("woff2"); -} - -@font-face { - font-family: "Departure Mono"; - src: url("fonts/departuremono/DepartureMono-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 100; - src: url("fonts/argonglow/ArgonGlow-Thin.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 200; - src: url("fonts/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 300; - src: url("fonts/argonglow/ArgonGlow-Light.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 400; - src: url("fonts/argonglow/ArgonGlow-Regular.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 500; - src: url("fonts/argonglow/ArgonGlow-Medium.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 600; - src: url("fonts/argonglow/ArgonGlow-SemiBold.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - font-weight: 700; - src: url("fonts/argonglow/ArgonGlow-Bold.woff2") format("woff2"); -} - -@font-face { - font-family: "Argon Glow"; - src: url("fonts/argonglow/ArgonGlow-VariableVF.woff2") format("woff2"); - font-weight: 100 900; -} - - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* all media */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + html, body { .reset(); @@ -278,6 +197,18 @@ header, .elementsReset(); } +div, span, object, +h1, h2, h3, h4, h5, h6, p, blockquote, +a, abbr, em,acronym, img, strong, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +input, select, option, textarea, button { + font-size: 1rem; + line-height: 100%; +} + + ol, ul { list-style: none outside none; @@ -338,9 +269,10 @@ nav > ul { } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + +/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* css behaviour */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .sr-out { .sr-out(); } @@ -382,303 +314,12 @@ nav > ul { } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* variables */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -:root { - --color-neutral-50: #F2F0F5; - --color-neutral-100: #D1C6E0; - --color-neutral-200: #B2A0CB; - --color-neutral-300: #957EB5; - --color-neutral-400: #7A60A0; - --color-neutral-500: #61468B; - --color-neutral-600: #4B3176; - --color-neutral-700: #371F60; - --color-neutral-800: #26114B; - --color-neutral-900: #180736; - --color-neutral-950: #0C011F; - --color-argon-50: #E1ABC9; - --color-argon-100: #DA87B5; - --color-argon-200: #D464A1; - --color-argon-300: #CD448F; - --color-argon-400: #C6257D; - --color-argon-500: #B0166F; - --color-argon-600: #9A0A61; - --color-argon-700: #830755; - --color-argon-800: #6D0449; - --color-argon-900: #56023C; - --color-argon-950: #3F012D; - --color-krypton-50: #B2D9EA; - --color-krypton-100: #8CC9E4; - --color-krypton-200: #69BADE; - --color-krypton-300: #4BADD8; - --color-krypton-400: #2493C2; - --color-krypton-500: #167FAC; - --color-krypton-600: #0A6C96; - --color-krypton-700: #075C81; - --color-krypton-800: #044C6B; - --color-krypton-900: #023C55; - --color-krypton-950: #012C3F; - --color-green-50: #C0F49A; - --color-green-100: #A7E57A; - --color-green-200: #8FD75D; - --color-green-300: #7AC843; - --color-green-400: #66B92D; - --color-green-500: #54AA18; - --color-green-600: #47990F; - --color-green-700: #397E0A; - --color-green-800: #2B6206; - --color-green-900: #1F4703; - --color-green-950: #122B01; - --color-red-50: #E6AFAF; - --color-red-100: #DD9090; - --color-red-200: #D57272; - --color-red-300: #CC5757; - --color-red-400: #C33D3D; - --color-red-500: #BB2626; - --color-red-600: #B21010; - --color-red-700: #950808; - --color-red-800: #780404; - --color-red-900: #5C0202; - --color-red-950: #3F0101; - - --color-white: #FFFFFF; - - --color-dark-foreground: var(--color-neutral-50); - --color-dark-background: var(--color-neutral-950); - --color-dark-shade-1: var(--color-neutral-900); - --color-dark-shade-2: var(--color-neutral-800); - --color-dark-shade-3: var(--color-neutral-700); - --color-dark-shade-4: var(--color-neutral-600); - --color-dark-text-1: var(--color-neutral-200); - --color-dark-text-2: var(--color-neutral-300); - --color-dark-text-3: var(--color-neutral-400); - --color-dark-text-4: var(--color-neutral-500); - --color-dark-primary: var(--color-argon-400); - --color-dark-secondary: var(--color-krypton-300); - --color-dark-error: var(--color-red-500); - --color-dark-error-highlight: var(--color-red-950); - --color-dark-success: var(--color-green-500); - --color-dark-success-highlight: var(--color-green-950); - --color-dark-warning: #efb100; - --color-dark-highlight: #efb10060; - --color-dark-accent-1: #60a5f9; - --color-dark-accent-2: #d381f7; - --color-dark-accent-3: #ff7975; - - --color-light-foreground: var(--color-neutral-950); - --color-light-background: var(--color-neutral-50); - --color-light-shade-1: var(--color-neutral-100); - --color-light-shade-2: var(--color-neutral-200); - --color-light-shade-3: var(--color-neutral-300); - --color-light-shade-4: var(--color-neutral-400); - --color-light-text-1: var(--color-neutral-800); - --color-light-text-2: var(--color-neutral-700); - --color-light-text-3: var(--color-neutral-600); - --color-light-text-4: var(--color-neutral-500); - --color-light-primary: var(--color-argon-600); - --color-light-secondary: var(--color-krypton-500); - --color-light-error: var(--color-red-600); - --color-light-error-highlight: var(--color-red-50); - --color-light-success: var(--color-green-600); - --color-light-success-highlight: var(--color-green-50); - --color-light-warning: #d08700; - --color-light-highlight: #d0870060; - --color-light-accent-1: #303EC0; - --color-light-accent-2: #6c366c; - --color-light-accent-3: #932f0a; - - --color-cmyk-primary: var(--color-dark-primary); - --color-cmyk-secondary: var(--color-dark-secondary); - - --text-xs: 0.75rem; - --text-sm: 0.875rem; - --text-base: 1rem; - --text-lg: 1.125rem; - --text-xl: 1.25rem; - --text-2xl: 1.5rem; - --text-3xl: 1.875rem; - --text-4xl: 2.25rem; - --text-5xl: 3rem; - - --container-3xs: 16rem; - --container-2xs: 18rem; - --container-xs: 20rem; - --container-sm: 24rem; - --container-md: 28rem; - --container-lg: 32rem; - --container-xl: 36rem; - --container-2xl: 42rem; - --container-3xl: 48rem; - --container-4xl: 56rem; - --container-5xl: 64rem; - --container-6xl: 72rem; - --container-7xl: 80rem; -} - -.fnButton { - border-radius: 0.5rem; - background-color: var(--color-shade-1); - transition: background-color 150ms; - color: var(--color-foreground); - font-size: 1.2em; - border: solid 0.1em var(--color-shade-1); - transition-property: filter, border-color; - transition-duration: 200ms; - transition-timing-function: ease-out; - - &:hover, &.active{ - .fnActiveButton(); - } -} - -.fnButtonSecondary { - &:hover, &.active{ - .fnActiveButtonSecondary(); - } -} - -.fnActiveButton { - background-color: transparent; - border: solid 0.1em var(--color-glow-primary); - text-decoration: none; - color: var(--color-glow-primary); - filter: var(--filter-glow-primary); - transition: var(--transition-glow); -} - -.fnActiveButtonSecondary { - background-color: transparent; - border: solid 0.1em var(--color-glow-secondary); - text-decoration: none; - color: var(--color-glow-secondary); - filter: var(--filter-glow-secondary); - transition: var(--transition-glow); -} - /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* screen only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @media screen { - - .dark { - - --color-foreground: var(--color-dark-foreground); - --color-background: var(--color-dark-background); - --color-shade-1: var(--color-dark-shade-1); - --color-shade-2: var(--color-dark-shade-2); - --color-shade-3: var(--color-dark-shade-3); - --color-shade-4: var(--color-dark-shade-4); - --color-text-1: var(--color-dark-text-1); - --color-text-2: var(--color-dark-text-2); - --color-text-3: var(--color-dark-text-3); - --color-text-4: var(--color-dark-text-4); - --color-primary: var(--color-dark-primary); - --color-secondary: var(--color-dark-secondary); - --color-error: var(--color-dark-error); - --color-error-highlight: var(--color-dark-error-highlight); - --color-success: var(--color-dark-success); - --color-success-highlight: var(--color-dark-success-highlight); - --color-warning: var(--color-dark-warning); - --color-highlight: var(--color-dark-highlight); - --color-accent-1: var(--color-dark-accent-1); - --color-accent-2: var(--color-dark-accent-2); - --color-accent-3: var(--color-dark-accent-3); - - --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary)); - --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary)); - --color-glow-primary: var(--color-white); - --color-glow-secondary: var(--color-white); - --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms, - border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms; - - @media (prefers-reduced-motion) { - --transition-glow: filter 150ms, border-color 150ms; - } - - .light-only { - display: none; - } - - .dark-only { - display: initial; - } - } - - .light { - --color-foreground: var(--color-light-foreground); - --color-background: var(--color-light-background); - --color-shade-1: var(--color-light-shade-1); - --color-shade-2: var(--color-light-shade-2); - --color-shade-3: var(--color-light-shade-3); - --color-shade-4: var(--color-light-shade-4); - --color-text-1: var(--color-light-text-1); - --color-text-2: var(--color-light-text-2); - --color-text-3: var(--color-light-text-3); - --color-text-4: var(--color-light-text-4); - --color-primary: var(--color-light-primary); - --color-secondary: var(--color-light-secondary); - --color-error: var(--color-light-error); - --color-error-highlight: var(--color-light-error-highlight); - --color-success: var(--color-light-success); - --color-success-highlight: var(--color-light-success-highlight); - --color-warning: var(--color-light-warning); - --color-highlight: var(--color-light-highlight); - --color-accent-1: var(--color-light-accent-1); - --color-accent-2: var(--color-light-accent-2); - --color-accent-3: var(--color-light-accent-3); - - --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400)); - --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400)); - --color-glow-primary: var(--color-argon-950); - --color-glow-secondary: var(--color-krypton-950); - --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms, - border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms; - - @media (prefers-reduced-motion) { - --transition-glow: filter 150ms, border-color 150ms; - } - - .light-only { - display: initial; - } - - .dark-only { - display: none; - } - } - - @media (prefers-color-scheme: dark) { - html { - .dark(); - - &:has(#themeLight:checked) { - .light(); - } - } - #themeToggleDark { - display: none !important; - } - } - - @media (prefers-color-scheme: light) { - html { - .light(); - - &:has(#themeDark:checked) { - .dark(); - } - } - #themeToggleLight { - display: none !important; - } - } - - - html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; @@ -707,28 +348,9 @@ nav > ul { display: none; } - a { - color: var(--color-accent-1); - text-decoration: underline; - - &:hover, - &:active, - &:focus { - color: var(--color-accent-3); - text-decoration: none; - } - - &:visited { - color: var(--color-accent-2); - text-decoration: underline; - - &:hover, - &:active, - &:focus { - color: var(--color-accent-3); - text-decoration: none; - } - } + a:active, + a:hover { + outline: 0; } abbr[title] { @@ -739,6 +361,22 @@ nav > ul { font-size: 80%; } + sub, + sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { + top: -0.5em; + } + + sub { + bottom: -0.25em; + } + svg:not(:root) { overflow: hidden; } @@ -756,7 +394,7 @@ nav > ul { kbd, pre, samp { - font-family: "Departure Mono", ui-monospace, monospace; + font-family: monospace, monospace; font-size: 1em; } @@ -825,13 +463,15 @@ nav > ul { html, body { font-family: @font_family_screen; - color: var(--color-foreground); + color: @ini_text; } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* print only */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @media print { body { font-size: 12pt; diff --git a/css/base_design.less b/css/base_design.less index 2dfc1f1..28155df 100755 --- a/css/base_design.less +++ b/css/base_design.less @@ -1,14 +1,18 @@ /** * This file provides the main design styles * across all template elements (typo, colors etc.) + * + * @author Jana Deutschlaender */ html, body { - background-color: var(--color-background); + background-color: @ini_background_site; } + /* highlight selected tool */ + .mode_admin a.action.admin, .mode_login a.action.login, .mode_register a.action.register, @@ -23,23 +27,10 @@ html, body { } .dokuwiki { - .tabs > ul li a, - ul.tabs li strong, - ul.tabs li a { - border-color: var(--color-shade-4); - } - ul.tabs::after { - border-color: var(--color-shade-4); - } - .page ol li, .page ul li, .aside ul li { - color: var(--color-foreground); - - .li { - color: var(--color-foreground); - } + color: @ini_text; } .pageId { @@ -54,7 +45,7 @@ html, body { font-size: @font-size-small; border: solid @ini_background_alt; border-width: 1px 1px 0; - background-color: var(--color-background); + background-color: @ini_background_site; color: @ini_text_alt; padding: .1em .35em; border-top-left-radius: 2px; @@ -68,7 +59,7 @@ html, body { clear: both; overflow: hidden; word-wrap: break-word; - background: var(--color-background); + background: @ini_background; color: inherit; padding: @page_padding-top @margin-default @margin-default; @@ -79,10 +70,6 @@ html, body { @media @screen_max-xs { padding-left: @margin-small; } - - @media @screen_max-xxs { - padding-right: @margin-small; - } } .content #dokuwiki__pagetools { @@ -97,7 +84,6 @@ html, body { } /* license note under edit window */ - div.license { font-size: @font-size-small; line-height: @line-height-default; @@ -167,24 +153,64 @@ h2 { font-size: @font-size-head2; margin: 0 0 @font-size-head2; padding-top: (@font-size-head2 / 2); + + .secedit + &, + div[class^="level"] + &, + .section_highlight &:first-child { + padding-top: 0; + } + + .section_highlight + & { + padding-top: (@font-size-head2 / 2); + } } h3 { font-size: @font-size-head3; margin: 0 0 @font-size-head3; padding-top: (@font-size-head3 / 2); + + .secedit + &, + div[class^="level"] + &, + .section_highlight &:first-child { + padding-top: 0; + } + + .section_highlight + & { + padding-top: (@font-size-head3 / 2); + } } h4 { font-size: @font-size-head4; margin: 0 0 @font-size-head4; padding-top: (@font-size-head4 / 2); + + .secedit + &, + div[class^="level"] + &, + .section_highlight &:first-child { + padding-top: 0; + } + + .section_highlight + & { + padding-top: (@font-size-head4 / 2); + } } h5 { font-size: @font-size-head5; margin: 0 0 @font-size-head5; padding-top: (@font-size-head5 / 2); + + .secedit + &, + div[class^="level"] + &, + .section_highlight &:first-child { + padding-top: 0; + } + + .section_highlight + & { + padding-top: (@font-size-head5 / 2); + } } h6 { @@ -192,6 +218,16 @@ h6 { font-weight: @font-weight-bold; margin: 0 0 @font-size-head6; padding-top: (@font-size-head6 / 2); + + .secedit + &, + div[class^="level"] + &, + .section_highlight &:first-child { + padding-top: 0; + } + + .section_highlight + & { + padding-top: (@font-size-head6 / 2); + } } p { @@ -306,7 +342,9 @@ small, } } -/* + + + lists + + + */ + +/*____________ lists ____________*/ + ul, ol { font-size: @font-size-default; @@ -384,15 +422,22 @@ ol ol ol ol ol { list-style-type: lower-roman; } -/* + + + tables + + + */ + +/*____________ tables ____________*/ + .dokuwiki { table.inline tr:hover { th { - background-color: var(--color-shade-3); + background-color: fade(@ini_background_alt, 50%); } td { - background-color: var(--color-shade-2); + background-color: fade(@ini_background_alt, 80%); + color: @ini_text_alt; + + *:not(button,a) { + color: @ini_text_alt; + } } } } @@ -401,7 +446,7 @@ table { border-collapse: collapse; empty-cells: show; border-spacing: 0; - border: 1px solid var(--color-shade-4); + border: 1px solid @ini_border; font-size: @font-size-default; line-height: 140%; } @@ -420,24 +465,36 @@ td { padding: .3em .5em; margin: 0; vertical-align: top; - border: 1px solid var(--color-shade-4); + border: 1px solid @ini_border; } th { font-weight: bold; - background-color: var(--color-shade-1); - color: var(--color-foreground); + background-color: @ini_background_alt; + color: @ini_text_alt; text-align: left; - - a { - color: @ini_link_alt; - } } [dir=rtl] th { text-align: right; } +a { + outline: none; + + &:link, + &:visited { + text-decoration: none; + color: @ini_link; // links to non wikipages (external links) + } + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } +} + img { display: inline-block; border-width: 0; @@ -463,7 +520,7 @@ button img { hr { border-top: solid @ini_border; - border-bottom: solid var(--color-background); + border-bottom: solid @ini_background_site; border-width: 1px 0; height: 0; text-align: center; @@ -491,13 +548,14 @@ pre, code, samp, kbd { - font-family: "Departure Mono", ui-monospace, monospace; + font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace; /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */ font-size: @font-size-default; direction: ltr; text-align: left; - background-color: var(--color-shade-1); - color: var(--color-foreground); + background-color: @code-background; + color: @noopentasks-color; + box-shadow: inset 0 0 .3em @noopentasks-border; border-radius: @fix_border-radius; padding-left: @small-spacing; padding-right: @small-spacing; @@ -510,11 +568,26 @@ kbd { span { color: inherit; } + + a { + &:link, + &:visited { + color: inherit; + text-decoration: underline; + } + + &:hover, + &:focus, + &:active { + text-decoration: none; + } + } } pre { overflow: auto; word-wrap: normal; + border: 1px solid @noopentasks-border; font-size: @font-size-default; line-height: 140%; padding: .7em 1em; diff --git a/css/base_fontello-icons.less b/css/base_fontello-icons.less index 2bd1a37..bb31646 100644 --- a/css/base_fontello-icons.less +++ b/css/base_fontello-icons.less @@ -1,8 +1,10 @@ /** * This file provides styles for web fonts and icon fonts - * (If you add new icons in the fontello set you have to add the icon class and associated character encoding here) + * + * @author Jana Deutschlaender */ + /* icon font */ .setIconFontFace('fontello','fontello'); @@ -10,7 +12,12 @@ .fontello(); } + /* + + + + + fontello codes + + + + + */ +/** + * If in the Fontello-Packet an icon is added, the code should be supplemented here: +*/ + .icon-emo-happy { &::before { content: '\e804'; } } /* '' */ .icon-emo-wink { &::before { content: '\e805'; } } /* '' */ .icon-emo-unhappy { &::before { content: '\e806'; } } /* '' */ @@ -87,6 +94,7 @@ /* + + + + + additional "after" for nav-pagetools + + + + + */ + .icon-pencil { &::before, &::after { content: '\e840'; } diff --git a/css/base_mixins.less b/css/base_mixins.less index e664bf3..e17ee37 100755 --- a/css/base_mixins.less +++ b/css/base_mixins.less @@ -1,10 +1,14 @@ /** * This file provides less mixins for all other style modules + * + * @author Jana Deutschlaender */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Fonts */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) { @font-face { font-family: @fontFamily; @@ -98,9 +102,11 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Screenreader / Hide */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .sr-out() { display: block; width: 1px; @@ -134,20 +140,19 @@ } } + /* + + + + + small icon-buttons (breadcrumb, page-header) + + + + + */ .btn-hover { - background-color: var(--color-shade-1); - border-color: var(--color-shade-2); - color: var(--color-foreground); - transition: var(--transition-glow); + background-color: @ini_nav_menu_hover_bg; + color: @ini_nav_menu_hover_color; + transition: @transition color, @transition background-color, @transition border-color; &:hover, &:active, &:focus { - background-color: transparent; - border-color: var(--color-glow-secondary); - color: var(--color-glow-secondary); - filter: var(--filter-glow-secondary); + background-color: @ini_nav_menu_hover_color; + border-color: @ini_nav_menu_hover_color; + color: @ini_nav_menu_hover_bg; .prefix { color: inherit; @@ -283,8 +288,10 @@ -ms-flex-wrap: wrap; } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* positioning */ + .center-middle() { position: absolute; top: 50%; @@ -294,9 +301,11 @@ -webkit-transform: translateX(-50%) translateY(-50%); } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Screenreader / Hide */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .reset() { background: transparent; border: none 0; outline: 0; vertical-align: baseline; @@ -320,42 +329,22 @@ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Col Grid */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .make-grid(@class) { .float-grid-columns(@class); - .grid-columns(1, @class, width); - .grid-columns(2, @class, width); - .grid-columns(3, @class, width); - .grid-columns(4, @class, width); - .grid-columns(5, @class, width); - .grid-columns(6, @class, width); - .grid-columns(7, @class, width); - .grid-columns(8, @class, width); - .grid-columns(9, @class, width); - .grid-columns(10, @class, width); - .grid-columns(11, @class, width); - .grid-columns(12, @class, width); + .loop-grid-columns(@grid-columns, @class, width); } .float-grid-columns(@class) { - .col-@{class}-1, - .col-@{class}-2, - .col-@{class}-3, - .col-@{class}-4, - .col-@{class}-5, - .col-@{class}-6, - .col-@{class}-7, - .col-@{class}-8, - .col-@{class}-9, - .col-@{class}-10, - .col-@{class}-11, - .col-@{class}-12 { + .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 { float: left; } } -// todo: no recusion - fix it !!! -.grid-columns(@index, @class, @type) { +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { .calc-grid-column(@index, @class, @type); + // next iteration + .loop-grid-columns((@index - 1), @class, @type); } .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { diff --git a/css/base_structure.less b/css/base_structure.less index 344cfa4..1725630 100755 --- a/css/base_structure.less +++ b/css/base_structure.less @@ -1,10 +1,14 @@ /** * This file provides styles for the general layout structure. + * + * @author Jana Deutschlaender */ + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* col grid */ +/* Col Grid */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + .make-grid(xs); @media screen { @@ -13,18 +17,15 @@ } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* font sizing */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ @media @screen_min-xxs { html { - font-size: 100%; //16px + font-size: 114%; //16px } } @media @screen_min-xs { html { - font-size: 100%; //16px + font-size: 114%; //16px } } @@ -39,6 +40,7 @@ .make-grid(md); html { font-size: 87.5%; //14px + //font-size: 81.25%; //13px } } @@ -61,87 +63,41 @@ } } -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* z-indices */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@media screen { +/* + + + + + z-indeces + + + + + */ +@media @screen_min-md { .nav-direct p { - z-index: 1000; // keyboard-navigation overlays always on top + z-index: 1000; } .top-header { - z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs + z-index: 900; } - #dokuwiki__aside div.nav a { - &:hover, &:focus, &:active { - z-index: 100; // show label/link above content on hover etc. - } +/* if z-index is needed for .tools col, then use this: + + .tools .row > .col-xs-12 { + z-index: 5; // SPR-945 sometimes too small space for suggestionlist } - .qc-output { - z-index: 1; // put qc-output above meta-box + .wide-content .tools .row > .col-xs-12 { + z-index: 1; } +*/ - #spr__meta-box { - z-index: 10; // put meta-box above positioned content-elements such as aggregations, edit-buttons - ul.meta-tabs > li.active { - z-index: 1; // put the active tab above the meta-content in .tab-pane.active - } + .header .row > .col-xs-12 { + z-index: 2; } - nav#dokuwiki__pagetools { - z-index: 100; // put labels of the pagetools above content on hover etc. - } - - #dokuwiki__detail .img-link a::before { - z-index: 2; // put 'view original file'-overlay above image - } - - /* plug-in do_tasks */ - .plugin__do_usertasks_list { - z-index: 200; // put tasks-list above pagetools - } - - /* plug-in editable */ - #dokuwiki__content.main-content div.editbutton_table { - z-index: 1; // for IE - } - - /* plug-in tabinclude */ - div#dwpl-ti-container li.dwpl-ti-tab div.selected { - z-index: 1; // put .slected tab above div.dwpl-ti-content-box - } -} - -@media @screen_min-md { - .wide-content .search.main-sidebar p.toggleSearch { - z-index: 1; // put search-toggle-button above #dw__search - } -} - -@media @screen_max-md { - body.show-mobile-sidebar #dokuwiki__aside { - z-index: 200; // mobile sidebar above all except nav-direct - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* screen sizing */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - -// >= 1024 -@media @screen_min-md { - .content .row > .col-xs-12 { + z-index: 3; border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius } .top-header { position: absolute; top: 0; - right: 0; - width: 50%; + left: 0; + width: 100%; } .header, @@ -171,16 +127,6 @@ } } - /* + + + + + layout option compact + + + + + */ - .header-compact { - .header { - .row > .col-xs-12 { - height: auto; - min-height: auto; - } - } - } - .tools { .row > .col-xs-12 { position: absolute; @@ -231,17 +177,18 @@ } } -// > 1024 + @media @screen_md-lg { .wide-content.showSidebar { .content { .row > .col-xs-12 { - margin-left: 2.3rem; + margin-left: 2.1rem; } } } } + @media @screen_max-md { .container { margin: 0 1.25rem; diff --git a/css/base_vars.less b/css/base_vars.less deleted file mode 100644 index 60c46f2..0000000 --- a/css/base_vars.less +++ /dev/null @@ -1,165 +0,0 @@ -/** - * This file provides the basic vars - */ - -@font_family_screen: arial, sans-serif; -@font_family_print: "Times New Roman", serif; - -@nav_direct_background: @ini_background; -@nav_direct_color: @ini_existing; - -@background_darker: rgba(230,230,230, .2); -@ini_sidebar_width: (100 - @ini_site_width) - 4; - -@height-context-bar: 50px; - -@margin-small: 1rem; -@margin-default: 2rem; -@margin-big: 3.07rem; -@nav-margin: 1.3rem; - -@small-spacing: .3rem; -@very-small-spacing: .2rem; - -@grid: @margin-small; -@toggle-size: 1.75rem; - -@transition: ease-out .30s; - -@box-shadow-offset: .1em .1em .1em rgba(153,153,153,.5); // tabinclude -@box-shadow: 0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover -@box-shadow-colored: 0 0 .5em fade(@ini_existing, 50%); -@box-shadow-right-bottom: .1em .3rem .5em rgba(153,153,153,.5); -@box-shadow-bottom: 0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* for programmers customizing */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@fix_border-radius: 3px; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg - -@toggle-showsidebar_width: 3.47rem; // shown sidebar after toggle - -@headericons-margin-xxs: .45rem; // screen xxs margin-top for header icons - -@page_padding-top: @margin-small; // padding-top for 'dokuwiki__content' -@page-header_height: 2.8rem; // minimum: 2.8rem (height for breadcrumb, page-header, page-footer) -@meta-box_height: (@page-header_height - @page_padding-top); -@breadcrumb_height: @page-header_height; - -@formfield_min-height: 2rem; // min-height for input, textarea, select, keygen - -@code-background: #F6F6F6; /* code, pre, samp, kbd */ - -/* icons */ -@noopentasks-background: #ECECEC; /* metabox tabs + num in icons + tabinclude */ -@noopentasks-border: #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */ -@noopentasks-color: #666; /* metabox tabs + num in icons + code, pre, samp, kbd */ -@wikiicons-border: #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */ - -/* navigation left */ -@menu-margin-lg: 1.3rem; - -@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */ -@suggestion-zebra: #EEE; - -/* edit mode */ -@highlight-odd-ini_text: fade(@ini_background, 95%); -@highlight-even-ini_text: fade(@ini_text, 5%); -@color-editBox: #252525; // editmode for tables, revision states - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* fonts */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@font-size-very-small: .73rem; -@font-size-small: .88rem; -@font-size-default: 1rem; -@font-size-big: 1.5rem; -@font-size-bigger: 1.75rem; - -@line-height-default: 125%; -@line-height-big: 135%; -@line-height-bigger: 140%; - -@font-weight-bold: 800; -@font-weight-normal: 400; - -@font-scale-factor: .0769; - -@font-size-head6: @font-size-default; -@font-size-head5: @font-size-default + @font-scale-factor; -@font-size-head4: @font-size-default + (@font-scale-factor * 3); -@font-size-head3: @font-size-default + (@font-scale-factor * 5); -@font-size-head2: @font-size-default + (@font-scale-factor * 7); -@font-size-head1: @font-size-default + (@font-scale-factor * 9); - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* breakpoints */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@break-min-xxs: 480; -@break-max-xxs: (@break-min-xxs - 1); - -@break-min-xs: 768; -@break-max-xs: (@break-min-xs - 1); - -@break-min-sm: 992; -@break-max-sm: (@break-min-sm - 1); - -@break-min-md: 1024; -@break-max-md: (@break-min-md - 1); - -@break-min-lg: 1200; -@break-max-lg: (@break-min-lg - 1); - -@break-min-xlg: 1440; -@break-max-xlg: (@break-min-xlg - 1); - -@break-min-xxlg: 1600; -@break-max-xxlg: (@break-min-xxlg - 1); - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* media queries for breakpoints */ -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)"; -@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)"; - -@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)"; -@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)"; - -@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)"; -@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)"; - -@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)"; -@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)"; - -@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)"; -@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)"; - -@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)"; -@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)"; - -@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)"; -@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)"; - -@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)"; -@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)"; -@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)"; -@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)"; -@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)"; - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* 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%; - -@grid-columns: 12; diff --git a/css/icons.less b/css/icons.less deleted file mode 100644 index cc0087d..0000000 --- a/css/icons.less +++ /dev/null @@ -1,60 +0,0 @@ - -i[data-icon] { - display: inline-block; - width: 1em; - height: 1em; - flex-shrink: 0; - position: relative; - box-sizing: content-box; - - &::before { - content: ''; - display: block; - width: 100%; - height: 100%; - mask-size: contain; - mask-position: center; - mask-repeat: no-repeat; - background-color: currentColor; - } - - &[data-icon='arrow-left']::before { - mask-image: url('img/arrow_left.svg'); - } - - &[data-icon='arrow-up']::before { - mask-image: url('img/arrow_up.svg'); - } - - &[data-icon='arrow-right']::before { - mask-image: url('img/arrow_right.svg'); - } - - &[data-icon='arrow-down']::before { - mask-image: url('img/arrow_down.svg'); - } - - &[data-icon='info']::before { - mask-image: url('img/info.svg'); - } - - &[data-icon='home']::before { - mask-image: url('img/home.svg'); - } - - &[data-icon='menu-small']::before { - mask-image: url('img/menu_small.svg'); - } - - &[data-icon='light']::before { - mask-image: url('img/lightbulb.svg'); - } - - &[data-icon='warning']::before { - mask-image: url('img/warning.svg'); - } - - &[data-icon='creature']::before { - mask-image: url('img/creature.svg'); - } -} \ No newline at end of file diff --git a/css/plugins/bureaucracy.less b/css/plugins/bureaucracy.less index 678e902..3ba0143 100755 --- a/css/plugins/bureaucracy.less +++ b/css/plugins/bureaucracy.less @@ -2,7 +2,9 @@ * This file provides styles for bureaucracy plugin */ + /* + + + + + global + + + + + */ + .dokuwiki form.bureaucracy__plugin { fieldset { width: 100%; @@ -55,6 +57,7 @@ span { float: left; + width: 50%; text-align: right; line-height: @line-height-default; padding-top: .2em; @@ -93,8 +96,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* min-width: 1440px */ + @media @screen_min-xlg { .dokuwiki form.bureaucracy__plugin { p { @@ -103,8 +108,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1439px */ + @media @screen_max-xlg { .dokuwiki form.bureaucracy__plugin { p, @@ -114,3 +121,4 @@ } } } + diff --git a/css/plugins/configmanager.less b/css/plugins/configmanager.less index 972744d..97f6948 100644 --- a/css/plugins/configmanager.less +++ b/css/plugins/configmanager.less @@ -2,173 +2,26 @@ * This file provides styles for config manager */ + /* + + + + + config__manager + + + + + */ + #dokuwiki__content { #config__manager { - fieldset { - min-width: 100%; - overflow-x: auto; - box-sizing: border-box; - background-color: var(--color-background); - margin-left: 0; - margin-right: 0; - color: var(--color-foreground) - } - .selectiondefault { background-color: transparent; - color: inherit; } tr { - a { - color: var(--color-shade-4); - } - .input { background-color: transparent; color: inherit; } - - input, select, textarea { - background-color: var(--color-background); - color: var(--color-foreground); - } - - select.edit { - padding: 0 0.3em; - } - - &:hover { - td { - color: inherit; - } - } } tr.default { .input { background-color: transparent; } - - input, select, textarea { - background-color: var(--color-shade-1); - } - } - - td.label { - padding: .8em 0 1.2em 1em; - - span.outkey { - background-color: var(--color-background); - color: inherit; - font-size: (@font-size-small - .06); - font-weight: bold; - padding: 0 @very-small-spacing; - - a { - font-size: inherit; - } - } - - label { - line-height: @line-height-big; - } - } - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 1024px */ -@media @screen_max-md { - #dokuwiki__content { - #config__manager { - td { - &.label { - label, - span { - font-size: @font-size-small; - } - } - - &.label + td { - font-size: @font-size-small; - - span { - font-size: inherit; - } - } - - select, - input.edit { - font-size: @font-size-small; - } - } - - .selectiondefault { - label { - font-size: @font-size-small; - } - } - } - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ -/* max-width: 768px */ -@media @screen_max-sm { - #dokuwiki__content { - #config__manager { - table { - border-top: 0 none; - } - - td { - padding-top: 0; - - &.label { - display: block; - width: 100%; - border: 0 none; - border-top: 1px solid @ini_border; - border-bottom: 0 none; - padding: .8em .5em .3em; - - - span.outkey { - margin-left: 0; - } - } - - .input { - width: 100%; - } - - - &.value, - &.label + td { - display: block; - width: 100%; - border: 0 none; - margin-bottom: 1.2rem; - } - - select, - input.edit { - width: 100%; - text-overflow: ellipsis; - } - } - - .selectiondefault { - float: none; - max-width: 100%; - width: auto; - - label { - width: 90%; - } - } } } } diff --git a/css/plugins/data.less b/css/plugins/data.less index 561c488..56b264a 100644 --- a/css/plugins/data.less +++ b/css/plugins/data.less @@ -1,46 +1,48 @@ /** - * This file provides styles for "data plugin" + * This file provides styles for old data plugin * after importing struct data this can be deleted */ + /* + + + + + global + + + + + */ + #dokuwiki__content { - .dataplugin_entry { + .dataplugin_entry.mitarbeiter.sectionedit2 { dl { margin-left: 0; margin-right: 0; } - } - .editbutton_plugin_data { - position: relative; - top: -1em; // as margin after DL - float: left; - font-size: @font-size-small; // for right position - margin-top: 0; + + .secedit.editbutton_plugin_data { + position: relative; + top: -1em; // as margin after DL + float: left; + font-size: @font-size-small; // for right position + margin-top: 0; - form { - button { - min-height: 1rem; - height: 1.8em; - background-color: var(--color-background); - border-top: solid 1px @ini_button_background; - border-color: @ini_border; - border-radius: 0 0 @fix_border-radius @fix_border-radius; - color: @ini_existing; - font-size: @font-size-small; - line-height: 1.8em; - margin-top: -1px; // for right position - margin-left: .6em; - padding: 0 .3em; - transition: @transition background-color, @transition border-color, @transition color; + form { + button { + min-height: 1rem; + height: 1.8em; + background-color: @ini_background; + border-top: solid 1px @ini_button_background; + border-color: @ini_border; + border-radius: 0 0 @fix_border-radius @fix_border-radius; + color: @ini_existing; + font-size: @font-size-small; + line-height: 1.8em; + margin-top: -1px; // for right position + margin-left: .6em; + padding: 0 .3em; + transition: @transition background-color, @transition border-color, @transition color; - &:hover, - &:focus, - &:active { - background-color: @ini_existing; - border-color: @ini_existing; - color: var(--color-background); + &:hover, + &:focus, + &:active { + background-color: @ini_existing; + border-color: @ini_existing; + color: @ini_background; + } } } } diff --git a/css/plugins/do_tasks.less b/css/plugins/do_tasks.less index 2fa828b..f9fbe34 100755 --- a/css/plugins/do_tasks.less +++ b/css/plugins/do_tasks.less @@ -2,65 +2,66 @@ * 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 { ul { li { &.user-task { - .btn-usertools-wrapper(); - .btn-usertools-num(); - position: relative; - .plugin__do_usertasks { - width: 100%; - min-width: (@toggle-size + .25); - min-height: @toggle-size; - border-radius: @ini_default_border_radius; - border: 1px solid @wikiicons-border; - padding: .14rem 0 0 0; + a { + overflow: visible; + white-space: normal; // Is this still needed? + text-indent: 0; &::before { content: ''; // remove when fontello is removed from usertools } + } - &:hover, - &:focus, - &:active { - background-color: @ini_nav_menu_hover_color; - border: none; + svg { + width: 20px; + margin-top: 2px; + @media @screen_max-md { + margin-top: 4px; + } + } + + &:hover { + :not(.noopentasks) { svg path { - fill: @ini_nav_menu_hover_bg; + fill: @ini_background; } } } - button { - background-color: @ini_nav_menu_hover_bg; - } - - svg { - width: 1.2rem; - height: 1.2rem; // for IE 11 - margin-bottom: 2px; - - path { - fill: @ini_nav_menu_hover_color; - } - } - .noopentasks { - span { - background-color: var(--color-background); + background-color: @ini_background; border-color: @noopentasks-border; color: @ini_text_webframe; - } - - svg path { - fill: @ini_text_webframe; - } .num { background-color: @noopentasks-border; // fix @@ -69,7 +70,7 @@ } } - @media @screen_max-xs { + @media @screen_max-sm { display: none; } } // user-task @@ -78,19 +79,5 @@ } .plugin__do_usertasks_list { - background-color: transparent; - - @media @screen_max-sm { - right: 1.25rem !important; - left: 1.25rem !important; - } - - table.inline { - background-color: var(--color-background); - margin-top: .5rem; - - @media @screen_max-sm { - width: 100%; - } - } + z-index: 5; } diff --git a/css/plugins/edit.less b/css/plugins/edit.less index b3092d7..a07fe4a 100644 --- a/css/plugins/edit.less +++ b/css/plugins/edit.less @@ -1,71 +1,42 @@ /** * This file provides styles for the edit view (?do=edit), preview - * and "section edit button" and "editbutton_table edit button". + * and section edit buttons. */ + /* + + + + + edit view + + + + + */ + #dokuwiki__content { div.section_highlight { clear: right; - background: repeating-linear-gradient(-45deg, - var(--color-shade-1), - var(--color-shade-1) 10px, - var(--color-background) 10px, - var(--color-background) 20px,); - border-color: var(--color-background); + padding-top: 0 !important; // heredity } - // "section edit button" and "editbutton_table edit button" .secedit button { clear: both; font-size: 100%; margin-top: .5rem; margin-bottom: .5rem; - - &::after { - - } - - &:hover { - &::after { - border: none; - } - } } div.editBox { - background-color: var(--color-background); - border: solid 2px var(--color-shade-4); - border-radius: @fix_border-radius; - padding: 0.5rem; + background-color: #FFF; + border: solid 2px #FFF; .editButtons { display: inline-block; padding-bottom: 1rem; } - @media @screen_max-xs { - div.summary { - label[for=edit__summary] { - white-space: normal; - display: block; - width: 100%; - - span { - display: inline-block; - padding-bottom: .4rem; - } - - input#edit__summary { - max-width: 100%; - box-sizing: border-box; - } - } + * { + &:not(button) { + color: @color-editBox; } } } } + .mode_edit { .content { .msg-area { diff --git a/css/plugins/edittable.less b/css/plugins/edittable.less index 144270b..ea979c7 100644 --- a/css/plugins/edittable.less +++ b/css/plugins/edittable.less @@ -1,59 +1,37 @@ /** - * This file provides styles for "edittable plugin" + * This file provides styles for qc edittable plugin */ + /* + + + + + global + + + + + */ + #dokuwiki__content.main-content { - #edittable__editor { - th, - .handsontable th { - border-color: var(--color-shade-4); - background-color: var(--color-shade-1); - color: var(--color-foreground); - - &.ht__highlight { - background-color: var(--color-shade-2); - } - } - - td { - border-color: var(--color-shade-4); - background-color: var(--color-background); - color: var(--color-foreground); - - &.current { - background-color: var(--color-shade-1); - } - } - } - div.editbutton_table { position: relative; // for IE + z-index: 1; // for IE float: left; - margin-top: -1.4em !important; // overwrite inline styles + margin-top: -1.46rem !important; // overwrite inline stales form div.no { button, input.button { min-height: 1rem; - background-color: var(--color-shade-1); - border: solid 0.1em var(--color-shade-2); - border-radius: 0.5rem; - color: var(--color-foreground); + background-color: @ini_background; + border-top: solid 1px @ini_button_background; + border-color: @ini_border; + border-radius: 0 0 @fix_border-radius @fix_border-radius; + color: @ini_existing; font-size: @font-size-small; - margin: 0; - margin-top: 0.5rem; - padding: 0.2rem 0.4rem; - height: auto; + margin-top: 0; + padding-right: .3em; + transition: @transition background-color, @transition border-color, @transition color; &:hover, &:focus, &:active { - background-color: transparent; - color: var(--color-glow-primary); - border-color: var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); + background-color: @ini_existing; + border-color: @ini_existing; + color: @ini_background; } } } diff --git a/css/plugins/extension__manager.less b/css/plugins/extension__manager.less index 1199b74..3d3b80d 100644 --- a/css/plugins/extension__manager.less +++ b/css/plugins/extension__manager.less @@ -2,65 +2,18 @@ * This file provides styles for extension manager */ + /* + + + + + global + + + + + */ -.dokuwiki { - #extension__manager { - .actions { - font-size: 0; - > button { - font-size: .92rem; - margin-left: .3rem; - padding-left: .3rem; - padding-right: .3rem; - } +.dokuwiki #extension__manager { + .actions { + font-size: 0; - p.permerror { - @media @screen_max-md { - flex-direction: column; - } - - display: flex; - align-items: start; - gap: 0.5rem; - background: none; - - &::before { - content: ""; - flex-shrink: 0; - margin-top: 0.3em; - width: 1em; - height: 1em; - mask-size: contain; - mask-position: center top; - mask-repeat: no-repeat; - mask-image: url(img/warning.svg); - background-color: var(--color-warning); - } - } - } - - ul.tabs { - li.active { - a { - background-color: var(--color-shade-3); - color: var(--color-foreground); - border-color: var(--color-shade-4); - } - } - } - - .panelHeader { - background-color: var(--color-shade-2); - } - } - - #extension__list { - .extensionList { - - li { - color: var(--color-foreground); - } + > button { + font-size: .92rem; + margin-left: .3rem; + padding-left: .3rem; + padding-right: .3rem; } } } diff --git a/css/plugins/fastwiki.less b/css/plugins/fastwiki.less deleted file mode 100644 index c8f3016..0000000 --- a/css/plugins/fastwiki.less +++ /dev/null @@ -1,7 +0,0 @@ -/** - * This file provides styles for "fastwiki" plugin - */ - -.mode_edit .content .row > .col-xs-12 #dokuwiki__content::before { - display: none; -} diff --git a/css/plugins/folded.less b/css/plugins/folded.less index 660d4a5..0402618 100644 --- a/css/plugins/folded.less +++ b/css/plugins/folded.less @@ -2,7 +2,9 @@ * This file provides styles for the toggle "folded" */ + /* + + + + + global + + + + + */ + #dokuwiki__content { a.folder { background: transparent url("svg.php?svg=down.svg&f=existing") right center no-repeat; diff --git a/css/plugins/highlight_parent.less b/css/plugins/hightlight_parent.less similarity index 55% rename from css/plugins/highlight_parent.less rename to css/plugins/hightlight_parent.less index 73822fb..a59a4df 100644 --- a/css/plugins/highlight_parent.less +++ b/css/plugins/hightlight_parent.less @@ -2,17 +2,8 @@ * This file provides styles for highlight plugin */ -/* + + + + + global + + + + + */ -#plugin__highlightparent { - clear: none; - display: block; - position: relative; - + * { - clear: both; - padding-top: 1em; // as h1 - } -} +/* + + + + + global + + + + + */ @media @screen_max-md { #plugin__highlightparent { diff --git a/css/plugins/include.less b/css/plugins/include.less new file mode 100644 index 0000000..f793a80 --- /dev/null +++ b/css/plugins/include.less @@ -0,0 +1,33 @@ +/** + * This file provides the main design styles + * across all template elements (typo, colors etc.) + * + * @author Jana Deutschlaender + */ + +#dokuwiki__content .plugin_include_content { + > h1, + > .section_highlight h1 { + padding-top: @font-size-head1; + } + > h2, + > .section_highlight h2 { + padding-top: @font-size-head2; + } + > h3, + > .section_highlight h3 { + padding-top: @font-size-head3; + } + > h4, + > .section_highlight h4 { + padding-top: @font-size-head4; + } + > h5, + > .section_highlight h5 { + padding-top: @font-size-head5; + } + > h6, + > .section_highlight h6 { + padding-top: @font-size-head6; + } +} diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less index 865897f..3b1687e 100755 --- a/css/plugins/magic-matcher.less +++ b/css/plugins/magic-matcher.less @@ -2,8 +2,10 @@ * This file provides styles for magic matcher plugin */ + /* + + + + + + + + + + + + + + + + + + + + + + + */ /* magic matcher bar with form on top of page */ + #spr__magic-matcher { position: fixed; top: 0; @@ -20,10 +22,6 @@ max-width: 50%; } - select[name="mmissues"] + div.chosen-container { - max-width: 67%; - } - button[name="toggleSuggestions"] { position: absolute; right: 0; @@ -46,11 +44,12 @@ #magicmatcher__context { position: relative; + z-index: 100; width: 100%; min-height: @height-context-bar; box-sizing: border-box; box-shadow: @box-shadow; - background-color: var(--color-background); + background-color: @ini_background; border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius; font-size: @font-size-default; padding: .8em 1em .5em; @@ -83,6 +82,16 @@ } } + +/* + + + + + in meta box + + + + + */ +#spr__tab-issues { + ul.mmissuelist { + padding-left: 0; + margin-top: 1rem; + } +} + + /* + + + + + in content + + + + + */ a.jiralink { font-size: @font-size-default; @@ -102,58 +111,6 @@ a.jiralink { } } -/* + + + + + tooltip in metabox + + + + + */ -.dokuwiki { - .serverToolTip { - box-shadow: @box-shadow; - border-radius: @fix_border-radius; - font-size: @font-size-default; - - h1.issueTitle { - font-size: @font-size-default; - } - - h2 { - font-size: @font-size-small; - } - - ul { - margin-top: @small-spacing; - } - - p, - li { - font-size: (@font-size-small - .06); - - * { - font-size: inherit; - } - } - - p { - margin-top: @small-spacing; - margin-bottom: @small-spacing; - } - - .components { - .component { - font-size: (@font-size-small - .06); - } - } - - .labels { - .label { - font-size: (@font-size-small - .06); - } - } - - .descriptionTeaser { - font-size: (@font-size-small - .06); - margin-top: (@small-spacing * 2); - margin-bottom: (@small-spacing * 2); - } - } -} /* + + + + + no js version + + + + + */ .no-js { @@ -162,29 +119,10 @@ a.jiralink { } } -.do-admin #dokuwiki__content { - #magicmatcher__repoadmin, - #magicmatcher_adminimport { - .tabs li { - a { - cursor: pointer; - } - &.active { - a { - cursor: default; - } - } - } - - .service_wrapper > a{ - display: inline-block; - margin-top: 20px; - } - } -} /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* max-width: 1023px */ + @media @screen_max-lg { #spr__magic-matcher { #magicmatcher__context { @@ -205,11 +143,14 @@ a.jiralink { } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* print */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ + @media print { #spr__magic-matcher { display: none; } } + diff --git a/css/plugins/mediamanager.less b/css/plugins/mediamanager.less index e591949..33515fb 100644 --- a/css/plugins/mediamanager.less +++ b/css/plugins/mediamanager.less @@ -2,20 +2,14 @@ * This file provides styles for mediamanager */ + /* + + + + + global + + + + + */ + #mediamanager__page { - .namespaces{ - h2 { - bottom: 0; - line-height: 100%; - margin-bottom: -1px; - background-color: var(--color-shade-3); - color: var(--color-foreground); - border-color: var(--color-shade-4); - } - .panelHeader { - border-color: var(--color-shade-4); - } + .namespaces h2 { + bottom: 0; + line-height: 100%; + margin-bottom: -1px; } #media__tree ul li img { @@ -25,42 +19,12 @@ ul.tabs li a { border-bottom-color: transparent; } - - #page__revisions { - > .no > ul > li input[type="checkbox"] { - margin-left: 0; - } - } - - .panelHeader { - background-color: var(--color-shade-2); - } - - .filelist .panelContent ul li{ - background-color: var(--color-shade-2); - color: var(--color-foreground); - - &:hover { - background-color: var(--color-shade-4); - border: none; - } - } - - .file dl { - dt{ - background-color: var(--color-shade-2); - padding: 0.2em; - } - - dd{ - background-color: var(--color-shade-1); - padding: 0.2em; - } - } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* media queries */ + @media @screen_max-md { #mediamanager__page { min-width: 100%; diff --git a/css/plugins/move.less b/css/plugins/move.less index c512c54..3863e28 100644 --- a/css/plugins/move.less +++ b/css/plugins/move.less @@ -2,7 +2,9 @@ * This file provides styles for move plugin */ + /* + + + + + global + + + + + */ + #dokuwiki__site > .plugin_move_dialog { font-size: @font-size-default; diff --git a/css/plugins/popupviewer.less b/css/plugins/popupviewer.less index a9c32d8..afa3119 100755 --- a/css/plugins/popupviewer.less +++ b/css/plugins/popupviewer.less @@ -2,9 +2,12 @@ * This file provides styles for popupviewer plugin */ + /* + + + + + global + + + + + */ + #popupviewer { > .controls > .content { + padding: 1.5rem 1rem 1rem; td, @@ -16,7 +19,6 @@ line-height: @line-height-default; } } - .li, li { font-size: @font-size-default; diff --git a/css/plugins/qc.less b/css/plugins/qc.less index c26c734..25688b9 100644 --- a/css/plugins/qc.less +++ b/css/plugins/qc.less @@ -2,31 +2,51 @@ * 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); + } + } +} + + /* + + + + + slideout output + + + + + */ .qc-output { - position: relative; min-width: 100%; width: auto; - background-color: @ini_background !important; font-size: 90%; box-shadow: @box-shadow-bottom; - border-bottom: solid 1px @ini_border_light; margin-bottom: 0; - padding-top: 0 !important; // for JS overwrite + + h2 { + font-size: 1.3rem; + } + h3 { + font-size: 1.1rem; + } + h4, h5, h6 { + font-size: 1rem; + } + @media @screen_min-xxs { + margin-top: -(@margin-default + 1); margin-right: -(@margin-default); margin-left: -(@margin-default); padding-left: @margin-default; padding-right: @margin-default; } - @media @screen_min-md { - top: -(@margin-small); - } - @media @screen_max-md { - top: 0; margin-top: -(@page_padding-top + 2); margin-right: -(@margin-default * 1.6); margin-left: -(@margin-default); @@ -39,26 +59,6 @@ padding-right: @margin-default; } - h1 { - @media @screen_min-md { - padding-top: 0; - } - } - - h2 { - font-size: 1.3rem; - } - - h3 { - font-size: 1.1rem; - } - - h4, - h5, - h6 { - font-size: 1rem; - } - div, p { margin-left: 0; @@ -87,17 +87,3 @@ padding: .1rem; } } - -/* + + + + + admin settings + + + + + */ -.do-admin #dokuwiki__content { - #plugin__qc_admin { - table .centeralign { - .qc_icon svg + span { - min-width: 2em; - padding-left: .2em; - text-align: left; - display: inline-block; - } - } - } -} diff --git a/css/plugins/sitemapnavi.less b/css/plugins/sitemapnavi.less deleted file mode 100644 index 23978f4..0000000 --- a/css/plugins/sitemapnavi.less +++ /dev/null @@ -1,25 +0,0 @@ -/** - * This file provides styles for the sitemapnavi plugin - */ - -#plugin__sitemapnavi { - padding-bottom: @nav-margin; - margin-bottom: @nav-margin; - border-bottom: 1px solid @ini_nav_menu_color; - - label { - padding-left: 0.5em; - } - - li { - line-height: @line-height-bigger; - - li { - margin-left: 0.75em; - } - } -} - -.wide-content #plugin__sitemapnavi { - display: none; -} diff --git a/css/plugins/starred.less b/css/plugins/starred.less index 26426d6..057a04c 100644 --- a/css/plugins/starred.less +++ b/css/plugins/starred.less @@ -1,16 +1,38 @@ /** * This file provides styles for starred plugin */ + +.page-attributes { + li.plugin_starred { + .starred svg { + margin-top: .1em; + width: 1.6em; + height: 1.6em; + font-size: 0.82rem; + fill: @ini_nav_menu_color; + } + + .starred.on svg { + fill: @ini_link; + } + + a:hover, + a:active { + .starred svg { + fill: @ini_nav_menu_hover_bg; + } + } + + } +} + nav.nav-starred { ul { list-style: none; - li { margin-left: 0; - svg { - vertical-align: text-top; - fill: @ini_nav_menu_color; + vertical-align: middle; } } } diff --git a/css/plugins/struct.less b/css/plugins/struct.less index 6742bf3..e6df066 100755 --- a/css/plugins/struct.less +++ b/css/plugins/struct.less @@ -2,7 +2,9 @@ * This file provides styles for struct plugin */ + /* + + + + + global + + + + + */ + #dokuwiki__content { .structaggregation { @link-height: 1.5rem; @@ -16,17 +18,11 @@ line-height: @line-height-default; a { - //color: @ini_existing; + color: @ini_existing; line-height: @line-height-default; } } - th { - a { - color: @ini_link_alt; - } - } - // search button in table (f.i. "All products") table th input { &:not(:focus) { @@ -67,21 +63,17 @@ &:focus, &:active { background-color: @ini_existing; - background-image: url("svg.php?svg=file-export.svg&f=background"); + background-image: url("svg.php?svg=file-export.svg&f=background_content"); border-color: @ini_existing; - //color: var(--color-background); + color: @ini_background; text-decoration: none; } } } } - #plugin__struct_output { + #plugin__struct_output{ margin-right: 0; - - th { - background-color: @ini_background_alt; - } } .struct_entry_form { @@ -105,12 +97,15 @@ } } + /* + + + + + struct inline-editor + + + + + */ .dokuwiki { .struct_inlineditor { + z-index: 3; box-shadow: @box-shadow-bottom; - p.hint { + .hint p { + color: @color-editBox; margin-top: @small-spacing; margin-bottom: @margin-small; } @@ -121,27 +116,6 @@ margin-left: @small-spacing; } } - - /* struct fields for bureaucracy forms */ - .bureaucracy__plugin { - .field { - clear: both; - - label { - padding: 0; - - .label { - text-align: right; - font-weight: bold; - padding: 0; - } - } - - .input { - line-height: 2.5em; - } - } - } } @@ -191,6 +165,6 @@ form { padding-top: 1rem; } } - } // fieldset + } } -} // form +} diff --git a/css/plugins/structstatus.less b/css/plugins/structstatus.less index 0bfd143..4dfb2cb 100644 --- a/css/plugins/structstatus.less +++ b/css/plugins/structstatus.less @@ -2,7 +2,9 @@ * This file provides styles for structstatus plugin */ + /* + + + + + global + + + + + */ + #dokuwiki__content { .struct_status { border-color: @ini_border; diff --git a/css/plugins/tabinclude.less b/css/plugins/tabinclude.less index b8ef834..c1f3b12 100644 --- a/css/plugins/tabinclude.less +++ b/css/plugins/tabinclude.less @@ -2,7 +2,9 @@ * This file provides styles for the tabinclude */ + /* + + + + + plugin tabinclude + + + + + */ + div#dwpl-ti-container { li.dwpl-ti-tab { box-shadow: none; @@ -32,26 +34,31 @@ div#dwpl-ti-container { &.selected { position: relative; - background-color: var(--color-background); + z-index: 1; + background-color: @ini_background; color: @ini_text; } } } + /* + + + content box + + + */ div.dwpl-ti-content-box { position: relative; + z-index: 0; overflow: auto; box-shadow: @box-shadow; - background-color: var(--color-background); + background-color: @ini_background; border: solid 1px @ini_border; border-radius: 0; margin-top: -1px; } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* media queries */ + @media @screen_max-md { div#dwpl-ti-container { } } diff --git a/css/plugins/tablelayout.less b/css/plugins/tablelayout.less deleted file mode 100644 index 9e69a36..0000000 --- a/css/plugins/tablelayout.less +++ /dev/null @@ -1,19 +0,0 @@ -/** - * This file provides styles for "tablelayout plugin" - */ - - -/* + + + + + global + + + + + */ - -#dokuwiki__content.main-content .secedit.editbutton_table{ - a.button.print { - min-height: 1rem; - background-color: var(--color-background); - border-radius: 0 @ini_default_border_radius; - border-top: solid 1px; - border-color: @ini_border; - font-size: .88rem; - margin-top: -1px; - padding-right: .3em; - } -} diff --git a/css/plugins/tagging.less b/css/plugins/tagging.less index d20a77f..a15cdfb 100644 --- a/css/plugins/tagging.less +++ b/css/plugins/tagging.less @@ -2,7 +2,9 @@ * This file provides styles for the form in tagcloud */ + /* + + + + + plugin tagging + + + + + */ + #spr__meta-box { ul.tagging_cloud { width: 100%; @@ -10,45 +12,35 @@ li { &.t0 a { - font-size: .88rem; + font-size: .9rem; } - &.t1 a { font-size: 1rem; } - &.t2 a { font-size: 1.1rem; } - &.t3 a { font-size: 1.2rem; } - &.t4 a { font-size: 1.3rem; } - &.t5 a { font-size: 1.4rem; } - &.t6 a { font-size: 1.5rem; } - &.t7 a { font-size: 1.6rem; } - &.t8 a { font-size: 1.7rem; } - &.t9 a { font-size: 1.8rem; } - &.t10 a { font-size: 1.9rem; } @@ -69,8 +61,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* media queries */ + @media @screen_max-md { #spr__meta-box { form { diff --git a/css/plugins/tplinc.less b/css/plugins/tplinc.less deleted file mode 100644 index 986b145..0000000 --- a/css/plugins/tplinc.less +++ /dev/null @@ -1,6 +0,0 @@ -.wide-content { - .sidebarheader, - .sidebarfooter { - visibility: hidden; - } -} diff --git a/css/plugins/translation.less b/css/plugins/translation.less deleted file mode 100644 index eb6a464..0000000 --- a/css/plugins/translation.less +++ /dev/null @@ -1,57 +0,0 @@ -/** - * This file provides styles for the translation plugin - */ -@import "../base"; - - -.dokuwiki div.plugin_translation { - clear: none; - display: block; - position: relative; - float: none; - - box-sizing: border-box; - width: 100%; - padding-bottom: 0.5rem; - height: 4rem; - - + * { - clear: both; - padding-top: 1em; // as h1 - } - - ul li { - margin-top: 0; - - // active language - span.wikilink1 { - .fnButton(); - .fnActiveButton(); - cursor: default; - } - - a.wikilink1{ - .fnButton(); - } - - span.wikilink2{ - .fnButton(); - .fnButtonSecondary(); - .fnActiveButtonSecondary() - } - - a.wikilink2, - a.wikilink2:visited{ - .fnButton(); - .fnButtonSecondary(); - background-color: var(--color-shade-4); - } - } -} - -@media @screen_max-md { - .dokuwiki div.plugin_translation { - clear: both; - margin-top: 1rem; - } -} diff --git a/css/plugins/wrap.less b/css/plugins/wrap.less deleted file mode 100644 index 0c0948c..0000000 --- a/css/plugins/wrap.less +++ /dev/null @@ -1,119 +0,0 @@ -.dokuwiki { - span.wrap_em { - color: var(--color-error); - } - - span.wrap_hi { - background-color: var(--color-highlight); - color: var(--color-foreground); - } - - span.wrap_lo { - color: var(--color-text-2); - } - - div.plugin_wrap { - &.wrap_box { - background-color: var(--color-shade-1); - color: var(--color-foreground); - } - - &.wrap_info, - &.wrap_tip, - &.wrap_important, - &.wrap_alert, - &.wrap_help, - &.wrap_download, - &.wrap_todo { - @media @screen_max-md { - flex-direction: column; - } - - display: flex; - align-items: start; - gap: 1rem; - border: none; - border-left: solid 0.5rem var(--color-shade-4); - border-radius: 0.5rem; - padding: 1em; - background-image: none; - background-color: var(--color-shade-1); - - &::before { - content: ""; - flex-shrink: 0; - margin-top: 0.3em; - width: 2em; - height: 2em; - mask-size: contain; - mask-position: center top; - mask-repeat: no-repeat; - background-color: currentColor; - } - } - - &.wrap_info { - color: var(--color-foreground); - - &::before { - mask-image: url(img/info.svg); - } - } - - &.wrap_tip { - color: var(--color-foreground); - - &::before { - mask-image: url(img/lightbulb.svg); - } - } - - &.wrap_important { - border-left-color: var(--color-warning); - color: var(--color-foreground); - - &::before { - background-color: var(--color-warning); - mask-image: url(img/warning.svg); - } - } - - &.wrap_alert { - border-left-color: var(--color-error); - color: var(--color-foreground); - - &::before { - background-color: var(--color-error); - mask-image: url(img/power.svg); - } - } - - &.wrap_help { - border-left-color: var(--color-accent-1); - color: var(--color-foreground); - - &::before { - background-color: var(--color-accent-1); - mask-image: url(img/question.svg); - } - } - - &.wrap_download { - border-left-color: var(--color-success); - color: var(--color-foreground); - - &::before { - background-color: var(--color-success); - mask-image: url(img/arrow_down.svg); - } - } - - &.wrap_todo { - color: var(--color-foreground); - - &::before { - mask-image: url(img/tick_small.svg); - } - } - } -} diff --git a/css/print.less b/css/print.less index 1c475ac..d655956 100755 --- a/css/print.less +++ b/css/print.less @@ -1,517 +1,6 @@ /** * This file provides the styles for printing. + * + * @author Jana Deutschlaender */ -/* + + + + + variables + + + + + */ -@color-print: #000; -@background-print: transparent; -@border-color-print: #ccc; -@border-dark-print: #777; - -/* + + + + + print styles + + + + + */ -html, -body { - background: @background-print; -} - -a:link, -a:visited { - background: @background-print !important; - color: @color-print !important; - text-decoration: underline; -} - -/* lightbox is shown: */ #dokuwiki__top[style="overflow: hidden;"] .page-wrapper, -#spr__direct, -.top-header, -.main-footer, -.menu-togglelink, -.main-title.desktop-only, -#spr__meta-box, -.content .row > .col-xs-12 #dokuwiki__content::before, -.page-wrapper > .tools, -.breadcrumbs, -.wikilink1[href*="id=pagefooter"], -.structaggregation > a.export, -#dokuwiki__content .structaggregation > a, -#dokuwiki__content a.folder { - display: none !important; -} - -.content .row > .col-xs-12 { - box-shadow: none; -} - -.dokuwiki div.page, -.main-sidebar.claim, -.page-footer { - padding: 20pt 20pt 0; -} - -#dokuwiki__header .logo img { - height: 4rem; - width: auto; -} - - -/* + + + + + + + + + + + + + + */ -/* + + + + + admin + + + + + */ - -/* + + + acl_manager + + + */ -#acl__tree { - display: none; -} - -#acl__detail { - .aclpage { - display: block; - font-size: 110%; - margin-top: 13pt; - padding-bottom: 13pt; - } -} - -/* + + + Extension Manager + + + */ -#extension__manager { - form.search { - display: inline-block; - margin-bottom: 20pt; - } - form.install { - display: none; - } - ul.tabs { - li.active { - a { - font-weight: bold; - text-decoration: none; - } - } - } -} - -#extension__list { - .extensionList { - border-bottom: 1pt solid @border-color-print; - padding: 0; - - li { - list-style-type: none; - border-top: 1pt solid @border-color-print; - margin-left: 0; - - &::after { - content: ''; - clear: both; - display: table; - height: 10pt; - } - - a.info, - .actions.col { - display: none; - } - - .screenshot { - float: left; - border: 1pt solid @border-color-print; - margin: 0 10pt 5pt 0; - } - - h2, h2 * { - font-size: 100%; - } - } - } -} - -#user__manager { - table input, - .import_users input{ - display: none !important; - } -} -#acl__detail #acl__user { - display: none; -} - -.do-admin #dokuwiki__content { - - #confmanager { - .popup, - .confmanager_singleLine#local, - button, - .button.saveButton { - display: none !important; - } - - .confmanager_singleLine { - div.defaultValue { - word-break: break-all; - } - } - - } - - > form > fieldset { - - border-color: @border-color-print; - - > textarea.edit[readonly] { - border: 0 none; - min-height: 2250pt; - overflow:visible; - display: block; - page-break-inside: auto; - - + br + label[for="autosubmit"] { - margin-top: 20pt; - - input { - margin-right: 5pt; - } - } - } - } - - #magicmatcher__repoadmin { - - button { - display: none; - } - .service-wrapper { - padding-top: 1rem; - } - } - - .plugin_move_form { - legend { - display: none; - } - } - - #plugin__qc_admin { - table .centeralign { - .qc_icon svg + span { - vertical-align: top; - } - } - } - - .doku_form.struct_newschema { - button { - display: none; - } - } - form.plugin_tagging { - display: none; - } - - #plugin__upgrade_meter { - ol li .stage { - padding-left: .4em; - } - } - - #plugin__upgrade { - code { - word-break: break-all; - font-size: .82rem; - } - } -} - -/* + + + Configuration Settings + + + */ -#dokuwiki__content #config__manager { - fieldset { - padding: 0; - - legend { - padding: 0 .5em; - text-align: center; - background-color: #fff; - } - > .table > table { - border: 0 solid @border-color-print; - width: 100%; - tr { - border-top: 1pt solid @border-color-print; - - &:first-child { - border-top-width: 0; - } - td { - border-width: 0; - } - } - } - } - td.value, - td.label { - font-size: 100%; - padding: .6em 0 .8em 1em; - } - td.label { - width: 35%; - span.outkey, span.outkey * { - font-size: 100%; - } - label { - display: block; - } - span.outkey, label { - padding-left: .2rem; - } - } - - td.value { - input[type="text"] { - border: 0 none; - } - - select { - max-width: 80%; - box-sizing: border-box; - border: 1px solid transparent; - background: transparent; - } - .selectiondefault { - position: relative; - - input.checkbox { - position: absolute; - top:0; - left: 0; - } - - label, input[type="text"] { - position: relative; - top:0; - left: 0; - margin-left: 20pt; - margin-top: .5em; - padding-left: 0; - background-color: transparent; - } - } - } - -} - -.do-admin div.ui-admin ul.admin_tasks, -.do-admin div.ui-admin ul.admin_plugins { - li { - list-style-type: none; - min-height: 2em; - - a { - span.icon { - float: left; - clear: left; - display: inline-block; - width: 22pt; - height: 22pt; - border: 1pt solid @border-color-print; - margin: 0 10pt 0 0; - - &:empty { - &::before { - content: "?"; - display: inline-block; - padding-top: 1pt; - } - } - - svg { - width: 20pt; - height: 20pt; - - path { - fill: @color-print; - } - } - } - - span.prompt { - min-height: 26pt; - display: inline-block; - margin: 0; - padding-top: 4pt; - } - } - } -} - -/* + + + + + + + + + + + + + + + + + + + + + + + */ -/* + + + + + Template Style Settings + + + + + */ -.page-footer { - border-top: 1pt solid @border-color-print; - margin-top: 13pt; -} - -#dokuwiki__content #plugin__styling { - - button { - display: none !important; - } - - .styling input[type="text"] { - border: 0 none; - } -} - -/* + + + data plugin + + + */ -.dataplugin_entry dl { - border: 1pt solid @border-color-print; - padding: 7pt; - margin: 7pt 0; - - dt { - clear: left; - float: left; - width: 22%; - font-weight: bold; - text-align: right; - margin-right: 5pt; - } -} - -#dokuwiki__detail { - div.img_detail dl { - dt { - display: inline-block; - width: 20%; - background-color: transparent; - } - dd { - display: inline-block; - width: 75%; - } - } -} - -/* + + + tabbox + + + */ -div#dwpl-ti-container .dwpl-ti, -.dwpl-ti-permalink-header, -.dwpl-ti-permalink-footer { - display: none !important; -} - -div#dwpl-ti-container div.dwpl-ti-content-box { - box-shadow: none; - border: 0 none; -} - -/* + + + media nmanager + + + */ -#mediamanager__page { - .namespaces, - .filelist .tabs, - .panelHeader form { - display: none; - } - - ul.rows { - width: auto; - padding: 0; - } - - .filelist li { - clear: both; - list-style-type: none; - margin: 7pt 0 0; - - dl { - position: relative; - display: table; - border-top: solid 1pt @border-color-print; - padding-top: 2rem; - } - - dt { - display: table-cell; - width: 10%; - height: 40px; - - .size, - .filesize { - width: 15%; - } - - .date { - width: 20%; - } - } - - dd { - display: table-cell; - - &.name { - position: absolute; - top: .5rem; - left: 0; - display: block; - font-weight: bold; - margin: 0; - } - } - } -} - -/* + + + forms + + + */ -form { - button { - &[type="submit"], - &[type="reset"] { - display: none; - } - } - - fieldset { - label, - label.block { - display: block; - text-align: left; - } - - br + br { - display: none; - } - - label { - clear: both; - - > input { - &:first-child { - float: left; - } - - + span { - float: left; - display: inline-block; - padding-left: 7pt; - padding-bottom: 13pt; - } - } - } - - label.block { - display: block; - text-align: left; - - > span { - float: none; - padding-bottom: 0; - - &:first-child { - display: block; - } - } - } - } - - input, - textarea, - select { - border: 1pt solid @border-dark-print; - } -} diff --git a/css/template_admin.less b/css/template_admin.less index f085a35..6f4659d 100644 --- a/css/template_admin.less +++ b/css/template_admin.less @@ -1,7 +1,10 @@ /** * This file provides the design styles for the admin tools + * + * @author Jana Deutschlaender */ + .do-admin { #admin__version { font-size: @font-size-default; @@ -49,7 +52,7 @@ svg { width: 26px; height: 26px; - border: solid 1px var(--color-background); + border: solid 1px @ini_background; border-radius: @ini_default_border_radius; fill: @ini_existing; transition: @transition background-color, @transition border-color, @transition fill; @@ -68,10 +71,10 @@ svg { background-color: @ini_existing; border-color: @ini_existing; - fill: var(--color-background); + fill: @ini_background; path { - fill: var(--color-background); + fill: @ini_background; } } } @@ -82,8 +85,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* 1024px */ + @media @screen_max-md { .do-admin { div.ui-admin { @@ -108,8 +113,10 @@ } } + /* + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* 768px */ + @media @screen_max-xs { .do-admin { div.ui-admin { diff --git a/css/template_detail.less b/css/template_detail.less index 0e06a5a..d73eb28 100644 --- a/css/template_detail.less +++ b/css/template_detail.less @@ -1,106 +1,103 @@ /** * This file provides the design styles for the the detail template * (media details) + * + * @author Jana Deutschlaender */ + #dokuwiki__detail { - /* + + + + + linked image + + + + + */ - @media screen { - .img-link { - text-align: center; +/* + + + + + linked image + + + + + */ + .img-link { + text-align: center; - a { - position: relative; + a { + position: relative; + left: 0; + display: inline-block; + max-width: 100%; + color: @ini_button_color; + margin: 0 auto 1.4em; + + &::before { + position: absolute; + top: 0; left: 0; - display: inline-block; - max-width: 100%; - color: var(--color-foreground); - margin: 0 auto 1.4em; + z-index: 2; + display: block; + width: 100%; + box-sizing: border-box; + background: @ini_button_background; + line-height: @line-height-default; + padding: @margin-small; + } + + img { + margin: 0; + display: block; + border: 1px dotted @ini_background_site; + position: relative; + z-index: 1; + } + + &:hover, + &:focus, + &:active { + text-decoration: none; &::before { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - box-sizing: border-box; - background: var(--color-background); - line-height: @line-height-default; - padding: @margin-small; + content: attr(title); } img { - margin: 0; - display: block; - border: solid 0.1rem transparent; - position: relative; - } - - &:hover, - &:focus, - &:active { - text-decoration: none; - - &::before { - content: attr(title); - border: solid 0.1rem var(--color-glow-primary); - transition: var(--transition-glow); - filter: var(--filter-glow-primary); - } - - img { - border: solid 0.1rem var(--color-shade-4); - } + border: 1px solid @ini_button_background; } } } } - /* + + + + + meta data + + + + + */ +/* + + + + + meta data + + + + + */ div.img_detail { - @media screen { - /* vertical minus margin of .img-detail corresponds to the padding of .page */ - background-color: var(--color-shade-1); - border: solid 0.1em var(--color-shade-4); - margin: @margin-default -(@margin-default); - color: var(--color-foreground); - h1, - h2, - h3, - h4, - h5, - h6, - p { - padding-left: @margin-default; - padding-right: @margin-default; - } + /* vertical minus margin of .img-detail corresponds to the padding of .page */ + background-color: @ini_background_page_header; + border: solid @ini_border_light; + border-width: 1px 0; + margin: @margin-default -(@margin-default); - > h4 { - padding-top: (@margin-default / 2); - } + h1, + h2, + h3, + h4, + h5, + h6, + p { + padding-left: @margin-default; + padding-right: @margin-default; + } + + > h4 { + padding-top: (@margin-default / 2); } dl { - @media screen { - .display-flex(); - .flex-wrap(); + .display-flex(); + .flex-wrap(); - width: 100%; + width: 100%; - dt, - dd { - box-sizing: border-box; - margin: .2em 0; - padding: (@small-spacing * 2) @small-spacing; - } + dt, + dd { + box-sizing: border-box; + margin: .2em 0; + padding: (@small-spacing * 2) @small-spacing; } dt { - background-color: none; - color: var(--color-foreground); + background-color: @ini_highlight; + color: @ini_highlight_text; @media @screen_min-xs { width: 33.3%; diff --git a/css/toollist.less b/css/toollist.less deleted file mode 100644 index e9d5b14..0000000 --- a/css/toollist.less +++ /dev/null @@ -1,29 +0,0 @@ -/** - * Styles for site tools and user tools in sidebar - * Using BEM methodology as far as possible - */ - -//.toollist { -//} - -.toollist__listitem { - list-style: none; - - a { - display: inline-flex; - flex-direction: row-reverse; - flex-wrap: nowrap; - align-items: center; - } - - span { - font-size: @font-size-default; - } - - svg { - width: @font-size-default; - vertical-align: middle; - fill: var(--color-foreground); - margin-right: .2em; - } -} diff --git a/deleted.files b/deleted.files deleted file mode 100644 index 3a43b3d..0000000 --- a/deleted.files +++ /dev/null @@ -1,102 +0,0 @@ -# This is a list of files that were present in previous releases -# but were removed later. They should not exist in your installation. -.gitlab-ci.yml -css/area_main-sidebar-content.less -css/area_main-sidebar.less -css/area_sidebar-search.less -css/area_sidetools.less -css/base_fonts.less -css/basic.css -css/content.css -css/design.css -css/includes.css -css/mobile.css -css/plugins/hightlight_parent.less -css/print.css -css/structure.css -fabfile.py -fonts/Google Android License.txt -fonts/icons/fontello-1a5d199c.zip -fonts/icons/svg/index.css -fonts/roboto-black.eot -fonts/roboto-black.svg -fonts/roboto-black.ttf -fonts/roboto-black.woff -fonts/roboto-blackItalic.eot -fonts/roboto-blackItalic.svg -fonts/roboto-blackItalic.ttf -fonts/roboto-blackItalic.woff -fonts/roboto-bold.eot -fonts/roboto-bold.svg -fonts/roboto-bold.ttf -fonts/roboto-bold.woff -fonts/roboto-boldcondensed.eot -fonts/roboto-boldcondensed.svg -fonts/roboto-boldcondensed.ttf -fonts/roboto-boldcondensed.woff -fonts/roboto-boldcondenseditalic.eot -fonts/roboto-boldcondenseditalic.svg -fonts/roboto-boldcondenseditalic.ttf -fonts/roboto-boldcondenseditalic.woff -fonts/roboto-bolditalic.eot -fonts/roboto-bolditalic.svg -fonts/roboto-bolditalic.ttf -fonts/roboto-bolditalic.woff -fonts/roboto-condensed.eot -fonts/roboto-condensed.svg -fonts/roboto-condensed.ttf -fonts/roboto-condensed.woff -fonts/roboto-condenseditalic.eot -fonts/roboto-condenseditalic.svg -fonts/roboto-condenseditalic.ttf -fonts/roboto-condenseditalic.woff -fonts/roboto-italic.eot -fonts/roboto-italic.svg -fonts/roboto-italic.ttf -fonts/roboto-italic.woff.textClipping -fonts/roboto-italic2.woff -fonts/roboto-light.eot -fonts/roboto-light.svg -fonts/roboto-light.ttf -fonts/roboto-light.woff -fonts/roboto-lightItalic.eot -fonts/roboto-lightItalic.svg -fonts/roboto-lightItalic.ttf -fonts/roboto-lightItalic.woff -fonts/roboto-medium.eot -fonts/roboto-medium.svg -fonts/roboto-medium.ttf -fonts/roboto-medium.woff -fonts/roboto-mediumItalic.eot -fonts/roboto-mediumItalic.svg -fonts/roboto-mediumItalic.ttf -fonts/roboto-mediumItalic.woff -fonts/roboto-regular.eot -fonts/roboto-regular.svg -fonts/roboto-regular.ttf -fonts/roboto-regular.woff -fonts/roboto-thin.eot -fonts/roboto-thin.svg -fonts/roboto-thin.ttf -fonts/roboto-thin.woff -fonts/roboto-thinItalic.eot -fonts/roboto-thinItalic.svg -fonts/roboto-thinItalic.ttf -fonts/roboto-thinItalic.woff -images/apple-touch-icon.png -images/logo.png -js/base/helper.js -js/base/rem.min.js -js/base/spc.js -js/base/velocity.min.js -js/legacy/html5shiv.js -js/legacy/respond.min.js -js/breadcrumb.js -js/sidebar-menu.js -tpl/nav-main.php -tpl/nav-page-quality-tasks.php -tpl/nav-sitetools.php -tpl/nav-trace.php -tpl/nav-usermenu.php -tpl/nav-usertools.php -tpl_functions.php diff --git a/detail.php b/detail.php index 49de8c8..e1df231 100755 --- a/detail.php +++ b/detail.php @@ -1,3 +1,4 @@ + - - +
- - - + } ?>
-
- -
- @@ -166,6 +153,8 @@ include('tpl/favicon_tiles.php');
+ + @@ -184,35 +173,19 @@ include('tpl/favicon_tiles.php'); /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ /* Include Hook: sidebarheader.html */ /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ - tpl_includeFile('sidebarheader.html') + tpl_includeFile('sidebarheader.html') ?>
+
- - getInclude( - 'sidebarheader', - '
', - '
' - ); - ?> - - - getInclude( - 'sidebarfooter', - '
', - '
' - ); + include('tpl/main-sidebar-nav.php'); ?>
@@ -221,7 +194,6 @@ include('tpl/favicon_tiles.php');
-
@@ -260,7 +232,7 @@ include('tpl/favicon_tiles.php');