Zum Inhalt springen

MediaWiki:Common.css: Unterschied zwischen den Versionen

Aus Informatik.wiki
Übernahme der Styles der bisherigen Unterrichtsseiten
 
Sprachumschalter endgültig rechts ausrichten
 
(7 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
/* Quelle: DGB_1._Klasse.html / dgb1-static-style */
/* Klassisches MediaWiki – keine projektspezifischen Layoutregeln */
.dgb1-wrap{max-width:1050px;margin:0 auto}
.dgb1-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
.dgb1-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
.dgb1-goals li{margin:.35rem 0}
.dgb1-content p{line-height:1.6;margin:.75rem 0}
.dgb1-keybox{background:#f8f9fa;border:1px solid #c8ccd1;border-radius:3px;padding:.65rem .85rem;margin:.85rem 0}
.dgb1-keybox strong{display:block;margin-bottom:.25rem}
.dgb1-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.dgb1-task-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;margin:.75rem 0}
.dgb1-task-meta div{background:#f8f9fa;border:1px solid #eaecf0;padding:.55rem .7rem}
.dgb1-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.dgb1-overview li{margin:.55rem 0}
.dgb1-source{font-size:.9em;color:#54595d;margin-top:2rem}


/* Quelle: DGB_2._Klasse.html / dgb2-static-style */
/* BEGIN INFORMATIK.WIKI DGB1 LANGSWITCH */
.dgb2-wrap{max-width:1050px;margin:0 auto}
#iw-lang-switch {
.dgb2-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    float: right;
.dgb2-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
    margin: 0 0 0.6rem 1rem;
.dgb2-goals li{margin:.35rem 0}
    padding: 0.25rem 0.55rem;
.dgb2-content p{line-height:1.6;margin:.8rem 0}
    border: 1px solid #a2a9b1;
.dgb2-keybox{background:#f8f9fa;border:1px solid #c8ccd1;border-radius:3px;padding:.65rem .85rem;margin:.85rem 0}
    border-radius: 3px;
.dgb2-keybox strong{display:block;margin-bottom:.25rem}
    background: #f8f9fa;
.dgb2-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
    font-size: 0.875rem;
.dgb2-task h3{margin-bottom:.5rem}
    line-height: 1.5;
.dgb2-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
    white-space: nowrap;
.dgb2-overview li{margin:.55rem 0}
}
.dgb2-source{font-size:.9em;color:#54595d;margin-top:2rem}


/* Quelle: DGB_3._Klasse.html / dgb3-static-style */
#iw-lang-switch a,
.dgb3-wrap{max-width:1050px;margin:0 auto}
#iw-lang-switch span {
.dgb3-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    display: inline-block;
.dgb3-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
}
.dgb3-goals li{margin:.35rem 0}
.dgb3-content p,.dgb3-task p{line-height:1.6;margin:.8rem 0}
.dgb3-content h3{margin-top:1.35rem}
.dgb3-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.dgb3-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.dgb3-overview li{margin:.55rem 0}
.dgb3-source{font-size:.9em;color:#54595d;margin-top:2rem}


/* Quelle: DGB_4._Klasse.html / dgb4-static-style */
#iw-lang-switch .iw-lang-separator {
.dgb4-wrap{max-width:1050px;margin:0 auto}
    margin: 0 0.4rem;
.dgb4-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    color: #72777d;
.dgb4-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
}
.dgb4-goals li{margin:.35rem 0}
.dgb4-content p,.dgb4-task p{line-height:1.6;margin:.8rem 0}
.dgb4-content h3{margin-top:1.35rem}
.dgb4-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.dgb4-task h3{margin-bottom:.5rem}
.dgb4-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.dgb4-overview li{margin:.55rem 0}
.dgb4-source{font-size:.9em;color:#54595d;margin-top:2rem}


/* Quelle: Informatik_5._Klasse.html / informatik5-static-style */
#iw-lang-switch .iw-lang-active {
.inf5-wrap{max-width:1050px;margin:0 auto}
    font-weight: 700;
.inf5-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    text-decoration: none;
.inf5-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
    color: inherit;
.inf5-goals li{margin:.35rem 0}
}
.inf5-content p,.inf5-task p{line-height:1.6;margin:.8rem 0}
.inf5-content h3{margin-top:1.35rem}
.inf5-label{font-weight:700;margin-top:.9rem;margin-bottom:.2rem}
.inf5-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.inf5-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.inf5-overview li{margin:.55rem 0}
.inf5-source{font-size:.9em;color:#54595d;margin-top:2rem}
.inf5-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}


/* Quelle: Informatik_6._Klasse.html / informatik6-static-style */
#iw-lang-switch .iw-lang-unavailable {
.inf6-wrap{max-width:1050px;margin:0 auto}
    color: #72777d;
.inf6-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    cursor: default;
.inf6-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
}
.inf6-goals li{margin:.35rem 0}
.inf6-content p,.inf6-task p{line-height:1.6;margin:.8rem 0}
.inf6-content h3{margin-top:1.35rem}
.inf6-label{font-weight:700;margin-top:.9rem;margin-bottom:.2rem}
.inf6-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.inf6-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.inf6-overview li{margin:.55rem 0}
.inf6-source{font-size:.9em;color:#54595d;margin-top:2rem}
.inf6-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}


/* Quelle: Informatik_7._Klasse.html / informatik7-static-style */
@media ( max-width: 720px ) {
.inf7-wrap{max-width:1050px;margin:0 auto}
    #iw-lang-switch {
.inf7-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
        float: none;
.inf7-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
        display: inline-block;
.inf7-goals li{margin:.35rem 0}
        margin: 0 0 0.75rem 0;
.inf7-content p,.inf7-task p{line-height:1.6;margin:.8rem 0}
    }
.inf7-content h3{margin-top:1.35rem}
}
.inf7-label{font-weight:700;margin-top:.9rem;margin-bottom:.2rem}
/* END INFORMATIK.WIKI DGB1 LANGSWITCH */
.inf7-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.inf7-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.inf7-overview li{margin:.55rem 0}
.inf7-source{font-size:.9em;color:#54595d;margin-top:2rem}
.inf7-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}


/* Quelle: Informatik_8._Klasse.html / informatik8-static-style */
/* Doppelten alten Sprachumschalter vor dem Seitentitel ausblenden */
.inf8-wrap{max-width:1050px;margin:0 auto}
#iw-lang-switch-header {
.inf8-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.5rem}
    display: none;
