Manual:MagicWords and MediaWiki:Common.css: Difference between pages

(Difference between pages)
No edit summary
Tag: 2017 source edit
 
No edit summary
 
Line 1: Line 1:
<bookshelf src="Book:User manual" />
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
{{DISPLAYTITLE:Magic words}}
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */
.icon-bluespice-logo:before {
    font-family: 'icomoon' !important;
    content: "\e910";
}


<section begin=training-intro />A "magic word" is a string of text that is recognized by the MediaWiki software. It triggers the software to return the value of a function, such as dates, website statistics or page names. <section end=training-intro />


== Types of magic words==
/* bootstrap icons in blue and big */
<section begin="training " />
.bi-big {font-size: 2rem; color: #2b80ea}


*'''Behavior switch''' (or "Double underscore"):  <code><nowiki>__TOC__</nowiki></code>
*'''Variable''':  <code><nowiki>{{FULLPAGENAME}}</nowiki></code>
*'''Tag''': <code><nowiki><gallery></nowiki></code>
*'''Parser function''':  <code><nowiki>{{#ifeq:x|y|true|false}}</nowiki></code>
<section end="training" />
==The 4 types of MagicWords==


===Behavior switch===
#data-after-content {display: none;}
table {font-size: var(--content-font-size);}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {padding: 0.8em 0.4em;}
span.new::after { content: 'neu!'; vertical-align: super; background: #64b334; margin-left: 3px;font-size: 10px;padding: 2px 5px; border-radius: 50%;
color:#ffffff;}
.flexbox{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:stretch;}
.flexbox div{margin:5px;padding:2px 8px;text-align:center;background:#ececec}
.center > div.thumb {margin-top:2em}
#content .toctitle h2 {margin-right: 1em; display: inline;font-size: 1.4rem;}
.qtip {font-size: 1em;line-height: 1.4em;}


====Characteristics of a behavior switch====
/*Related links */
h2#relatedinfo
{border-left: solid 4px #d8d8d9;
background:#f1f3f9;
color: #868585;
margin-top: 3rem;
margin-bottom:0 !important;
padding: 20px 10px 2px 30px;
}
.relatedtopics {
display:flex;
flex-wrap: wrap;
border-left: solid 4px #d8d8d9;
background:#f1f3f9;
padding: 2em !important;
margin:0  !important;
}
.relatedtopics .col{flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}


*'''Purpose:''' controls the layout or behavior of the page
/*Themen*/
*'''Syntax:''' <code><nowiki>__NOTOC__</nowiki></code>
.flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
.flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
.flexbox.themenhd  div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
.themenhd div a {display:block}
.themenhd div:hover {background:rgb(233,233,238,0.5)}
ul.smw-format.ul-format.alltopics-col {column-count: 3;}


====Description====
/*Tours */
.nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
#mw-content-text .nextstep a:not(.new), [class^="mw-content-"] .nextstep a:not(.new), #mw-content-text .nextstep a:link:not(.new), [class^="mw-content-"] .nextstep a:link:not(.new) {
    color: #ffffff;    font-weight: bold;}
#mw-content-text .nextstep a:not(.new):hover, #mw-content-text .nextstep a:link:not(.new):hover, [class^="mw-content-"] .nextstep a:link:not(.new):hover {
    color: #efefef;}
.nextstep a:not(.new)::after, .nextstep a:link:not(.new)::after {content: " \25B6";}


A behavior switch includes or omits certain elements of the page. It is also known as "double underscore". Behavior switches can be put anywhere in the source code of the designated page (usually at the end of  the page). The behavior switch  <code><nowiki>__TOC__</nowiki></code> produces as output the table of contents exactly where it was inserted on the page.====
/*Main page*/
.flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
.mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
#maintopics ul {list-style: none!important;}
#maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
#mpbanner {background:#fff url(/w/nsfr_img_auth.php/f/fa/BlueSpice-Demo_Header.jpg) -90px no-repeat; padding-bottom: 20px; background-size: 1000px 122px;}
#mpbanner-byline {font-size:1.8em; color:#3e5389;line-height: 0.8rem; padding-top: 20px;}
#mpbanner-title {font-size:3.4em; color:#3e5389; line-height:1.2em; font-weight: 900;letter-spacing: 1px;}
#maintopics h2 span::before {vertical-align: text-bottom;padding-bottom: 2px;}


===Variable===
/** Cards **/
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
.cards > div {flex-basis:290px; margin-bottom:50px; border-top: 1px solid #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
.cards > div:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
}
.cards a.image img {max-width:600px}
.cards .screenshot {width:300px;height:200px; overflow:hidden; border-top:14px solid #eee; border-bottom:14px solid #eee}
#content #bodyContent .cards h2 {margin:10px; padding:0; font-size:1.1rem; font-color:#444; border:none; text-align:center}
.cards h2 .mw-editsection {display:none}
.cards .text {font-size:0.85rem; padding:20px 10px; text-align:center; font-weight:bold;}
#mw-content-text text a:not(.new), [class^="mw-content-"] .text a:not(.new), #mw-content-text .text a:link:not(.new), [class^="mw-content-"] .text a:link:not(.new), #mw-content-text .text a:not(.new):visited, [class^="mw-content-"] .text a:not(.new):visited, #mw-content-text .text a:link:not(.new):visited, [class^="mw-content-"] .text a:link:not(.new):visited
{color:#444;}
.cards .emptycard, .cards > div.emptycard:hover
{border: 0;
box-shadow: none;}
.getButton {
    display: inline-block;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 0 10px 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 8px;}


====Characteristics of a variable====
#mw-content-text .getButton a:not(.new), [class^="mw-content-"] .getButton  a:not(.new), #mw-content-text .getButton  a:link:not(.new), [class^="mw-content-"] .getButton  a:link:not(.new), #mw-content-text .getButton a:not(.new):visited, [class^="mw-content-"] a:not(.new):visited, #mw-content-text .getButton a:link:not(.new):visited, [class^="mw-content-"] .getButton a:link:not(.new):visited
{color:#ffffff;}
.getButton:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
color:'f5f5f5';
}
.getButton:active {
position:relative;
top:1px;
}
.getButton a:before {font-family: 'fontawesome';
content: '\f019 ';
font-size: 1.3em;
vertical-align: middle;
margin-right: 10px;
}


*'''Purpose:''' returns information about the page, wiki, or date
.cart a:before {font-family: 'fontawesome';
*'''Syntax:''' <code><nowiki>{{PAGENAME}}</nowiki></code>
content: '\f217 ';
}


====Description====
.downloadarea {
Variables contain (simple) dynamic data. If a template name conflicts with a variable, the variable is used. For example, you have the variable <code><nowiki>{{PAGENAME}}</nowiki></code>. In that case, you have to transclude the template with the same name as <code><nowiki>{{Template:PAGENAME}}</nowiki></code>.
text-align:center;
display: inline-block;
float: right;
margin: 0 0 20px 40px;
padding: 10px;
background: #efefef;
background: linear-gradient(270deg, rgb(240, 240, 240) 0%, rgb(224, 224, 224) 52%, rgb(240, 240, 240) 100%);
}
.downloadarea p {margin:0}
@media only screen and (max-width: 768px)
{.cards > div {flex-basis:98%; }
}
.oo-ui-panelLayout-framed {border: 0;}
.oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}


===Parser Function===


=====Characteristics of a parser function=====


*'''Purpose:''' simple "programming language" for page content (mainly in templates)
/*HP Aktuelles */
*'''Syntax:''' <code>'''<nowiki>{{#if:</nowiki>'''<nowiki>{{{field|}}}</nowiki> | <nowiki>{{{field|}}}</nowiki> | N/A '''<nowiki>}}</nowiki>'''</code>
#aktuelles {background: rgba(201, 224, 143, .3); padding:10px; margin:20px 0}
#aktuelles h2::before {font-family:'fontawesome'; font-size:0.8em; content:'\f02e'; color: #64b334; margin-right:10px}
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
#aktuelles table {margin: 0 8px 15px 37px}
#aktuelles td {padding:3px 10px}


=====Description=====
Parser functions are similar to variables, but take one or more parameters.Example:<syntaxhighlight lang="php">
{{#ifeq:{{{type}}}|warning
|This is a warning!
|
}}
</syntaxhighlight>They are used for simple logic only, since they are hard to read and to maintain on a larger scale. If complex logic is required, consider Lua scripts in  the "Module" namespace ([https://www.mediawiki.org/wiki/Extension:Scribunto mediawiki.org/wiki/Extension:Scribunto]) and invoke using <code><nowiki>{{#invoke:...}}</nowiki></code>


Parser functions can also be "tag-like", e.g. <code><nowiki>{{#ask:...}}</nowiki></code> from SemanticMediaWiki. For more information, refer to the MediaWiki help pages [https://www.mediawiki.org/wiki/Help:Extension:ParserFunctions mediawiki.org/wiki/Help:Extension:ParserFunctions] and [https://www.mediawiki.org/wiki/Help:Magic_words#Parser_functions mediawiki.org/wiki/Help:Magic_words#Parser_functions].
table.padded td, table.padded th {padding:8px}


===Tag===
/*Quiz*/
.quiz .question{margin-bottom:3em;}
.questionText{font-weight:700;margin-bottom:1.2em;}
.question .header{background:#fff0e1;padding:1px 6px;}
span.questionText{display:block;}
.question td{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.question th{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.quiz table{width:100%;}
.quizQuestions .question .sign{width:26px;}
.quiz table.settings{margin-left:30px!important;}
.mw-content-ltr .quiz .question .border{border-width:0 0 0 12px !important;}
.quiz .margin.right{background-color:#8ed27d!important;}
.quiz .margin.NA{background-color:#337ecc!important;}
.quiz .margin.wrong{background-color:#ff5c64!important;}
.quiz .question .border.right{border-color:#8ed27d!important;}
.quiz .question .border.NA{border-color:#337ecc!important;}
.quiz .question .border.wrong{border-color:#ff5c64!important;}
.quiz .question .check.right{outline:3px solid #8ed27d!important;}
.quiz .question .check.NA{outline:3px solid #337ecc!important;}
.quiz .question .check.wrong{outline:3px solid #ff5c64!important;}
.quizForm input[value="Submit"]{background:#36c;border:none;color:#FFF;margin-right:10px;margin-left:30px;padding:6px 12px;}
.quizForm input:hover[value="Submit"]{background:#2551aa;}
.quizForm input[value="Reset"]{background:#a4a4a4;border:none;color:#FFF;margin-right:10px;padding:6px 12px;}
.quizForm input:hover[value="Reset"]{background:#858585;}
.quiz .correction{background-color:#ffe4c9;display:block;font-weight:700;margin:10px 0 30px 28px;padding:20px;}


====Characteristics of a tag====
.bi {
    display: inline-block;
    vertical-align: -0.125em;
}
/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}


*'''Purpose:''' often used for custom development to process dynamic content
/*Präsentationen*/
*'''Syntax''': <code><nowiki><smartlist /></nowiki></code>
* {
-webkit-print-color-adjust: exact !important;  /* Chrome, Safari */
color-adjust: exact !important;                /*Firefox*/
}


====Description====
.bs-data-after-content, .mw-lingo-tooltip {display:none}
Tags are implemented in PHP as part of a MediaWiki extension. Tags with "bs:" prefix come from BlueSpice (see [[Reference:BlueSpiceTagSearch]]). All others come from MediaWiki or from third-party extensions, e.g. the extension [[Reference:SyntaxHighlight|SyntaxHighlight]].
.slideNav {font-size:1rem}
.slideNext::after {font-family:"fontawesome"; content:"\f061"; color:blue; margin-left: 5px;}
.slidePrevious::before {font-family:"fontawesome"; content:"\f060"; color:blue; margin-right:5px;}
.slideHd h1 {border-bottom: 1px solid #e5e5e5;}
.main-footer {display:none;}
.slideBoxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.slideBoxes > div {
    width: 45%;
    color: #242424;
    background-color: #f2f2f2;
    border-radius: 20px;
    padding: 4px 30px;
    margin: 15px;
    justify-content:center;
}
.slideBoxes > div.empty {background:none;}
.slideBoxes.hdOnly > div.haslink {transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer;}
.slideBoxes.hdOnly > div.haslink:hover {box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);}
.slideBoxes.hdOnly > div {padding:10px;}
.slideBoxes.col3 > div {width:30%;}
.slideBoxes.col1 > div {width:90%;}
#content #bodyContent .slideBoxes h2 {
font-size:1.375rem;
border-bottom: 0px;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 0px;
font-weight:bold;
color: #242424;
position:relative;
}
#content #bodyContent #mw-content-text .slideBoxes h2 {padding-left:68px; display:block; min-height:2em;}
#content #bodyContent #mw-content-text .slideBoxes.noicon h2 {padding-left:0;}
#content #bodyContent #mw-content-text .slideBoxes h2 a {color: #242424 !important;}


==How to add a magic word==
#content #bodyContent .slideBoxes p {
Magic words are inserted directly in the source code. Some frequently used magic words can also be added directly with the VisualEditor ''Insert > Magic word'' menu item:
margin-top:0.5em;
font-size:1.2em;
}
.slideBoxes .fas,.slideBoxes .fab, .slideBoxes .fa {
    margin-right: 20px;
    vertical-align: sub;
    font-size:1.7em;
    margin-left:-56px;
}
.slidetext, .slidetext p, .slidetext div, .slidetext h3 {font-size:1.3rem;}
#slidecollection {width:100%;}
#slidecollection .slideNav {display:none;}
#slidecollection .slide {padding-top:30px;
background:url('https://de.wiki.bluespice.com/w/nsfr_img_auth.php/6/60/BlueSpice_Logo_v2020-steel-150.png')top right no-repeat !important;
background-size:50px;}
/* printstyles for presentation slides note- PDF export not working well, therefore use browser print function*/
@media print {
* {margin:0;}
body {-webkit-print-color-adjust: exact;}
#slidecollection .slide {page-break-after: always; }
body.mediawiki .wrapper .bs-content.container, body.mediawiki.x-body .wrapper .bs-content.container {max-width:100%;}
.slideBoxes > div {border: 1px solid #aeaeae;}
}


[[File:Manual:VE-insert-magicword.png|300x300px]]


{{Box Links-en
/* Styles for section cards */
|Topic1=[https://www.mediawiki.org/wiki/Help:Magic_words mediawiki.org/wiki/Help:Magic_words]
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
|Topic2=[[Manual:Extension/BlueSpiceInsertMagic| Extension:BlueSpiceInsertMagic]]
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
}}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex > div h3 {margin:0;}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}


.collapsers h2 {background:#e7e7e7; border:0; padding:10px; color:#333}


[[en:{{FULLPAGENAME}}]]
[[de:MagicWords]]


/*Aufzählungszeichen zweite ebene */
.mw-content-ltr ol li li {list-style-type: lower-latin;}


[[Category:Concept]]
/*Referenz Seiten */
.extension-infobox {width:25em;font-size:90%;background-color:#f1f3f9;color:black;margin-bottom:0.5em;margin-left:1em;padding:0.2em;float:right;clear:right;text-align:left;}
.extension-infobox-header{text-align:center;background-color:#2e6096;padding:8px; color:#ffffff;}
.extension-infobox-headertext{font-size:larger;color:#FFFFFF;}
.extension-infobox-description{font-weight:normal!important;text-align:left;background-color:#f1f3f9;padding:20px 10px 20px 10px!important;}
.extension-infobox-first-row{vertical-align:top;padding:20px 10px 0 10px;}
.extension-infobox-row{vertical-align:top;padding:0 10px;}
.extension-infobox-last-row{vertical-align:top;padding:0 10px 20px 10px;}
.extension-infobox-helppage{font-weight:normal;text-align:center;vertical-align:top;padding-left:10px;padding-top:10px;padding-bottom:10px;background-color:#eeeeee;}
.extension-infobox.fullwidth {width:100%; float:none;  font-size:1em; margin-left:0;}
.extension-infobox.fullwidth th {text-align:right; }
.extension-infobox-header, .extension-infobox-helppage {text-align:center !important; font-size:1.1em}
.extension-infobox.fullwidth th, .extension-infobox.fullwidth td {padding:8px;width:100px; border: 1px solid #ffffff;}
.extension-infobox.fullwidth td {width:300px; }
.extension-infobox-helppage { background-color: #eaecf0;}
#content #bodyContent #importdata h3 {margin:1em 0 1.4em;}
#importdata .flexbox {justify-content: space-between; margin-top: 2em;}
#mw-content-text #importdata .flexbox h3, [class^="mw-content-"] #importdata .flexbox h3 {background:#d8d8d9; margin:0 0  12px 0; padding:8px; font-size:1em !important; font-weight:bold}
#importdata .mw ul, .bs ul {margin:0}
#importdata .mw li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 1px top 3px / 18px url('/w/nsfr_img_auth.php/c/c6/MediaWiki-2020-small-icon.svg');}
#importdata .bs li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 2px top 4px / 15px url('/w/nsfr_img_auth.php/c/c4/Bluespice_Icon.svg');}
#importdata .flexbox div {background:#f1f3f9; text-align:left; margin:0; flex-basis:33%; padding:0}
#importdata table.wikitable > tr > th, #importdata table.wikitable > * > tr > th,  table.wikitable.reference > tr > th, .importdata .wikitable.reference > * > tr > th {background-color: #eaecf0;text-align: left;padding:8px; border: 1px solid #ffffff}
#importdata  table.wikitable > tr > td, #importdata  table.wikitable > * > tr > td, #importdata  table.wikitable.reference > tr > td, #importdata  table.wikitable.reference > * > tr > td {padding:8px;  border: 1px solid #ffffff;}
#importdata div .inner {padding:8px 12px}
#importdata .bs p {font-size: 0.9rem; margin-left: 2.1em; display:list-item;}
 
 
/*404 system message badaccess-groups*/
#system404-error {text-align:center;}
#system404-error div.floatnone a.image img {padding:0; margin:0;}
#system404-error hr {
    margin-top: 0px;
    margin-bottom: 2rem;
    border: 0;
    max-width: 600px;
    border-top: 3px dotted #ddd;
}
 
 
#content li {margin-bottom: 0.8em;}
#content .toc li {margin-bottom: 0.1em;}
 
/* Icon in boxes on reference pages */
.questionmark-icon::before {
  content: '\f059';
  font-family: 'fontawesome';
  color:#6f6969;
  vertical-align: -0.1em;
}
 
/*wcagCheck */
#wcaginfo .wikitable > tr > th {text-align:left;}

Revision as of 08:44, 4 August 2022

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
/*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */
.icon-bluespice-logo:before {
    font-family: 'icomoon' !important;
    content: "\e910";
}


/* bootstrap icons in blue and big */
.bi-big {font-size: 2rem; color: #2b80ea}


#data-after-content {display: none;}
table {font-size: var(--content-font-size);}
.wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {padding: 0.8em 0.4em;}
span.new::after { content: 'neu!'; vertical-align: super; background: #64b334; margin-left: 3px;font-size: 10px;padding: 2px 5px; border-radius: 50%;
color:#ffffff;}
.flexbox{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:stretch;align-content:stretch;}
.flexbox div{margin:5px;padding:2px 8px;text-align:center;background:#ececec}
.center > div.thumb {margin-top:2em}
#content .toctitle h2 {margin-right: 1em; display: inline;font-size: 1.4rem;}
.qtip {font-size: 1em;line-height: 1.4em;}

/*Related links */
h2#relatedinfo
{border-left: solid 4px #d8d8d9;
background:#f1f3f9;
color: #868585;
margin-top: 3rem;
margin-bottom:0 !important;
padding: 20px 10px 2px 30px;
}
.relatedtopics {
display:flex;
flex-wrap: wrap;
border-left: solid 4px #d8d8d9;
background:#f1f3f9;
padding: 2em !important;
margin:0  !important;
}
.relatedtopics .col{flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}

/*Themen*/
.flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
.flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
.flexbox.themenhd  div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
.themenhd div a {display:block}
.themenhd div:hover {background:rgb(233,233,238,0.5)}
ul.smw-format.ul-format.alltopics-col {column-count: 3;}

/*Tours */
.nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
#mw-content-text .nextstep a:not(.new), [class^="mw-content-"] .nextstep a:not(.new), #mw-content-text .nextstep a:link:not(.new), [class^="mw-content-"] .nextstep a:link:not(.new) {
    color: #ffffff;    font-weight: bold;}
#mw-content-text .nextstep a:not(.new):hover, #mw-content-text .nextstep a:link:not(.new):hover, [class^="mw-content-"] .nextstep a:link:not(.new):hover {
    color: #efefef;}
.nextstep a:not(.new)::after, .nextstep a:link:not(.new)::after {content: " \25B6";}

/*Main page*/
.flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
.mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
#maintopics ul {list-style: none!important;}
#maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
#mpbanner {background:#fff url(/w/nsfr_img_auth.php/f/fa/BlueSpice-Demo_Header.jpg) -90px no-repeat; padding-bottom: 20px; background-size: 1000px 122px;}
#mpbanner-byline {font-size:1.8em; color:#3e5389;line-height: 0.8rem; padding-top: 20px;}
#mpbanner-title {font-size:3.4em; color:#3e5389; line-height:1.2em; font-weight: 900;letter-spacing: 1px;}
#maintopics h2 span::before {vertical-align: text-bottom;padding-bottom: 2px;}

/** Cards **/
.cards {display:flex; flex-wrap:wrap;  justify-content: space-around;}
.cards > div {flex-basis:290px; margin-bottom:50px; border-top: 1px solid #f0f0f0; box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
.cards > div:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
}
.cards a.image img {max-width:600px}
.cards .screenshot {width:300px;height:200px; overflow:hidden; border-top:14px solid #eee; border-bottom:14px solid #eee}
#content #bodyContent .cards h2 {margin:10px; padding:0; font-size:1.1rem; font-color:#444; border:none; text-align:center}
.cards h2 .mw-editsection {display:none}
.cards .text {font-size:0.85rem; padding:20px 10px; text-align:center; font-weight:bold;}
#mw-content-text text a:not(.new), [class^="mw-content-"] .text a:not(.new), #mw-content-text .text a:link:not(.new), [class^="mw-content-"] .text a:link:not(.new), #mw-content-text .text a:not(.new):visited, [class^="mw-content-"] .text a:not(.new):visited, #mw-content-text .text a:link:not(.new):visited, [class^="mw-content-"] .text a:link:not(.new):visited 
{color:#444;}
.cards .emptycard, .cards > div.emptycard:hover 
{border: 0;
box-shadow: none;}
.getButton {
    display: inline-block;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 0 0 10px 0;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    border-radius: 8px;}

#mw-content-text .getButton a:not(.new), [class^="mw-content-"] .getButton  a:not(.new), #mw-content-text .getButton  a:link:not(.new), [class^="mw-content-"] .getButton  a:link:not(.new), #mw-content-text .getButton a:not(.new):visited, [class^="mw-content-"] a:not(.new):visited, #mw-content-text .getButton a:link:not(.new):visited, [class^="mw-content-"] .getButton a:link:not(.new):visited
{color:#ffffff;}
.getButton:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
color:'f5f5f5';
}
.getButton:active {
	position:relative;
	top:1px;
}
.getButton a:before {font-family: 'fontawesome';
content: '\f019 ';
font-size: 1.3em;
vertical-align: middle;
margin-right: 10px;
}

.cart a:before {font-family: 'fontawesome';
content: '\f217 ';
}

.downloadarea {
text-align:center;
display: inline-block;
float: right;
margin: 0 0 20px 40px;
padding: 10px;
background: #efefef;
background: linear-gradient(270deg, rgb(240, 240, 240) 0%, rgb(224, 224, 224) 52%, rgb(240, 240, 240) 100%);
}
.downloadarea p {margin:0}
@media only screen and (max-width: 768px)
{.cards > div {flex-basis:98%; }
}
.oo-ui-panelLayout-framed {border: 0;}
.oo-ui-tabSelectWidget-framed {border-bottom: 1px solid #d3d5da;}



/*HP Aktuelles */
#aktuelles {background: rgba(201, 224, 143, .3); padding:10px; margin:20px 0}
#aktuelles h2::before {font-family:'fontawesome'; font-size:0.8em; content:'\f02e'; color: #64b334; margin-right:10px}
#aktuelles h2 {margin: 8px 0 8px 24px; color: #454545; font-size: 1.4em; border-bottom: none; }
#aktuelles table {margin: 0 8px 15px 37px}
#aktuelles td {padding:3px 10px}


table.padded td, table.padded th {padding:8px}

/*Quiz*/
.quiz .question{margin-bottom:3em;}
.questionText{font-weight:700;margin-bottom:1.2em;}
.question .header{background:#fff0e1;padding:1px 6px;}
span.questionText{display:block;}
.question td{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.question th{background:#f6f6f6;border-bottom:2px solid #fff;padding:8px 6px 6px;}
.quiz table{width:100%;}
.quizQuestions .question .sign{width:26px;}
.quiz table.settings{margin-left:30px!important;}
.mw-content-ltr .quiz .question .border{border-width:0 0 0 12px !important;}
.quiz .margin.right{background-color:#8ed27d!important;}
.quiz .margin.NA{background-color:#337ecc!important;}
.quiz .margin.wrong{background-color:#ff5c64!important;}
.quiz .question .border.right{border-color:#8ed27d!important;}
.quiz .question .border.NA{border-color:#337ecc!important;}
.quiz .question .border.wrong{border-color:#ff5c64!important;}
.quiz .question .check.right{outline:3px solid #8ed27d!important;}
.quiz .question .check.NA{outline:3px solid #337ecc!important;}
.quiz .question .check.wrong{outline:3px solid #ff5c64!important;}
.quizForm input[value="Submit"]{background:#36c;border:none;color:#FFF;margin-right:10px;margin-left:30px;padding:6px 12px;}
.quizForm input:hover[value="Submit"]{background:#2551aa;}
.quizForm input[value="Reset"]{background:#a4a4a4;border:none;color:#FFF;margin-right:10px;padding:6px 12px;}
.quizForm input:hover[value="Reset"]{background:#858585;}
.quiz .correction{background-color:#ffe4c9;display:block;font-weight:700;margin:10px 0 30px 28px;padding:20px;}

.bi {
    display: inline-block;
    vertical-align: -0.125em;
}
/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}

/*Präsentationen*/
* {
 -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
 color-adjust: exact !important;                 /*Firefox*/
}

.bs-data-after-content, .mw-lingo-tooltip {display:none}
.slideNav {font-size:1rem}
.slideNext::after {font-family:"fontawesome"; content:"\f061"; color:blue; margin-left: 5px;}
.slidePrevious::before {font-family:"fontawesome"; content:"\f060"; color:blue; margin-right:5px;}
.slideHd h1 {border-bottom: 1px solid #e5e5e5;}
.main-footer {display:none;}
.slideBoxes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.slideBoxes > div {
    width: 45%;
    color: #242424;
    background-color: #f2f2f2;
    border-radius: 20px;
    padding: 4px 30px;
    margin: 15px;
    justify-content:center;
}
.slideBoxes > div.empty {background:none;}
.slideBoxes.hdOnly > div.haslink {transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer;}
.slideBoxes.hdOnly > div.haslink:hover {box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);}
.slideBoxes.hdOnly > div {padding:10px;}
.slideBoxes.col3 > div {width:30%;}
.slideBoxes.col1 > div {width:90%;}
#content #bodyContent .slideBoxes h2 {
	font-size:1.375rem;
border-bottom: 0px;
padding-bottom: 0;
margin-top: 10px;
margin-bottom: 0px;
font-weight:bold; 
color: #242424;
position:relative;
}
#content #bodyContent #mw-content-text .slideBoxes h2 {padding-left:68px; display:block; min-height:2em;}
#content #bodyContent #mw-content-text .slideBoxes.noicon h2 {padding-left:0;}
#content #bodyContent #mw-content-text .slideBoxes h2 a {color: #242424 !important;}

#content #bodyContent .slideBoxes p {
margin-top:0.5em;
font-size:1.2em;
}
.slideBoxes .fas,.slideBoxes .fab, .slideBoxes .fa {
    margin-right: 20px;
    vertical-align: sub;
    font-size:1.7em;
    margin-left:-56px;
}
.slidetext, .slidetext p, .slidetext div, .slidetext h3 {font-size:1.3rem;}
#slidecollection {width:100%;}
#slidecollection .slideNav {display:none;}
#slidecollection .slide {padding-top:30px; 
background:url('https://de.wiki.bluespice.com/w/nsfr_img_auth.php/6/60/BlueSpice_Logo_v2020-steel-150.png')top right no-repeat !important;
background-size:50px;}
/* printstyles for presentation slides note- PDF export not working well, therefore use browser print function*/
@media print {
* {margin:0;}
body {-webkit-print-color-adjust: exact;}
#slidecollection .slide {page-break-after: always; }
body.mediawiki .wrapper .bs-content.container, body.mediawiki.x-body .wrapper .bs-content.container {max-width:100%;}
.slideBoxes > div {border: 1px solid #aeaeae;}
	
}


/* Styles for section cards */
.sectionflex {display: flex; flex-wrap: wrap; justify-content:space-between;}
.sectionflex.col1 > div {flex-basis:100%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col2 > div {flex-basis:49%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex.col3 > div {flex-basis:32%; padding:10px 20px 20px 20px; margin:10px 0;}
.sectionflex > div h2 {margin:0 0 1em 0; font-size:1.3em}
.sectionflex > div h3 {margin:0;}
.sectionflex.frame > div {border: 1px solid #e7e7e7}
.sectionflex.background> div {background: #f1f3f9}
.sectionflex .ve-ce-branchNode-slug, span.mw-editsection {display:none}
@media (max-width: 767px) {.sectionflex.col2 > div, .sectionflex.col3 > div {flex-basis:100%; margin-top:2em}}

.collapsers h2 {background:#e7e7e7; border:0; padding:10px; color:#333}


/*Aufzählungszeichen zweite ebene */
.mw-content-ltr ol li li {list-style-type: lower-latin;}

/*Referenz Seiten */
.extension-infobox {width:25em;font-size:90%;background-color:#f1f3f9;color:black;margin-bottom:0.5em;margin-left:1em;padding:0.2em;float:right;clear:right;text-align:left;}
.extension-infobox-header{text-align:center;background-color:#2e6096;padding:8px; color:#ffffff;}
.extension-infobox-headertext{font-size:larger;color:#FFFFFF;}
.extension-infobox-description{font-weight:normal!important;text-align:left;background-color:#f1f3f9;padding:20px 10px 20px 10px!important;}
.extension-infobox-first-row{vertical-align:top;padding:20px 10px 0 10px;}
.extension-infobox-row{vertical-align:top;padding:0 10px;}
.extension-infobox-last-row{vertical-align:top;padding:0 10px 20px 10px;}
.extension-infobox-helppage{font-weight:normal;text-align:center;vertical-align:top;padding-left:10px;padding-top:10px;padding-bottom:10px;background-color:#eeeeee;}
.extension-infobox.fullwidth {width:100%; float:none;  font-size:1em; margin-left:0;}
.extension-infobox.fullwidth th {text-align:right; }
.extension-infobox-header, .extension-infobox-helppage {text-align:center !important; font-size:1.1em}
.extension-infobox.fullwidth th, .extension-infobox.fullwidth td {padding:8px;width:100px; border: 1px solid #ffffff;}
.extension-infobox.fullwidth td {width:300px; }
.extension-infobox-helppage { background-color: #eaecf0;}
#content #bodyContent #importdata h3 {margin:1em 0 1.4em;}
#importdata .flexbox {justify-content: space-between; margin-top: 2em;}
#mw-content-text #importdata .flexbox h3, [class^="mw-content-"] #importdata .flexbox h3 {background:#d8d8d9; margin:0 0  12px 0; padding:8px; font-size:1em !important; font-weight:bold}
#importdata .mw ul, .bs ul {margin:0}
#importdata .mw li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 1px top 3px / 18px url('/w/nsfr_img_auth.php/c/c6/MediaWiki-2020-small-icon.svg');}
#importdata .bs li {margin-left:0;list-style-type:none; padding-left:30px; background:  no-repeat left 2px top 4px / 15px url('/w/nsfr_img_auth.php/c/c4/Bluespice_Icon.svg');}
#importdata .flexbox div {background:#f1f3f9; text-align:left; margin:0; flex-basis:33%; padding:0}
#importdata table.wikitable > tr > th, #importdata table.wikitable > * > tr > th,  table.wikitable.reference > tr > th, .importdata .wikitable.reference > * > tr > th {background-color: #eaecf0;text-align: left;padding:8px; border: 1px solid #ffffff}
#importdata  table.wikitable > tr > td, #importdata  table.wikitable > * > tr > td, #importdata  table.wikitable.reference > tr > td, #importdata  table.wikitable.reference > * > tr > td {padding:8px;  border: 1px solid #ffffff;}
#importdata div .inner {padding:8px 12px}
#importdata .bs p {font-size: 0.9rem; margin-left: 2.1em; display:list-item;}


/*404 system message badaccess-groups*/
#system404-error {text-align:center;}
#system404-error div.floatnone a.image img {padding:0; margin:0;}
#system404-error hr {
    margin-top: 0px;
    margin-bottom: 2rem;
    border: 0;
    max-width: 600px;
    border-top: 3px dotted #ddd;
}


#content li 	{margin-bottom: 0.8em;}
#content .toc	li 	{margin-bottom: 0.1em;}

/* Icon in boxes on reference pages */
.questionmark-icon::before {
   content: '\f059';
   font-family: 'fontawesome';
   color:#6f6969;
   vertical-align: -0.1em;
}

/*wcagCheck */
#wcaginfo .wikitable > tr > th {text-align:left;}




To submit feedback about this documentation, visit our community forum.

No categories assignedEdit

Discussions