Benutzer:Cloned/Testseite

Neues (Standard)-Design

Hier mal ein erster Schritt zu einem neuen Design. Was die Farben angeht: Da habe ich auch mal Farben aus dem englischen Wiki übernommen, diese durch andere zu ersetzen ist in kürzester Zeit erledigt und hier kann man sich auch gerne noch austoben. Ich habe mal versucht unterschiedlichen Elementen (+Tabellen) unterschiedliche Farbkombinationen zu geben, bei zB schon vorhandenen Klassen-Tabellen die schon vorhandenen genommen.

Noch ein Hinweis: Dieses CSS wurde mit der Browser-Erweiterung "Stylish" erstellt während bei mir das neue Standard-Design (Vector?) aktiviert ist. Dieses Design baut sozusagen darauf auf, auch im Hinblick darauf, dass alte Designs nicht kaputt werden. Findet jemand beim Testen dieses CSS Files mit einem anderen eingestellten Design Fehler, wie immer: Einfach melden!

Bezüglich der Box am rechten Rand: Die hat hier einen Header mit Verlauf, falls der nicht gewünscht ist, einfach die Zeilen mit - background: linear-gradient(to bottom, #fff -30%, transparent 56%), #+farbcode+; entfernen. Auch der text-shadow muss nicht sein, bzw. kann auch gerne für andere Tabellenüberschriften verwendet werden. Hier habe ich nur eine persönliche Meinung, nämlich, dass es den Blick schön auf diese Info-Boxen lenkt, aber wie gesagt, das muss nicht so sein.

Dann gibt es noch zB Seiten wie die Rätsel-Seite, da müssten die Tabellen alle überarbeitet werden (Aber da mache ich jetzt eventuell zu viel kaputt wenn ich das jetzt mal mache). Persönliche Geschichte-Tabellen-Seiten müssten auch noch alle angepasst werden, da wurde auch nur mit inline-styles und ohne Klassen gearbeitet, das schaut auch noch "unfertig" aus.

Weitere Seiten, welche noch kaputt aussehen bitte gerne in der Diskussionsseite melden, da gibt es doch bestimmt noch einige!

Habe versucht, das CSS mal schön nach einzelnen Bereichen zu gliedern, zusammenfassen etc. geht nachher immer noch!

/* box-sizing: FTW!*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.mw-wiki-logo {
    background-image:url("/images/b/b8/Benutzer_Dren_WikiLogo1a.png");
}

table.wikit{
    border-radius: 0;
    padding: 0;    
}

table.wikit th{
    background-color: #f9e5cc;
    border-radius: 0 !important;
    border: 0;
}
table.wikit tr th[colspan]{
    border-color: #a29788;
}

div#mw-panel #p-logo + div.portal h3 {
    display: block
}

table.abgerundet{
    border-radius: 0;
    border-collapse: collapse;
}


/*Schneehaufen -> bild mit Scrollbalken bei overflow:auto*/
.infobox-daten{
    /*overflow:auto;*/
    text-align:center;
}

/* wirklich nötig? 
.infobox-daten img{
    display:block;
    max-width: 100%;
    margin: 0 auto;
}
*/

.area-list img {
    display:inline
}

.infobox-daten > a {display:inline-block}

.infobox-daten dl img{
    display:inline;
}


div.infobox{
    border-radius: 0
}
div.infobox .infobox-kopf{
    border-radius: 0;
    margin: 0;
    letter-spacing: 1px;
}
div.infobox .infobox-kopf:first-child{
    padding: 6px 0;
    margin-top: 0
}

div.vorlage-rezept .infobox-kopf{
    background-color: #D3C0A8;
}

.infobox.vorlage-rezept{
    max-width:275px;
    float:none;
    width: 100%;
}

.material-list{
    overflow:auto
}
.material-list > span, .tabelle-rezeptliste td:nth-child(3n) span{
    margin-bottom: 3px
}

.material-list > span:nth-of-type(odd), .tabelle-rezeptliste td:nth-child(3n) span:nth-of-type(odd){
    width: 10% !important;
    float: left;
    clear: left;
    text-align: right;
}
.material-list > span:nth-of-type(even), .tabelle-rezeptliste td:nth-child(3n) span:nth-of-type(even){
    width: 85%;
    float: left;
    margin-left: 5px;
    text-align: left;
}



/*
ALLGEMEINE TABELLEN
*/
table.wikit > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #D3C0A8;
    border-bottom-color: #a29788;
}

