Yukii (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Yukii (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 996: | Zeile 996: | ||
Version vom 4. November 2020, 10:42 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; } } /********************************* Zwei Spalten formatierung Responsive 70/30 *********************************/ @media only screen { /* klassischer Desktop, zweispaltig; Grundstruktur */ #container4 { overflow: auto; padding-bottom: 1px; } #container4-links{ float: left; width: calc(70% - 0.5em - 0.005px); } #container4-rechts { float: left; width: calc(30% - 0.5em - 0.005px); } #container4-links { margin-right: 1em; } #container4-unten { clear: both; } #container4-oben, #container4-unten { text-align: center; } } @media only screen and (max-width: 54rem) { /* Platzmangel */ #container4-links, #container4-rechts { float: none; margin-right: 0; width: auto; } #container4-oben, #container4-unten, #willkommen p:first-child { text-align: left; } } @media only screen and (max-width: 42rem) { /* Besonders kleiner Screen */ #container4-oben { display: none; } } @media only screen and (min-width: 180rem) { /* Mehr als zweispaltig; 121rem */ #container4-links { float: none; margin-right: 0; width: auto; } #container4-links-oben, #container4-links-unten { float: left; } #container4-oben, #container4-unten { max-width: none; width: auto; } } @media only screen and (min-width: 99999rem) { /* Dreispaltig */ #container4-links-oben, #container4-links-unten { margin-right: 3%; width: 28%; } #container4-rechts { width: 38%; } } @media only screen and (min-width: 180rem) { /* Vierspaltig */ #container4-rechts { float: none; width: auto; } #container4-links-oben, #container4-links-unten, #container4-rechts-oben, #container4-rechts-unten { width: 23%; } #container4-links-oben, #container4-links-unten, #container4-rechts-oben, #container4-rechts-unten { margin-left: 1%; margin-right: 1%; } #container4-rechts-oben, #container4-rechts-unten { float: left; } } @media only screen and (min-width: 260rem) { /* Fünfspaltig */ #container4-rechts-unten { float: none; width: auto; } #container4-links-oben, #container4-links-unten, #container4-rechts-oben, #container4-rechts-unten-1, #container4-rechts-unten-2 { margin-left: 1%; margin-right: 1%; width: 18%; } #container4-rechts-unten-1, #container4-rechts-unten-2 { float: left; } #container4-rechts-unten-2 { margin-right: 0; } #container4-unten { max-width: none; } } /********************************* drei container formatierung Responsive 33/33/33 *********************************/ @media only screen { /* klassischer Desktop, dreispaltig; Grundstruktur */ #container3 { overflow: auto; padding-bottom: 1px; } #container3-links, #container3-mitte { float: left; width: calc(33% - 0.5em - 0.005px); } #container3-rechts { float: right; width: calc(33% - 0.5em - 0.005px); } #container3-links, #container3-mitte { margin-right: 1em; } #container3-unten { clear: both; } #container3-oben, #container3-unten { text-align: center; } } @media only screen and (max-width: 54rem) { /* Platzmangel */ #container3-links, #container3-rechts, #container3-mitte { float: none; margin-right: 0; width: auto; } #container3-oben, #container3-unten, p:first-child { text-align: left; } } @media only screen and (max-width: 42rem) { /* Besonders kleiner Screen */ #container3-oben { display: none; } } @media only screen and (min-width: 180rem) { /* Mehr als zweispaltig; 121rem */ #container3-links, #container3-mitte { float: none; margin-right: 0; width: auto; } #container3-links-container3-oben, #container3-links-container3-unten { float: left; } #container3-oben, #container3-unten { max-width: none; width: auto; } } @media only screen and (min-width: 99999rem) { /* Dreispaltig */ #container3-links-container3-oben, #container3-links-container3-unten { margin-right: 3%; width: 28%; } #container3-rechts { width: 38%; } } @media only screen and (min-width: 180rem) { /* Vierspaltig */ #container3-rechts { float: none; width: auto; } #container3-links-container3-oben, #container3-links-container3-unten, #container3-rechts-container3-oben, #container3-rechts-container3-unten { width: 23%; } #container3-links-container3-oben, #container3-links-container3-unten, #container3-rechts-container3-oben, #container3-rechts-container3-unten { margin-left: 1%; margin-right: 1%; } #container3-rechts-container3-oben, #container3-rechts-container3-unten { float: left; } } @media only screen and (min-width: 260rem) { /* Fünfspaltig */ #container3-rechts-container3-unten { float: none; width: auto; } #container3-links-container3-oben, #container3-links-container3-unten, #container3-rechts-container3-oben, #container3-rechts-container3-unten-1, #container3-rechts-container3-unten-2 { margin-left: 1%; margin-right: 1%; width: 18%; } #container3-rechts-container3-unten-1, #container3-rechts-container3-unten-2 { float: left; } #container3-rechts-container3-unten-2 { margin-right: 0; } #container3-unten { max-width: none; } } /************************************************ Überschriften Formatierung ************************************************/ h1 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 22px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 10px 0 10px 0; color: #0F2A3A;} h2 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 20px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 5px 0 10px 0; color: #0F2A3A; } h3 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 18px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 5px 0 10px 0; color: #0F2A3A; } h4 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 16px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 5px 0 10px 0; color: #0F2A3A; } h5 { border-left: 4px solid #0D1E41; padding: 4px 8px; font-size: 14px; font-weight: bold; border-bottom: 4px solid #0D1E41; margin: 5px 0 10px 0; color: #0F2A3A; } /*********************************************** Entfernt pfeil bei externen links ***********************************************/ #bodyContent a.external[href^="http://www.playonline.com"], [href^="http://lodestone.finalfantasyxiv.com"], [href^="https://secure.square-enix.com"], [href^="http://de.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^="https://www.sevengamer.de"], [href^="https://ffxi.sevengamer.de"], [href^="https://archiv.ffxiv.sevengamer.de"], [href^="https://ffxiv.sevengamer.de"], [href^="https://facebook.sevengamer.de"], [href^="https://twitter.sevengamer.de"], [href^="https://youtube.sevengamer.de"], [href^="https://steam.sevengamer.de"] { background-image: none !important; padding-right: 0 !important; } /************************************** SEVENGAMER Tabelle **************************************/ table.datatable-SGtable, table.SGtable { border: 1px solid black; border-collapse: collapse; background-color: transparent; color: black; } table.datatable-SGtable th, table.SGtable th, table.datatable td { border: 1px solid black; font-weight: bold; color:#ffffff; padding: 4px; } table.datatable-SGtable th, table.SGtable th { border: 1px solid black; text-align: left; background-color: #4876FF; } table.datatable-SGtable tr, table.SGtable tr { border: 1px solid black; background-color: #D7D8DB; } table.datatable-SGtable tr:hover, table.SGtable tr:hover { border: 1px solid black; background-color: #EBECF0; } /*********************************************** Inhalte ausblenden ***********************************************/ #f-poweredbyico { display: none; } li#lastmod { display: none !important; } /********************************* 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="Benutzerin:ReimiMorrigan"], .page-Spezial_Letzte_Änderungen a[title="Benutzer:Argy"], .page-Spezial_Letzte_Änderungen a[title="Benutzer:Sunset"] { font-weight: bold; color:#0D1E41; background-image: url(https://ffxiv.sevengamer.de/images/e/ea/Sevengamericon.png); background-position: left center; background-repeat: no-repeat; height:20px !important; padding-left: 20px; /* Or size of icon + spacing */ } /************************************************ RSS-Item formatierung ************************************************/ .rss-titel { color: #0D1E41; font-size:12px; font-weight: bold; } .rss-content { color: black; background-color: white; font-size:13px; font-weight: bold; } /************************************* Auftragsbox *************************************/ .auftragsbox { min-width: 200px; max-width: 100%; background-color: #E5E0D6; color: #000000 !important; } .auftragsbox div.content { padding-top: 25px; padding-right: 25px; padding-left: 5px; color: #000000 !important; } .auftragsbox div.toplinks { display:block; background: url("https://ffxiv.sevengamer.de/w/images/d/d9/Box-top-links.png") top left no-repeat; } .auftragsbox div.toprechts { display:block; background: url("https://ffxiv.sevengamer.de/w/images/4/45/Box-top-rechts.png") top right no-repeat; margin-left:27px; } .auftragsbox div.bottomlinks { display: block; background: url("https://ffxiv.sevengamer.de/w/images/4/42/Box-bottom-links.png") bottom left no-repeat; margin-top: -19px; height: 82px; } .auftragsbox div.bottomrechts { display: block; background: url("https://ffxiv.sevengamer.de/w/images/2/27/Box-bottom-right.png") bottom right no-repeat; height: 82px; margin-left:27px; } .auftragsbox div.linksline { display:block; background: url("https://ffxiv.sevengamer.de/w/images/2/23/Box-border-left.png") top left repeat-y; } .auftragsbox div.rechtsline { display:block; background: url("https://ffxiv.sevengamer.de/w/images/f/f7/Box-border-right.png") top right repeat-y; } .auftragsbox div.bottomline { display:block; background: url("https://ffxiv.sevengamer.de/w/images/f/fe/Box-border-bottom.png") bottom left repeat-x; } .auftragsbox div.topline{ display:block; background: url("https://ffxiv.sevengamer.de/w/images/c/c9/Box-border-top.png") top left repeat-x; } .auftragsbox div.topicon{ display:block; background-image: url("https://ffxiv.sevengamer.de/w/images/0/0e/Auftragsicon.png") top center no-repeat !important; height: 65px; } .auftragsbox a:link { color: #00008B; text-decoration: none; } .auftragsbox a:visited { color: #00008B; font-style: oblique; } .auftragsbox a:active { color: #00008B; text-decoration: overline; } .auftragsbox a:hover { color: #00008B; text-decoration: underline; } /************************************* ffxiv Box *************************************/ .ffxivbox{ border:5px solid transparent; padding:5px 5px; color: white !important; font-weight: bold !important; background-image: url(https://ffxiv.sevengamer.de/w/images/f/f2/Boxbg.png); background-repeat: repeat; background-clip:padding-box; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; -webkit-border-image:url("https://ffxiv.sevengamer.de/w/images/f/f7/BoxBGborder.png") 7 7 round; /* Safari 5 */ -o-border-image:url("https://ffxiv.sevengamer.de/w/images/f/f7/BoxBGborder.png") 7 7 round; /* Opera */ border-image:url("https://ffxiv.sevengamer.de/w/images/f/f7/BoxBGborder.png") 7 7 round; } .ffxivbox a:link { color: #45B3D2; text-decoration: none; } .ffxivbox .new { color: #FF0000; text-decoration: none; } .ffxivbox a:visited { color: #45B3D2; font-style: oblique; } .ffxivbox a:active { color: #45B3D2; text-decoration: overline; } .ffxivbox a:hover { color: #45B3D2; text-decoration: underline; } .ffxivbox a:hover .new { color: #FF0000; text-decoration: underline; } .new, #new { color: #FF0000 !important; text-decoration: none; } /********************************************** CSS TEXTKLASSEN **********************************************/ .center { text-align: center;}