Yukii (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Yukii (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 704: | Zeile 704: | ||
.kommentare { | .kommentare { | ||
width: | max-width:900px; | ||
background-color:#0D1E41; | background-color:#0D1E41; | ||
border-radius:28px; | border-radius:28px; |
Version vom 7. September 2020, 08:49 Uhr
/********************************* Zwei container formatierung Responsive 50/50 *********************************/ @media only screen { /* klassischer Desktop, zweispaltig; Grundstruktur */ #container { overflow: auto; padding-bottom: 1px; } #container-links, #container-rechts { float: left; width: calc(50% - 0.5em - 0.005px); } #container-links { margin-right: 1em; } #container-unten { clear: both; } #container-oben, #container-unten { text-align: center; } } @media only screen and (max-width: 54rem) { /* Platzmangel */ #container-links, #container-rechts { float: none; margin-right: 0; width: auto; } #container-oben, #container-unten, p:first-child { text-align: left; } } @media only screen and (max-width: 42rem) { /* Besonders kleiner Screen */ #container-oben { display: none; } } @media only screen and (min-width: 180rem) { /* Mehr als zweispaltig; 121rem */ #container-links { float: none; margin-right: 0; width: auto; } #container-links-container-oben, #container-links-container-unten { float: left; } #container-oben, #container-unten { max-width: none; width: auto; } } @media only screen and (min-width: 99999rem) { /* Dreispaltig */ #container-links-container-oben, #container-links-container-unten { margin-right: 3%; width: 28%; } #container-rechts { width: 38%; } } @media only screen and (min-width: 180rem) { /* Vierspaltig */ #container-rechts { float: none; width: auto; } #container-links-container-oben, #container-links-container-unten, #container-rechts-container-oben, #container-rechts-container-unten { width: 23%; } #container-links-container-oben, #container-links-container-unten, #container-rechts-container-oben, #container-rechts-container-unten { margin-left: 1%; margin-right: 1%; } #container-rechts-container-oben, #container-rechts-container-unten { float: left; } } @media only screen and (min-width: 260rem) { /* Fünfspaltig */ #container-rechts-container-unten { float: none; width: auto; } #container-links-container-oben, #container-links-container-unten, #container-rechts-container-oben, #container-rechts-container-unten-1, #container-rechts-container-unten-2 { margin-left: 1%; margin-right: 1%; width: 18%; } #container-rechts-container-unten-1, #container-rechts-container-unten-2 { float: left; } #container-rechts-container-unten-2 { margin-right: 0; } #container-unten { max-width: none; } } /********************************* Zwei Spalten formatierung Responsive 75/25 *********************************/ @media only screen { /* klassischer Desktop, zweispaltig; Grundstruktur */ #container1 { overflow: auto; padding-bottom: 1px; } #container1-links{ float: left; width: calc(75% - 0.5em - 0.005px); } #container1-rechts { float: left; width: calc(25% - 0.5em - 0.005px); } #container1-links { margin-right: 1em; } #container1-unten { clear: both; } #container1-oben, #container1-unten { text-align: center; } } @media only screen and (max-width: 54rem) { /* Platzmangel */ #container1-links, #container1-rechts { float: none; margin-right: 0; width: auto; } #container1-oben, #container1-unten, #willkommen p:first-child { text-align: left; } } @media only screen and (max-width: 42rem) { /* Besonders kleiner Screen */ #container1-oben { display: none; } } @media only screen and (min-width: 180rem) { /* Mehr als zweispaltig; 121rem */ #container1-links { float: none; margin-right: 0; width: auto; } #container1-links-oben, #container1-links-unten { float: left; } #container1-oben, #container1-unten { max-width: none; width: auto; } } @media only screen and (min-width: 99999rem) { /* Dreispaltig */ #container1-links-oben, #container1-links-unten { margin-right: 3%; width: 28%; } #container1-rechts { width: 38%; } } @media only screen and (min-width: 180rem) { /* Vierspaltig */ #container1-rechts { float: none; width: auto; } #container1-links-oben, #container1-links-unten, #container1-rechts-oben, #container1-rechts-unten { width: 23%; } #container1-links-oben, #container1-links-unten, #container1-rechts-oben, #container1-rechts-unten { margin-left: 1%; margin-right: 1%; } #container1-rechts-oben, #container1-rechts-unten { float: left; } } @media only screen and (min-width: 260rem) { /* Fünfspaltig */ #container1-rechts-unten { float: none; width: auto; } #container1-links-oben, #container1-links-unten, #container1-rechts-oben, #container1-rechts-unten-1, #container1-rechts-unten-2 { margin-left: 1%; margin-right: 1%; width: 18%; } #container1-rechts-unten-1, #container1-rechts-unten-2 { float: left; } #container1-rechts-unten-2 { margin-right: 0; } #container1-unten { max-width: none; } } /********************************* Zwei Spalten formatierung Responsive 25/75 *********************************/ @media only screen { /* klassischer Desktop, zweispaltig; Grundstruktur */ #container2 { overflow: auto; padding-bottom: 1px; } #container2-links{ float: left; width: calc(25% - 0.5em - 0.005px); } #container2-rechts { float: left; width: calc(75% - 0.5em - 0.005px); } #container2-links { margin-right: 1em; } #container2-unten { clear: both; } #container2-oben, #container2-unten { text-align: center; } } @media only screen and (max-width: 54rem) { /* Platzmangel */ #container2-links, #container2-rechts { float: none; margin-right: 0; width: auto; } #container2-oben, #container2-unten, #willkommen p:first-child { text-align: left; } } @media only screen and (max-width: 42rem) { /* Besonders kleiner Screen */ #container2-oben { display: none; } } @media only screen and (min-width: 180rem) { /* Mehr als zweispaltig; 121rem */ #container2-links { float: none; margin-right: 0; width: auto; } #container2-links-oben, #container2-links-unten { float: left; } #container2-oben, #container2-unten { max-width: none; width: auto; } } @media only screen and (min-width: 99999rem) { /* Dreispaltig */ #container2-links-oben, #container2-links-unten { margin-right: 3%; width: 28%; } #container2-rechts { width: 38%; } } @media only screen and (min-width: 180rem) { /* Vierspaltig */ #container2-rechts { float: none; width: auto; } #container2-links-oben, #container2-links-unten, #container2-rechts-oben, #container2-rechts-unten { width: 23%; } #container2-links-oben, #container2-links-unten, #container2-rechts-oben, #container2-rechts-unten { margin-left: 1%; margin-right: 1%; } #container2-rechts-oben, #container2-rechts-unten { float: left; } } @media only screen and (min-width: 260rem) { /* Fünfspaltig */ #container2-rechts-unten { float: none; width: auto; } #container2-links-oben, #container2-links-unten, #container2-rechts-oben, #container2-rechts-unten-1, #container2-rechts-unten-2 { margin-left: 1%; margin-right: 1%; width: 18%; } #container2-rechts-unten-1, #container2-rechts-unten-2 { float: left; } #container2-rechts-unten-2 { margin-right: 0; } #container2-unten { max-width: none; } } /********************************* infobox *********************************/ .infobox { border: solid 2px #929DA3; box-shadow: inset 0px 0px 0px 2px #FFFFFD; background-color: #62C694; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /********************************* header-format *********************************/ h1 { border-left: 8px solid #0D1E41; padding: 4px 8px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 0 0 10px ; color: #0F2A3A; } h2 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 16px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 0 0 10px ; color: #0F2A3A; } h3 { border-left: 2px solid #0D1E41; padding: 2px 4px; font-size: 13px; font-weight: bold; border-bottom: 2px solid #0D1E41; margin: 0 0 10px ; color: #0F2A3A; } /***************************************** Tabellenformatierung *****************************************/ table.table, table.innerborder {border-collapse:collapse;} table.table > thead > tr > td, table.table > thead > tr > th, table.table > tbody > tr > td, table.table > tbody > tr > th, table.table > tfoot > tr > td, table.table > tfoot > tr > th {border:2px outset #0D1E41;} /********************************************************************************** Sevengamer - Standard-Tabelle ***********************************************************************************/ table.datatable-SGtable, table.SGtable { border-collapse:collapse; background-color: transparent; } table.datatable-SGtable th, table.SGtable th, table.datatable td { font-weight: bold; color:#ffffff; padding: 4px; } table.datatable-SGtable th, table.SGtable th { text-align: left; background-color: #335AB6; } table.datatable-SGtable tr, table.SGtable tr { border: 1px solid black; background-color: #E8E8E8; } table.datatable-SGtable tr:hover, table.SGtable tr:hover { background-color: #CFCFCF; } /********************************* Ansicht der Kategoriebox *********************************/ div.catlinks { background:#f9f9f9; background:linear-gradient(top,#f9f9f9,#ddd); background:-o-linear-gradient(top,#f9f9f9,#ddd); background:-ms-linear-gradient(top,#f9f9f9,#ddd); background:-moz-linear-gradient(top,#f9f9f9,#ddd); background:-webkit-linear-gradient(top,#f9f9f9,#ddd); border-radius:8px; padding:5px 11px !important; } div.catlinks span { padding:0 8px; } /********************************* Markierung von Weiterleitungen in [[Special:Allpages]] *********************************/ .allpagesredirect { font-weight: bold; } /********************************* ± Zahl) wird in den letzen Änderungen bei minus rot dargestellt, bei plus grün *********************************/ span.mw-plusminus-pos {color: #006400 !important; font-weight: bold;} span.mw-plusminus-neg {color: #8B0000 !important; font-weight: bold;} /********************************* Farbeneinteilung von Bestimmten User *********************************/ /*Bürokraten & Admins*/ .page-Spezial_Letzte_Änderungen a[title="Benutzer:BlueAngel"], .page-Spezial_Letzte_Änderungen a[title="Benutzer:Yukii"], .page-Spezial_Letzte_Änderungen a[title="Benutzer:KingSazh"], .page-Spezial_Letzte_Änderungen a[title="Benutzer:Sunset"], .page-Spezial_WhosOnline a[href$="Benutzer:BlueAngel"], .page-Spezial_WhosOnline a[href$="Benutzer:Yukii"], .page-Spezial_WhosOnline a[href$="Benutzer:KingSazh"], .page-Spezial_WhosOnline a[href$="Benutzer:Sunset"] { font-weight: bold; color:#000; text-shadow: 0 0 6px #D2691E, 0 0 7px #D2691E, 0 0 9px #D2691E, 0 0 12px #D2691E, 0 0 17px #D2691E; background-image: url(http://sqex.sevengamer.de/images/se/8/8a/Logo-mini.jpg); background-position: left center; background-repeat: no-repeat; height:16px; font-family:'Viner Hand ITC'; padding-left: 18px; /* Or size of icon + spacing */ } /*********************************************** Entfernt pfeil bei externen links ***********************************************/ #bodyContent a.external[href^="http://www.playonline.com"], [href^="http://lodestone.finalfantasyxiv.com"], [href^="http://sqex.to"], [href^="http://www.finalfantasyxi.com"], [href^="http://www.finalfantasyxiv.com"], [href^="http://forum.square-enix.com"], [href^="http://www.square-enix.com"], [href^="http://www.sevengamer.de"], [href^="http://archiv.ffxiv.sevengamer.de"], [href^="http://facebook.sevengamer.de"], [href^="http://twitter.sevengamer.de"], [href^="http://youtube.sevengamer.de"], [href^="http://steam.sevengamer.de"] { background-image: none !important; padding-right: 0 !important; } /********************************* Ausblenden diverser Inhalte *********************************/ #f-poweredbyico { display: none; } /************************************************************ Test ************************************************************/ .navi > li { position: relative; align: center; display: inline-block; } .navi > li > ul { position: absolute; align: center; width: 96px; top: 100%; left: 0; margin: 0; display: none; } .navi > li:hover > ul { align: center; display: block; } .navi > li > ul > li { align: center; display: block; } /************************************ TOC-format ************************************* / .toc { float: right !important; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; } /************************************* Gallery-format **************************************/ li.gallerybox{vertical-align:top;display:-moz-inline-box;display:inline-block} ul.gallery,li.gallerybox{zoom:1;*display:inline} ul.gallery{margin:2px;padding:2px;display:block} li.gallerycaption{font-weight:bold;text-align:center;display:block;word-wrap:break-word} li.gallerybox div.thumb { text-align:center; border:1px solid #ccc; margin:2px; -webkit-border-radius: 10px !important; -moz-border-radius: 10px !importrant; border-radius: 10px !important; } div.gallerytext{overflow:hidden;font-size:94%;padding:2px 4px;word-wrap:break-word;} Seitennotiz #siteNotice { position:fixed !important; right:0px !important; bottom:0px !important; } /************************** Kommentare Disqus ***************************/ .kommentare { max-width:900px; background-color:#0D1E41; border-radius:28px; display:inline-block; cursor:pointer; color:#B2D3E4; font-family:Arial; font-size:18px; text-decoration:none; margin: 0; position: absolute; } .kommentare:hover { background-color:#B2D3E4; color:#0D1E41; } .kommentare:active { position:relative; top:1px; }