Difference between revisions of "MediaWiki:Common.css"

From How to be a Hero
Jump to: navigation, search
 
(One intermediate revision by the same user not shown)
Line 150: Line 150:
 
#hauptseite .mw-headline-anchor {
 
#hauptseite .mw-headline-anchor {
 
display: none;
 
display: none;
 +
}
 +
.res-img img{
 +
max-width:100%;
 +
height:auto;
 
}
 
}
  

Latest revision as of 08:14, 30 July 2020

/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */

/* +++++ 0. Generelle Wikiformatierung +++++ */
.image, a#top{
    background:none !important;
    padding-right: 0px !important;
    text-decoration: none;
}
.image:hover, a#top:hover{
    background:none !important;
}
.mw-body a:not([rel="nofollow"]), .mw-body .external{
    background-position: center right;
    background-repeat: no-repeat;
    background-image: url(/skins/Vector/images/external-link-ltr-icon.png?325de);
    padding-right: 13px;
    text-decoration: underline;
}
.mw-body a:not([rel="nofollow"]):hover, .mw-body .external:hover{
    background-color: #bdbdbd;
}
.mw-body h1{
    font-size: 2.7em !important;
    font-family: "tahoma" !important;
}
.mw-body :not(.toctitle)> h2{
    font-size: 2.3em !important;
    font-weight: bold;
    font-family: "tahoma" !important;
}

.mw-body h3{
    font-size: 1.9em !important;
    border-bottom: 1px solid #a2a9b1;
    font-family: "tahoma" !important;
    font-weight: normal !important;
}

.mw-body h4{
    font-size: 1.6em !important;
    font-family: "tahoma";
}

.mw-body h5{
    font-size: 1.3em !important;
    font-family: "tahoma";
}

/* +++++ 1. HAUPTSEITE +++++ */
.mw-wiki-logo {
        background-size: 100%;
}

.heroimage img, .heroimage {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	border: 0 !important;
	margin: auto;
	margin-top: 2px;
}

.sub {
	padding: 10px 0px 15px;
}

div#hauptseite h2 {
	font-family: inherit;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	padding: .1em 0;
}
div#hauptseite h3 {
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
	padding: .1em 0;
}
#hauptseite .inhalt {
	border-top: 0;
	min-height: 0; /* IE 7 */
	padding: .3em .8em .4em;
}
#hauptseite .inhalt hr {
	height: 1px;
	margin: .5em 0;
}
#hauptseite .inhalt .mehr {
	clear: both;
	font-size: 95%;
	margin-top: .8em;
	text-align: right;
}
.hauptseite-oben,
.hauptseite-obenlinks,
.hauptseite-obenrechts,
.hauptseite-links,
.hauptseite-rechts,
.hauptseite-hinweise,
.hauptseite-mitte{
	margin-bottom: 1em;
}
.hauptseite-obenlinks,
.hauptseite-links {
	margin-right: .5em;
}
.hauptseite-obenrechts,
.hauptseite-hinweise,
.hauptseite-rechts {
	margin-left: .5em;
}
.hauptseite-oben h2,
.hauptseite-obenlinks h2,
.hauptseite-obenrechts h2,
.hauptseite-hinweise h2,
.hauptseite-mitte h2,
.hauptseite-unten h2 {
	text-align: center;
}
.hauptseite-oben .inhalt .portale {
	font-weight: bold;
	margin: .2em 0;
}
.hauptseite-oben .inhalt .intern {
	font-size: 90%;
	text-align: center;
}
.hauptseite-links h2,
.hauptseite-hinweise h2,
.hauptseite-rechts h2, 
.hauptseite-unten h2 {
	text-indent: .8em;
}
.hauptseite-links h3,
.hauptseite-hinweise h3,
.hauptseite-rechts h3, 
.hauptseite-unten h3 {
	text-indent: .8em;
}

.hauptseite-unten h3 {
	font-size: 1.15em;
}
 
#hauptseite .mw-headline-anchor {
	display: none;
}
.res-img img{
max-width:100%;
height:auto;
}

/* +++++ 2. KATEGORIE-KLAPPBOXEN +++++ */
.categoryListTitle {
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    padding: .1em 10px;
    text-decoration: underline;
    border: 2px solid #A3ACBE;
}

.categoryListColumn:hover .categoryListTitle {
    border: 2px solid #838FA7;
    text-decoration: none;
}

.categoryList.hidden {
    display: none;
}

.categoryList.shown {
    display: block;
}

.categoryList-item {
    font-size: 1em;
}

.categoryList {
    padding: 5px 10px;
    background: white;
}

.categoryListRow {
    display: flex;
    flex-wrap: wrap;
}

.categoryListColumn {
    flex-grow: 1;
    flex-basis: 10%;

    background: #A3ACBE;
}