table.wikit tr td{
    padding: 5px;
}

table.wikit tr:nth-child(even) td{
    background-color: #F2ECE5;
}



/*Infobox Gegenstände*/
div.infobox-gegenstand {
    border-color: #C30;
}
div.infobox-gegenstand .infobox-kopf{
    background: #C30;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-gegenstand .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #C30;
}
div.infobox-gegenstand .infobox-daten dd{
    border-left-color: #C30;
}

/*
.infobox.infobox-gegenstand .infobox-daten{
    text-align:center;
}
*/

/*
Waffen
*/
div.infobox-waffe .infobox-kopf{
    background: #C30;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-waffe .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #C30;
}
div.infobox-waffe .infobox-daten dd{
    border-left-color: #C30;
}

.infobox.infobox-waffe .infobox-daten{
    text-align:center;
}

.infobox.vorlage-rezept.waffe .infobox-kopf{
    background-color: #2e2eda;
    color: #FFF;
}

/*
Rüstung
*/
div.infobox-rüstung .infobox-kopf{
    background: #C30;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-rüstung .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #C30;
}
div.infobox-rüstung .infobox-daten dd{
    border-left-color: #C30;
}

.infobox.infobox-rüstung .infobox-daten{
    text-align:center;
}


/*
Schmuck
*/
div.infobox-schmuck{
    border-color: #C30;
}
div.infobox-schmuck .infobox-kopf{
    background: #C30;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-schmuck .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #C30;
}
div.infobox-schmuck .infobox-daten dd{
    border-left-color: #C30;
}

.infobox.infobox-schmuck .infobox-daten{
    text-align:center;
}


/*
REZEPTLISTEN
TODO: -- material-list einfügen --, br entfernen
*/
table.tabelle-rezeptliste{
    border-radius: 0;
    padding:0;
}

table.wikit.tabelle-rezeptliste > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #D3C0A8;
    border-bottom-color: #a29788;
}

table.wikit.tabelle-rezeptliste tr:nth-child(even) td{
    background-color: #F2ECE5;
}


/*
NAVLEISTEN
*/
.navleiste{
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}
.navleiste tr{
    border-top: 1px solid rgb(154, 154, 195)
}
.navleiste td{
    margin: 0;
    padding: 4px; /* zb: siehe Düsternis */
}

.navleiste td > div:first-child, .navleiste th > div:first-child{
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 5px 0 !important;
}

.navleiste, .navleiste th{
    border-radius: 0px !important;
    padding: 0;
    margin: 0;
}

/*
ANGEBOTE
*/
table.tabelle-angebote{
    border-radius: 0;
    padding:0;
    border-color: #52A329;
}

table.wikit.tabelle-angebote th{
    background-color: #6b3;
    color: #FFF;
    border-color: #52A329;
}

table.wikit.tabelle-angebote > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #6b3;
    border-bottom-color: #52A329;
}

table.wikit.tabelle-angebote tr:nth-child(even) td{
    background-color: #E8F8E1;
}

/*
NSC
*/
div.infobox-nsc{
    border-color: #6b3;
}
div.infobox-nsc .infobox-kopf{
    background-color: #6b3;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-nsc .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #6b3;
}
div.infobox-nsc .infobox-daten dd{
    border-left-color: #6b3;
}


/*
Schauplatz
*/
table.wikit.tabelle-schauplatz > *:first-child > tr:first-child > th{
    background: #FC6;
}
table.wikit.tabelle-schauplatz tr:nth-child(even) td{
    border-radius: 0 !important;
    background-color: #FFF8E8;
    border-bottom-color: #a29788;
}

div.infobox-schauplatz .infobox-kopf{
    background: #306;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-schauplatz .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #306;
}
div.infobox-schauplatz .infobox-kopf.ebene2{
    background: transparent;
    margin-top: 0 !important;
    color: #FFF;
    text-shadow: none;;
}

div.infobox-schauplatz .infobox-daten dd{
    border-left-color: #306;
}

.infobox.infobox-schauplatz .infobox-daten{
    text-align:center;
}

/*
Belohnungspfad
TODO: Inline-style font-weight: bold für jedes 5. Element entfernen
*/
table.tabelle-belohnungspfad{
    border-radius: 0;
    padding:0;
}

table.wikit.tabelle-belohnungspfad th{
    background-color: #FFCCB3;
    border-color: #CCA38F;
}