.inf8-note{background:#fff8d6;border:1px solid #c8a000;padding:.75rem 1rem;margin:1rem 0 1.5rem}
}
.inf8-toc{background:#f8f9fa;border:1px solid #a2a9b1;padding:1rem 1.2rem;margin:1rem 0 1.6rem}
.inf8-goals li{margin:.35rem 0}
.inf8-content p,.inf8-task p{line-height:1.6;margin:.8rem 0}
.inf8-content h3{margin-top:1.35rem}
.inf8-label{font-weight:700;margin-top:.9rem;margin-bottom:.2rem}
.inf8-task{border-top:1px solid #eaecf0;padding-top:1rem;margin-top:1.4rem}
.inf8-nav{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem;flex-wrap:wrap}
.inf8-overview li{margin:.55rem 0}
.inf8-source{font-size:.9em;color:#54595d;margin-top:2rem}
.inf8-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}


/* Quelle: Lernpfad:_Algorithmen_und_Programmieren.html / dgb-learning-path-style */
/* Seitentitel links, Sprachumschalter rechts */
.lp-wrap{max-width:1080px;margin:0 auto}
.mw-body-header.vector-page-titlebar {
.lp-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.4rem}
    position: relative;
.lp-goal{background:#eef6ff;border:1px solid #a2c7f0;padding:1rem 1.2rem;margin:1rem 0 1.4rem}
}
.lp-steps{counter-reset:step;list-style:none;padding-left:0;margin:1.2rem 0}
.lp-step{counter-increment:step;border:1px solid #c8ccd1;border-radius:4px;padding:.9rem 1rem .9rem 3.6rem;margin:.8rem 0;position:relative;background:#fff}
.lp-step:before{content:counter(step);position:absolute;left:1rem;top:.9rem;width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaecf0;font-weight:700}
.lp-grade{display:inline-block;font-size:.82em;padding:.12rem .45rem;border:1px solid #a2a9b1;border-radius:10px;background:#f8f9fa;margin-right:.45rem;color:#54595d}
.lp-step a{font-weight:700}
.lp-challenge{background:#fef6e7;border-left:5px solid #ac6600;padding:1rem 1.2rem;margin:1.5rem 0}
.lp-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.2rem 0}
.lp-card{border:1px solid #c8ccd1;border-radius:4px;padding:1rem;background:#fff}
.lp-card h3{margin-top:0}
.lp-card p{margin-bottom:.35rem}
.lp-meta{font-size:.9em;color:#54595d}
.lp-nav{border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem}
.lp-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}


/* Quelle: Lernpfad_Informatik:_Algorithmen,_Computational_Thinking_und_Modellierung.html / informatik-learning-path-style */
.mw-body-header.vector-page-titlebar #iw-lang-switch {
.ilp-wrap{max-width:1080px;margin:0 auto}
    position: absolute;
.ilp-lead{font-size:1.08em;line-height:1.6;background:#f8f9fa;border-left:5px solid #36c;padding:1rem 1.2rem;margin:1rem 0 1.4rem}
    right: 0;
.ilp-goal{background:#eef6ff;border:1px solid #a2c7f0;padding:1rem 1.2rem;margin:1rem 0 1.4rem}
    top: 50%;
.ilp-steps{counter-reset:step;list-style:none;padding-left:0;margin:1.2rem 0}
    transform: translateY(-50%);
.ilp-step{counter-increment:step;border:1px solid #c8ccd1;border-radius:4px;padding:.9rem 1rem .9rem 3.6rem;margin:.8rem 0;position:relative;background:#fff}
    margin: 0;
.ilp-step:before{content:counter(step);position:absolute;left:1rem;top:.9rem;width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaecf0;font-weight:700}
    z-index: 2;
.ilp-grade{display:inline-block;font-size:.82em;padding:.12rem .45rem;border:1px solid #a2a9b1;border-radius:10px;background:#f8f9fa;margin-right:.45rem;color:#54595d}
}
.ilp-step a{font-weight:700}
 
.ilp-challenge{background:#fef6e7;border-left:5px solid #ac6600;padding:1rem 1.2rem;margin:1.5rem 0}
.mw-body-header.vector-page-titlebar #firstHeading {
.ilp-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin:1.2rem 0}
    margin-right: 7.5rem;
.ilp-card{border:1px solid #c8ccd1;border-radius:4px;padding:1rem;background:#fff}
}
.ilp-card h3{margin-top:0}
 
.ilp-card p{margin-bottom:.35rem}
/* FINAL: Seitentitel links, Sprachbox ganz rechts */
.ilp-meta{font-size:.9em;color:#54595d}
.vector-page-titlebar #firstHeading {
.ilp-nav{border-top:1px solid #a2a9b1;margin-top:2rem;padding-top:1rem}
    order: initial !important;
.ilp-cats{border:1px solid #a2a9b1;background:#f8f9fa;padding:.5rem .7rem;margin-top:1.2rem}
    margin-right: 0 !important;
}
 
.vector-page-titlebar #iw-lang-switch {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    order: initial !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}
 
/* FINAL V2: Seitentitel links, Sprachumschalter ganz rechts */
.mw-body-header.vector-page-titlebar {
    display: flex !important;
    align-items: center !important;
}
 
.mw-body-header.vector-page-titlebar .vector-toc-landmark {
    order: 0 !important;
    flex: 0 0 auto !important;
}
 
.mw-body-header.vector-page-titlebar #firstHeading {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}
 
.mw-body-header.vector-page-titlebar .mw-indicators {
    order: 2 !important;
}
 
.mw-body-header.vector-page-titlebar #iw-lang-switch {
    order: 99 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
}

Aktuelle Version vom 11. September 2026, 17:33 Uhr

/* Klassisches MediaWiki – keine projektspezifischen Layoutregeln */

/* BEGIN INFORMATIK.WIKI DGB1 LANGSWITCH */
#iw-lang-switch {
    float: right;
    margin: 0 0 0.6rem 1rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid #a2a9b1;
    border-radius: 3px;
    background: #f8f9fa;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: nowrap;
}

#iw-lang-switch a,
#iw-lang-switch span {
    display: inline-block;
}

#iw-lang-switch .iw-lang-separator {
    margin: 0 0.4rem;
    color: #72777d;
}

#iw-lang-switch .iw-lang-active {
    font-weight: 700;
    text-decoration: none;
    color: inherit;
}

#iw-lang-switch .iw-lang-unavailable {
    color: #72777d;
    cursor: default;
}

@media ( max-width: 720px ) {
    #iw-lang-switch {
        float: none;
        display: inline-block;
        margin: 0 0 0.75rem 0;
    }
}
/* END INFORMATIK.WIKI DGB1 LANGSWITCH */

/* Doppelten alten Sprachumschalter vor dem Seitentitel ausblenden */
#iw-lang-switch-header {
    display: none;
}

/* Seitentitel links, Sprachumschalter rechts */
.mw-body-header.vector-page-titlebar {
    position: relative;
}

.mw-body-header.vector-page-titlebar #iw-lang-switch {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 2;
}

.mw-body-header.vector-page-titlebar #firstHeading {
    margin-right: 7.5rem;
}

/* FINAL: Seitentitel links, Sprachbox ganz rechts */
.vector-page-titlebar #firstHeading {
    order: initial !important;
    margin-right: 0 !important;
}

.vector-page-titlebar #iw-lang-switch {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    order: initial !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* FINAL V2: Seitentitel links, Sprachumschalter ganz rechts */
.mw-body-header.vector-page-titlebar {
    display: flex !important;
    align-items: center !important;
}

.mw-body-header.vector-page-titlebar .vector-toc-landmark {
    order: 0 !important;
    flex: 0 0 auto !important;
}

.mw-body-header.vector-page-titlebar #firstHeading {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}

.mw-body-header.vector-page-titlebar .mw-indicators {
    order: 2 !important;
}

.mw-body-header.vector-page-titlebar #iw-lang-switch {
    order: 99 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
}