|
|
Line 1: |
Line 1: |
| /* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ | | =<span class="fa-solid fa-pizza-slice"></span>Lunch talk: Multilingual wiki= |
| @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
| | <div class="collapsers"> |
| @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.ttf);
| | ==<span class="mw-customtoggle-graphic">Supporting a multilingual wiki</span>== |
| @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-regular-400.ttf);
| | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-graphic">[[File:Multilingual wiki.drawio.png|alt=Mechanisms to support a multilingual wiki |center|706x706px]]</div> |
| /*Discussions and attachments currently not in use in the helpdesk, therfore hiding for no */
| | ==<span class="mw-customtoggle-LanguageSwitcher">"Smart" language switchers</span>== |
| .icon-bluespice-logo:before {
| | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-LanguageSwitcher"> |
| font-family: 'icomoon' !important;
| | <div class="sectionflex col2 background"> |
| content: "\e910";
| | <div> |
| }
| | === Language support=== |
| .fa, .fas {
| | options to define which languages are used in the wiki |
| font-family: "Font Awesome 5 Pro";
| | </div> |
| font-weight: 900;
| | <div> |
| }
| | ===Switching pages=== |
| .fa-pizza-slice:before {
| | a mechanism to automatically switch between the language versions of a page |
| font-family: "Font Awesome 5 Pro";
| | </div> |
| content: "\f818";
| | <div> |
| }
| | ===Tracking === |
| | a property that tracks the page language for each page (supported in BlueSpice pro) |
|
| |
|
| /* bootstrap icons in blue and big */ | | fallback: categories track the page language (BlueSpice free) |
| .bi-big {font-size: 2rem; color: #2b80ea}
| | </div> |
| | <div> |
| | ===Support for display title=== |
| | needed for the subpage-technique |
| | </div> |
| | </div> |
|
| |
|
| | === Switcher comparison === |
|
| |
|
| #data-after-content {display: none;}
| | * '''Languages:''' subpages |
| table {font-size: var(--content-font-size);}
| | * '''InterLanguages:''' unrelated pages |
| .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*/ | | </div> |
| .flexbox.themenhd div {background:#fff; border:1px solid #d8d8d9; padding:10px 20px; flex-basis:24%; text-align:left}
| | ==<span class="mw-customtoggle-useLang">User language support</span>== |
| .flexbox.themenhd div [class*=" bi-"]::before {font-size: 1.6em; vertical-align: middle;background-color: #fff; padding: 6px; border-radius: 50%;}
| | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-useLang"> |
| .flexbox.themenhd div [class*=" bi-"]::before {font-size:2em; vertical-align:middle; background-color:#f1f3f9; padding: 10px; }
| | <div class="sectionflex col2 background"> |
| .themenhd div a {display:block}
| | <div> |
| .themenhd div:hover {background:rgb(233,233,238,0.5)}
| | ===Based on system messages=== |
| ul.smw-format.ul-format.alltopics-col {column-count: 3;}
| | *imported with language switcher template |
| | *needs to be checked for <nowiki> {{CONTENTLANGUAGE}} </nowiki> |
|
| |
|
| /*Tours */ | | </div> |
| .nextstep {display: inline-block;padding: 6px;background: #36c;border-radius: 2px;color: #ffffff;font-weight: bold;}
| | <div> |
| #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) {
| | ===<code><nowiki>{{int:</nowiki>''message name''<nowiki>}}</nowiki></code>=== |
| color: #ffffff; font-weight: bold;}
| | *Translates the '''int'''erface message into the user language |
| #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 {
| | *<nowiki>{{int:lang}}</nowiki> |
| color: #efefef;}
| | </div> |
| .nextstep a:not(.new)::after, .nextstep a:link:not(.new)::after {content: " \25B6";}
| | <div> |
| | | ===Add or switch content=== |
| /*Main page*/ | | *Switch the entire page content |
| .flexbox-portal div > h2 span::before {vertical-align: text-bottom; size:1.1em;}
| | *Show additional content |
| .mw-parser-output .flexbox-portal.col3 > div:nth-child(3n) {margin-right:0 !important}
| | </div> |
| #maintopics ul {list-style: none!important;}
| | <div> |
| #maintopics li {padding-bottom:0.6em!important;margin-left: 12px!important;}
| | ===Support templates/forms=== |
| #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;}
| | Switch labels |
| #mpbanner-byline {font-size:1.8em; color:#3e5389;line-height: 0.8rem; padding-top: 20px;}
| | </div> |
| #mpbanner-title {font-size:3.4em; color:#3e5389; line-height:1.2em; font-weight: 900;letter-spacing: 1px;}
| | </div></div> |
| #maintopics h2 span::before {vertical-align: text-bottom;padding-bottom: 2px;}
| | ==<span class="mw-customtoggle-cats">Category system</span>== |
| | | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-cats"> |
| /** Cards **/
| | [[File:multilingual-categories.png|alt=Multilingual categories|center]]</div> |
| .cards {display:flex; flex-wrap:wrap; justify-content: space-around;}
| | ==<span class="mw-customtoggle-ideas">Further considerations</span>== |
| .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);
| | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-ideas"> |
| transition: all .3s cubic-bezier(.25,.8,.25,1); cursor: pointer; text-align:center}
| | *Ad-hoc on-page translation (DeepL) -> duplicate page to make translation permanent |
| .cards > div:hover {
| | *Improvements to sidebar regarding language support |
| box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);
| | *MediaWiki translation extension |
| }
| | </div> |
| .cards a.image img {max-width:600px}
| | ==<span class="mw-customtoggle-docu">Documentation</span>== |
| .cards .screenshot {width:300px;height:200px; overflow:hidden; border-top:14px solid #eee; border-bottom:14px solid #eee}
| | <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-docu"> |
| #content #bodyContent .cards h2 {margin:10px; padding:0; font-size:1.1rem; font-color:#444; border:none; text-align:center}
| | Helpdesk EN: [[Multilingual wiki]] |
| .cards h2 .mw-editsection {display:none}
| | </div> |
| .cards .text {font-size:0.85rem; padding:20px 10px; text-align:center; font-weight:bold;}
| | </div> |
| #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
| | __NOTOC__ |
| {color:#444;}
| | __HIDETITLE__ |
| .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}
| |