table.wikit.tabelle-belohnungspfad > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #F96;
    border-bottom-color: #a29788;
}

table.wikit.tabelle-belohnungspfad tr:nth-child(even) td{
    background-color: #F2ECE5;
}

table.wikit.tabelle-belohnungspfad tr:nth-child(5n + 1 ){
    border-bottom: 2px solid black;
    font-weight: bold;
}
table.wikit.tabelle-belohnungspfad tr:nth-child(5n + 1 ) td{
    border-bottom: 1px solid #CCA38F;
}

/*
Aufgabe
*/
div.infobox-aufgabe{
    border-color: #F90;
}

div.infobox-aufgabe .infobox-kopf{
    background: #F90;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-aufgabe .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #F90;
}
div.infobox-aufgabe .infobox-kopf.ebene2{
    background: transparent;
    margin-top: 0 !important;
    color: #FFF;
    text-shadow: none;;
}

div.infobox-aufgabe .infobox-daten dd{
    border-left-color: #F90;
}

.infobox.infobox-aufgabe .infobox-daten{
    text-align:center;
}

/*
Fehlende Infos
*/
.fehlende-informationen{
    border-radius: 0 !important;
    color: #174468 !important;
    background-color: #d0eeff !important;
    /*border: 1px solid #174468;*/
    padding: 7px !important;
}

/*
Erfolgstabelle
*/
table.tabelle-erfolg{
    border-color: #8FA3B8;
}

table.wikit.tabelle-erfolg > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #69C;
    border-bottom-color: #8FA3B8;
}

table.wikit.tabelle-erfolg tr th{
    background-color: #B3CCE6;
    border-color: #69C;
}

table.wikit.tabelle-erfolg tr:nth-child(even) td{
    background-color: #e2eaf5;
}

/*
Saisonaler Inhalt
TODO: Da ist keine Tabelle notwendig!
*/
table.tabelle-saisonaler-inhalt{
    border-radius: 0px !important;
}

/*
Klassen
*/
/* krieger */
table.krieger > *:first-child > tr:first-child > th {
    background-color: #ffdb5c;
}
table.krieger tr:nth-child(even) td {
    background-color: #fff0bd;
}

/* wächter */
table.wächter > *:first-child > tr:first-child > th {
    background-color: #8ea8c6;
}
table.wächter tr:nth-child(even) td{
    background-color: #d3dde8;
}
/* widergänger */
table.widergänger > *:first-child > tr:first-child > th {
    background-color: #A93333;
}
table.widergänger tr:nth-child(even) td{
    background-color: #FFB0B0;
}

/* dieb */
table.dieb > *:first-child > tr:first-child > th {
    background-color: #b38ea7;
}
table.dieb tr:nth-child(even) td{
    background-color: #efe3ef;
}

/* ingenieur */
table.ingenieur > *:first-child > tr:first-child > th {
    background-color: #e9a159;
}
table.ingenieur tr:nth-child(even) td{
    background-color: #f6e8cd;
}

/* waldläufer */
table.waldläufer > *:first-child > tr:first-child > th {
    background-color: #90d847;
}
table.waldläufer tr:nth-child(even) td{
    background-color: #ddf4c6;
}

/* elementarmagier */
table.elementarmagier > *:first-child > tr:first-child > th {
    background-color: #ee7777;
}
table.elementarmagier tr:nth-child(even) td{
    background-color: #ffdddd;
}

/* mesmer */
table.mesmer > *:first-child > tr:first-child > th {
    background-color: #cf51ee;
}
table.mesmer tr:nth-child(even) td{
    background-color: #eeddff;
}

/* nekromant */
table.nekromant > *:first-child > tr:first-child > th {
    background-color: #74deaf;
}
table.nekromant tr:nth-child(even) td{
    background-color: #ccffee;
}

/* asura */
table.asura > *:first-child > tr:first-child > th {
    background-color: #74deaf;
}
table.asura tr:nth-child(even) td{
    background-color: #ccffee;
}

/*
SHOPSORTIMENT
*/
table.tabelle-shopsortiment{
    border-radius: 0;
    padding:0;
}

table.wikit.tabelle-shopsortiment > *:first-child > tr:first-child > th{
    border-radius: 0 !important;
    background-color: #F96;
    border-bottom-color: #CC7A52;
}

table.wikit.tabelle-shopsortiment tr:nth-child(even) td{
    background-color: #FFF0E8;
}