.categoryListColumn:hover {
    flex-grow: 1;
    flex-basis: 10%;

    background: #838FA7;
}

.break-1 .categoryListColumn {
    min-width: 100%;
}

.break-2 .categoryListColumn {
    min-width: 50%;
}

.break-3 .categoryListColumn {
    min-width: 33.333%;
}

.break-4 .categoryListColumn {
    min-width: 25%;
}

.break-5 .categoryListColumn {
    min-width: 20%;
}

.break-6 .categoryListColumn {
    min-width: 16.66666%;
}

.break-7 .categoryListColumn {
    min-width: 14.285%;
}

.break-8 .categoryListColumn {
    min-width: 12.5%;
}

.break-9 .categoryListColumn {
    min-width: 11.1111%;
}

.break-10 .categoryListColumn {
    min-width: 10%;
}

/* +++++ 3. BOX-HALTENDE HOWKYS +++++ */
.howky
{
    position: relative;
}

.howky:after, .howky.tragendBeidseitig:before {
    position: absolute;
    display: block;
    content: '';
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat no-repeat;
}

.howky.knieendUntenLinks:after {
    background-image: url(https://howtobeahero.de/images/c/c5/Howky_Kniened_Unten.png);
    height: 76px;
    width: 63px;
    bottom: -76px;
    left: 0;
}

.howky.knieendUntenRechts:after {
    background-image: url(https://howtobeahero.de/images/c/c5/Howky_Kniened_Unten.png);
    height: 76px;
    width: 63px;
    bottom: -76px;
    right: 0;
}

.howky.stehendUntenLinks:after {
    background-image: url(https://howtobeahero.de/images/6/6b/Howky_Stehend_Unten.png);
    height: 76px;
    width: 44px;
    bottom: -76px;
    left: 0;
}

.howky.stehendUntenRechts:after {
    background-image: url(https://howtobeahero.de/images/6/6b/Howky_Stehend_Unten.png);
    height: 76px;
    width: 44px;
    bottom: -76px;
    right: 0;
}

.howky.tragendBeidseitig:after {
    background-image: url(https://howtobeahero.de/images/1/19/Howky_Stehend_Rechts.png);
    height: 76px;
    width: 41px;
    bottom: 0;
    right: -41px;
}

.howky.tragendBeidseitig:before {
    background-image: url(https://howtobeahero.de/images/5/51/Howky_Stehend_Links.png);
    height: 76px;
    width: 41px;
    bottom: 0;
    left: -41px;
}

/* +++++ 4. BOX-HALTENDE HOWKYS +++++ */
.howkyContainer
{
    position: relative;
}

.howky:after, .howky.tragendBeidseitig:before {
    position: absolute;
    display: block;
    content: '';
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat no-repeat;
}

.howky.knieendUntenLinks:after {
    background-image: url(https://howtobeahero.de/images/c/c5/Howky_Kniened_Unten.png);
    height: 76px;
    width: 63px;
    bottom: -76px;
    left: 0;
}

.howky.knieendUntenRechts:after {
    background-image: url(https://howtobeahero.de/images/c/c5/Howky_Kniened_Unten.png);
    height: 76px;
    width: 63px;
    bottom: -76px;
    right: 0;
}

.howky.stehendUntenLinks:after {
    background-image: url(https://howtobeahero.de/images/6/6b/Howky_Stehend_Unten.png);
    height: 76px;
    width: 44px;
    bottom: -76px;
    left: 0;
}

.howky.stehendUntenRechts:after {
    background-image: url(https://howtobeahero.de/images/6/6b/Howky_Stehend_Unten.png);
    height: 76px;
    width: 44px;
    bottom: -76px;
    right: 0;
}

.howky.tragendBeidseitig:after {
    background-image: url(https://howtobeahero.de/images/1/19/Howky_Stehend_Rechts.png);
    height: 76px;
    width: 41px;
    bottom: 0;
    right: -41px;
}

.howky.tragendBeidseitig:before {
    background-image: url(https://howtobeahero.de/images/5/51/Howky_Stehend_Links.png);
    height: 76px;
    width: 41px;
    bottom: 0;
    left: -41px;
}

/* +++++ 5. AUFTEILENDE BOXEN +++++ */
.flexbox
{
    display: flex;
    flex-wrap: wrap;
}

.flexbox > *
{
    flex: 1 100%;
}

.flexbox > .double
{
    flex: 1 49%;
}

.flexbox > .triple
{
    flex: 1 32%;
}

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).
 */
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 { display: none; }

/* +++++ 6. FIXIERTE INFINITYBARS +++++ */
 .sticky {
    position: fixed;
    z-index: 99999999;
}

/* +++++ 7. YGGDRASIL+++++ */

.ns-104 .mw-body h2 {
        font-size: 3em;
        font-family: serif;
        color: #000eb9;
        text-transform: capitalize;
}
.ns-104 .mw-body h3 {
        font-size: 2.2em;
        font-family: serif;
        color: #006708;
        text-transform: capitalize;
        font-weight: normal;
        border-bottom: 1px solid #868686;
        padding-top: 0em;
}
.ns-104 .mw-body h4 {
        font-size: 1.6em;
        font-weight: bold;
        font-family: sans-serif;
        padding-top: 0.2em;
}
.ns-104 .mw-body h5 {
        font-size: 1.2em;
        font-weight: bold;
        font-family: sans-serif;
}
.ns-104 .mw-body h6 {
        font-size: 1em;
        font-weight: bold;
        font-family: sans-serif;
}
/*
.ns-104 .mw-body a {
        font-weight: bold;
        
}
.ns-104 .mw-editsection a,.ns-104 .wikiEditor-ui-tabs div a{
        font-weight: normal !important;
}
*/
.ns-104 .wikiEditor-ui-controls{
    background: url(https://howtobeahero.de/images/thumb/5/55/Dankepf%C3%B6n.png/800px-Dankepf%C3%B6n.png);
    background-repeat: no-repeat;
    background-size: 16%;
    background-position-x: +99%;
    background-color: white;
}

div#yggimg img {
    margin-top: 0.3em;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    border: 0 !important;
    margin: auto;
    right: 0;

}

.ns-104 .mw-body .toc h2{
    font-weight: normal !important;
    
}

.ns-104 .mw-body .toc a{
    font-weight: normal !important;
    
}

.yggclass #categoryListTitle {
    font-family: inherit;
    font-size: 1em;
    font-weight: bold;
    color: #ffffff;
    line-height: 1.5;
    margin: 0;
    padding: .1em 10px;
    text-decoration: underline;
    border: 2px solid #A3ACBE;
}

.yggclass categoryListTitle {
    border: 5px solid #838FA7;
    text-decoration: none;
}

/* +++++ 8. REGISTER+++++ */
.registerselected {
    white-space: nowrap;
    border: solid;
    border-color: blueviolet;
    border-bottom-color: white; 
    border-width: 2px;
    padding: 0px;
    text-align: center;
}

.registerunselected {
    white-space: nowrap;  
    border: solid; 
    border-color: blueviolet; 
    border-width: 2px;
    padding: 0px;
    text-align: center;
}

.registerunselected a{
    display:block;
    padding: 15px;
    padding-right: 40px;
    padding-left: 40px;
    background-color: tan;
    background-image: none;
}

.registerselected a{
    display:block;
    padding: 15px;
    padding-right: 40px;
    padding-left: 40px;
    background-color: bisque;
    background-image: none;
}
.registerunselected a:hover{
    background-color: rosybrown;
    text-decoration: none;
}
.registerbetween {
    padding: 0; 
    width: 0.2%;
    border-bottom: solid;
    border-bottom-color: blueviolet;
    border-width: 2px;
    text-align: center;

}
.registerrest {
    border-bottom: solid;
    width:100%;
    border-bottom-color: blueviolet;
    border-width: 2px;
    text-align: center;
}

/* +++++ 9. HEADERTEST+++++ */

body.page-Yggdrasil_Test1Ohnetitel h1, body.page-Yggdrasil_Test2Ohnetitel h1, body.page-Yggdrasil_Test3Ohnetitel h1 { 
    border: none;
    display: none;
}

body.page-Yggdrasil_Test1Ohnetitel .mw-body, body.page-Yggdrasil_Test2Ohnetitel .mw-body, body.page-Yggdrasil_Test3Ohnetitel .mw-body { 
    padding-top: 0px;
}


body.page-Benutzerin_Murmelgrumpf h1{
    background-image: url( https://howtobeahero.de/images/thumb/4/40/Vinetest3.PNG/800px-Vinetest3.PNG );
    background-position-y: -10px;
    font-style: italic;
    font-weight: bold;
    color: antiquewhite;
}

body.page-Benutzerin_Murmelgrumpf .mw-wiki-logo:hover{
    background-image: url(https://howtobeahero.de/images/thumb/4/4e/Wikioc.png/800px-Wikioc.png)
}

.ns-104 .mw-collapsed {
    display: none !important;
}

body.page-Headertest h1{
    background-image: url( https://howtobeahero.de/images/thumb/7/70/Headertest2.png/800px-Headertest2.png );
    color: transparent;
    border: none;
    background-repeat: no-repeat;
    background-size: 600px;
}

body.page-Yggdrasil_Religion h1, body.page-Yggdrasil_Religion2 h1, body.page-Yggdrasil_Religion3 h1, body.page-Yggdrasil_Religion4 h1, body.page-Yggdrasil_Religion5 h1, body.page-Yggdrasil_Religion6 h1{  
    font-size:28.8px;
    margin-top: 0px;
}

body.page-Yggdrasil_Religion .firstHeading, body.page-Yggdrasil_Religion2 .firstHeading, body.page-Yggdrasil_Religion3 .firstHeading, body.page-Yggdrasil_Religion4 .firstHeading, body.page-Yggdrasil_Religion5 .firstHeading, body.page-Yggdrasil_Religion6 .firstHeading{ 
    border: none;
    display: none;
}

body.page-Yggdrasil_Religion #contentSub, body.page-Yggdrasil_Religion2 #contentSub, body.page-Yggdrasil_Religion3 #contentSub, body.page-Yggdrasil_Religion4 #contentSub, body.page-Yggdrasil_Religion5 #contentSub, body.page-Yggdrasil_Religion6 #contentSub{
    display: none;
}

body.page-Yggdrasil_Religion h1 .mw-editsection, body.page-Yggdrasil_Religion2 h1 .mw-editsection, body.page-Yggdrasil_Religion3 h1 .mw-editsection, body.page-Yggdrasil_Religion4 h1 .mw-editsection, body.page-Yggdrasil_Religion5 h1 .mw-editsection, body.page-Yggdrasil_Religion6 h1 .mw-editsection{  
    display: none;
}
/* +++++ 10. REDAKTIONSMEETINGSHOWOFF+++++ */

.box {
    color: #000;
    background-color: #f8f9fa;
    border: 1px solid #eaecf0;
    padding: 1em;
    font-family: monospace,'Courier';
    display: block;
	margin-top: 1em;
    margin-bottom: 1em;
}

.box p{
    margin:0;
}

/* +++++ 11. NAVFRAME+++++ */
div.NavFrame + div.NavFrame {
	border-top-style: none;
	border-top-style: hidden;
}
div.NavPic {
	background-color: #fff;
	margin: 0;
	padding: 2px;
	/* @noflip */
	float: left;
}
div.NavFrame div.NavHead {
	position: relative;
}
div.NavFrame p,
div.NavFrame div.NavContent,
div.NavFrame div.NavContent p {
    font-size: 100%;
    
}
div.NavEnd {
    margin: 0;
    padding: 0;
    line-height: 1px;
    clear: both;
}
a.NavToggle {
    position: absolute;
    top: 0;
    right: 1.8em;
    font-weight: normal;
    font-size: 120%;
}

.client-js .NavFrame.collapsed > .NavContent {
	display: none;
}

/* +++++ 12. TagSystem+++++ */
.tagholder {
	margin-left: auto;
	margin-right: auto;
	align-self: center;
	width:100%;
	text-align: center;
}
.tagselected {
	background-color: #ff3939;
	display: inline-block;
	border: 1px solid #ff3939;
	margin-right: 1em;
	margin-left: 1em;
	border-radius: 0.9em;
}

.tagunselected {
	background-color: #ffffff;
	display: inline-block;
	border: 1px solid #ff3939;
	margin-right: 1em;
	margin-left: 1em;
	border-radius: 0.9em;
}
.tagunselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}
.tagselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}

.catselected {
	background-color: #ff3939;
	display: table;
	border: 1px solid #ff3939;
	border-radius: 0.9em;
}
.tagselected .catselected{
	border: 1px solid #ffffff;
}
.catunselected {
	background-color: #ffffff;
	display: table;
	border: 1px solid #ff3939;
	border-radius: 0.9em;
}
.catunselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}
.catselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}

.linkred a{
    display: block;
    background-image: none !important;
    padding-right: 0px !important;
    text-decoration: none !important;
    background: transparent !important;
    color: #ff3939 !important;
}

.linkwhite a{
    display: block;
    background-image: none !important;
    padding-right: 0px !important;
    text-decoration: none !important;
    background: transparent !important;
    color: #ffffff !important;
}

/* +++++ 13. CHECKBOX+++++ */

.checklinkred a{
    display: block;
    background-image: none !important;
    padding-right: 0px !important;
    text-decoration: none !important;
    background: transparent !important;
    color: transparent !important;
}


.checklinkwhite a{
    display: block;
    background-image: none !important;
    padding-right: 0px !important;
    text-decoration: none !important;
    background: transparent !important;
    color: transparent !important;
}



.checktagselected {
	background-color: #ff3939;
	display: inline-block;
	border: 0.1em solid #ff3939;
	margin-right: 1em;
	margin-left: 1em;
	border-radius: 0.9em;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	font-size: 0.7em;
	border-collapse: collapse;
}

.checktagunselected {
	background-color: #ffffff;
	display: inline-block;
	border: 0.1em solid #ff3939;
	margin-right: 1em;
	margin-left: 1em;
	border-radius: 0.9em;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
	font-size: 0.7em;
	border-collapse: collapse;
	
}
.checktagunselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}
.checktagselected:hover {
    background-color: #ff8e8e;
    background-image: none;
    text-decoration: none;
}