/*
persönliche Geschichte
*/
div.infobox-persönliche-geschichte {
    border-color: #6ec74d;
}
div.infobox-persönliche-geschichte .infobox-kopf{
    background: #6ec74d;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-persönliche-geschichte .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #6ec74d;
}
div.infobox-persönliche-geschichte .infobox-daten dd{
    border-left-color: #6ec74d;
}

.infobox.infobox-persönliche-geschichte .infobox-daten{
    text-align:center;
}

/*
Eventbelohnungen
*/
table.tabelle-eventbelohnung > tbody >  tr > th {
    padding: 5px !important;
    border: 1px solid #d66f1b !important;
    /*border: none !important;*/
    border-radius: 0 !important;
}

table.tabelle-eventbelohnung  tr > td{
    border: none !important;
    border-radius: 0 !important;
}

table.tabelle-eventbelohnung  tr:first-child > td{
    border: none !important;
    /*border: 1px solid #d66f1b !important;*/
}

table.tabelle-eventbelohnung  tr:nth-child(2) > td:nth-child(3n+1){
    border-right: 1px solid #d66f1b !important;
}

table.tabelle-eventbelohnung  tr:last-child > td, table.tabelle-eventbelohnung  tr:last-child > th{
    border-bottom: 1px solid #d66f1b !important;
}

table.tabelle-eventbelohnung tr:nth-child(2), table.tabelle-eventbelohnung tr:nth-child(4) {
    display: none;
}

table.tabelle-eventbelohnung tr:nth-child(3) > td{
    border-bottom: 1px solid #d66f1b !important;
}
table.tabelle-eventbelohnung tr:nth-child(3) > td[rowspan]{
    border-right: 1px solid #d66f1b !important;
    border-left: 1px solid #d66f1b !important;
}

table.tabelle-event-alt th, table.tabelle-event-alt td{
    border: none !important;
    border-left: 1px solid #d66f1b !important;
    border-right: 1px solid #d66f1b !important;
    border-top:  1px solid #d66f1b !important;
}

div.infobox-event {
    border-color: #f90;
}
div.infobox-event .infobox-kopf{
    background: #F90;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-event .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #F90;
}
div.infobox-event .infobox-daten dd{
    border-left-color: #F90;
}

.infobox.infobox-event .infobox-daten{
    text-align:center;
}

.bug-message > span {
    border-radius: 0px !important;
}

/*
CHARAKTERERSTELLUNG
*/

table.tabelle-charaktererstellung{
    border-radius: 0px;
    border-collapse:collapse;
}

table.tabelle-charaktererstellung table td dl, table.tabelle-charaktererstellung table td p{
    margin: 0 10px 10px;
}
table.tabelle-charaktererstellung table td{
    padding: 0;
    border-radius: 0 !important;
}

table.tabelle-charaktererstellung table td > div {
    border-radius: 0 !important;
}
/*
biographie
*/
table.tabelle-biographie{
    border-radius: 0px;
    border-collapse:collapse;
}

table.tabelle-biographie table td dl, table.tabelle-biographie table td p{
    margin: 0 10px 10px;
}
table.tabelle-biographie table td, table.tabelle-biographie table th{
    padding: 0;
    border-radius: 0 !important;
}

table.tabelle-biographie table td > div {
    border-radius: 0 !important;
}

/*
Objekt
*/
div.infobox-objekt {
    border-color: #390;
}
div.infobox-objekt .infobox-kopf{
    background: #390;
    color: #FFF;
    text-shadow: rgba(0,0,0,0.75) 0 0 .25em;
}
div.infobox-objekt .infobox-kopf:first-child{
	background: linear-gradient(to bottom, #fff -30%, transparent 56%), #390;
}
div.infobox-objekt .infobox-daten dd{
    border-left-color: #390;
}

/*
Willkommensnachticht
*/
table.tabelle-willkommen td, table.tabelle-willkommen td > div:first-child{
    border-radius: 0px !important;
    margin: 0 !important;
}
table.tabelle-willkommen td{
    padding: 0;
}


/*
Galerie
*/
ul.galerie > li > div:first-child{
    width: 200px;
}

/* persönliche Geschichte überblick */
/*[[GW2Wiki:Projekte/Persönliche Geschichte]]*/
.page-GW2Wiki_Projekte_Persönliche_Geschichte table.wikit tr:first-child th{
    text-align: left; 
    border: none;
    background-color: #f9e5cc;
}

.tabelle-geschichtstext{
    border: none;
}
}