Entropia:Sandkasten:GPN16 test:Stylesheet: Unterschied zwischen den Versionen
aus dem Wiki des Entropia e.V., CCC Karlsruhe
Keine Bearbeitungszusammenfassung |
Fxkr (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
(54 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
/* | |||
* GPN16 Stylesheet | * GPN16 Stylesheet | ||
* | * | ||
* https://github.com/entropia/gpn16-design/wiki/ | * https://github.com/entropia/gpn16-design/wiki/ | ||
*/ | */ | ||
/* | |||
* Screen only | |||
*/ | |||
@media screen { | |||
/* site logo */ | |||
div#p-logo.portlet a, | |||
div#p-logo.portlet a:hover { | |||
background-image: url("https://entropia.de/images/0/0a/Gpn16-wikilogo.svg.png") !important; | |||
display: block; | |||
height: 110px; | |||
width: 160px; | |||
/* logo abstand so anpassen dass es in seinem bereich "zentriert wirkt". kommt aufs logo an. */ | |||
margin-left: 1em; | |||
margin-top: 1.5em; | |||
} | |||
div#column-one div a img { | |||
display: none; | |||
} | |||
div.editOptions { | |||
color: #000000; | |||
} | |||
/* edit/history/... buttons */ | |||
#p-cactions li a:hover { | |||
background-color: hsla(200, 100%, 60%, 0.5); | |||
} | |||
/* misc */ | |||
@font-face { | @font-face { | ||
font-family: "LiberationSans-Regular"; | font-family: "LiberationSans-Regular"; | ||
src: url(" | src: url("/images/4/4a/LiberationSans-Regular.ttf") format("truetype"); | ||
} | } | ||
@font-face { | @font-face { | ||
font-family: "LiberationSans-Bold"; | font-family: "LiberationSans-Bold"; | ||
src: url(" | src: url("/images/a/a3/LiberationSans-Bold.ttf") format("truetype"); | ||
} | } | ||
@font-face { | @font-face { | ||
font-family: "LiberationSans-Italic"; | font-family: "LiberationSans-Italic"; | ||
src: url(" | src: url("/images/d/d9/LiberationSans-Italic.ttf") format("truetype"); | ||
} | } | ||
@font-face { | @font-face { | ||
font-family: "LiberationSans-BoldItalic"; | font-family: "LiberationSans-BoldItalic"; | ||
src: url(" | src: url("/images/a/a0/LiberationSans-BoldItalic.ttf") format("truetype"); | ||
} | |||
h1.firstHeading { | |||
border: 0pt none; | |||
color: white; | |||
font-size: 175%; | |||
font-family: LiberationSans-Bold, "Open Sans", "Arial", sans-serif; | |||
letter-spacing: -1px; | |||
margin-bottom: 0pt; | |||
padding: 0.3em 0pt 0.3em; | |||
text-decoration: none; | |||
} | } | ||
#bodyContent { | #bodyContent { | ||
color: white; | color: white; | ||
background: hsla(201, 100%, 28%, 0.5); | |||
} | } | ||
body { | body { | ||
background-image: url('https://entropia.de/images/a/ | background-image: url('https://entropia.de/images/a/a9/GPN16_Raster.png'); | ||
background-repeat: repeat; | background-repeat: repeat; | ||
color: white; | color: white; | ||
font-family: LiberationSans-Regular, "Open Sans", "Arial", sans-serif; | |||
} | } | ||
#column-content { | #column-content { | ||
background-image: url('https://entropia.de/images/a/ | background-image: url('https://entropia.de/images/a/a9/GPN16_Raster.png'); | ||
background-repeat: repeat; | background-repeat: repeat; | ||
color: white; | color: white; | ||
} | } | ||
#content { | #content { | ||
background: none; | background: hsla(201, 100%, 28%, 0.75) none repeat scroll 0 0; | ||
margin-right: 80px; | |||
} | |||
li, ul { | |||
list-style-image: none; | |||
} | } | ||
#p-navigation { | #p-navigation { | ||
Zeile 53: | Zeile 95: | ||
#p-personal li a { | #p-personal li a { | ||
color: white; | color: white; | ||
padding: | padding: | ||
} | } | ||
Zeile 60: | Zeile 101: | ||
} | } | ||
h1, h2, h3, h4, h5, h6 { | h1, h2, h3, h4, h5, h6 { | ||
color: white; | color: white; | ||
font-family: LiberationSans-Bold, "Open Sans", "Arial", sans-serif; | |||
border-bottom-color: white; | |||
} | } | ||
h1 { | h1 { | ||
Zeile 69: | Zeile 112: | ||
} | } | ||
a, a:visited, a:active, a:link, #bodyContent a.external { | a, a:visited, a:active, a:link, #bodyContent a.external { | ||
color: # | color: #ffffff; | ||
} | } | ||
#toc { | #toc { | ||
background: none; | background: none; | ||
border: 2px | border: 2px solid white; | ||
margin-top: 35px; | |||
} | } | ||
#p-navigation ul li, #p-tb ul li { | #p-navigation ul li, #p-tb ul li { | ||
Zeile 82: | Zeile 125: | ||
background: none; | background: none; | ||
color: white; | color: white; | ||
} | |||
#p-fnord ul li { | |||
border-bottom: none; | |||
} | } | ||
#p-cactions li a { | #p-cactions li a { | ||
font-size: | font-size: 125% | ||
} | } | ||
#footer, div#footer { | #footer, div#footer { | ||
Zeile 94: | Zeile 140: | ||
} | } | ||
div.NavFrame { | div.NavFrame { | ||
border: 2px | border: 2px solid white; | ||
} | |||
div.thumbinner { | |||
background-color: rgba(35, 150, 214, 0.4); | |||
border: none; | |||
} | |||
html .thumbimage { | |||
border: none; | |||
} | |||
h1 { | |||
border-bottom: 2px solid rgb(255, 255, 255); | |||
} | |||
#p-cactions .new a { | |||
color: #d0d0d0; | |||
} | |||
#bodyContent a.new { | |||
color: #FF8A8A; | |||
} | |||
div#catlinks { | |||
background: none; | |||
border: none; | |||
border-top: 2px solid white; | |||
} | |||
pre { | |||
background: none; | |||
border: none; | |||
color: white; | |||
} | |||
table.wikitable { | |||
background: none; | |||
margin: 1em 0; | |||
border: 1px solid white; | |||
border-collapse: collapse; | |||
color: white; | |||
} | |||
table.diff { | |||
background-color: #ffffff; | |||
color: #000000; | |||
} | |||
table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { | |||
border: 1px solid white; | |||
padding: 0.2em 0.4em; | |||
background: none; | |||
} | |||
tbody { | |||
border-color: white; | |||
} | } | ||
@-webkit-keyframes fadeIcon { | |||
0% { opacity:0;} | |||
40% { opacity:0;} | |||
50% { opacity:1;} | |||
60% { opacity:0;} | |||
100% { opacity:0;} | |||
} | |||
@-moz-keyframes fadeIcon { | |||
0% { opacity:0;} | |||
40% { opacity:0;} | |||
50% { opacity:1;} | |||
60% { opacity:0;} | |||
100% { opacity:0;} | |||
} | |||
@keyframes fadeIcon { | |||
0% { opacity:0;} | |||
40% { opacity:0;} | |||
50% { opacity:1;} | |||
60% { opacity:0;} | |||
100% { opacity:0;} | |||
} | |||
div.NavFrame div.NavPic div.icon { | |||
-webkit-animation:fadeIcon linear infinite; | |||
-moz-animation:fadeIcon linear infinite; | |||
animation:fadeIcon linear infinite; | |||
-webkit-animation-duration:4s; | |||
-moz-animation-duration:4s; | |||
animation-duration:4s; | |||
} | |||
div.NavFrame div.NavPic div.icon:nth-child(1n+0) { | |||
-webkit-animation-delay: 0s; | |||
animation-delay: 0s; | |||
background: url('/images/1/10/GPN16-Logo1_smal.svg') no-repeat left top; | |||
} | |||
div.NavFrame div.NavPic div.icon:nth-child(2n+0) { | |||
-webkit-animation-delay: 1s; | |||
animation-delay: 1s; | |||
background: url('/images/b/ba/GPN16-Logo2_smal.svg') no-repeat left top; | |||
} | |||
div.NavFrame div.NavPic div.icon:nth-child(3n+0) { | |||
-webkit-animation-delay: 2s; | |||
animation-delay: 2s; | |||
background: url('/images/2/2c/GPN16-Logo3_smal.svg') no-repeat left top; | |||
} | |||
div.NavFrame div.NavPic div.icon:nth-child(4n+0) { | |||
-webkit-animation-delay: 3s; | |||
animation-delay: 3s; | |||
background: url('/images/e/ef/GPN16-Logo4_smal.svg') no-repeat left top; | |||
} | |||
div.NavFrame div.NavPic { | |||
height: 80px; | |||
width: 80px; | |||
} | |||
div.NavFrame div.NavPic div.icon { | |||
position: absolute; | |||
opacity: 0; | |||
height: 80px; | |||
width: 80px; | |||
background-size: 100% auto; | |||
} | |||
} |
Aktuelle Version vom 23. Mai 2016, 13:27 Uhr
/* * GPN16 Stylesheet * * https://github.com/entropia/gpn16-design/wiki/ */ /* * Screen only */ @media screen { /* site logo */ div#p-logo.portlet a, div#p-logo.portlet a:hover { background-image: url("https://entropia.de/images/0/0a/Gpn16-wikilogo.svg.png") !important; display: block; height: 110px; width: 160px; /* logo abstand so anpassen dass es in seinem bereich "zentriert wirkt". kommt aufs logo an. */ margin-left: 1em; margin-top: 1.5em; } div#column-one div a img { display: none; } div.editOptions { color: #000000; } /* edit/history/... buttons */ #p-cactions li a:hover { background-color: hsla(200, 100%, 60%, 0.5); } /* misc */ @font-face { font-family: "LiberationSans-Regular"; src: url("/images/4/4a/LiberationSans-Regular.ttf") format("truetype"); } @font-face { font-family: "LiberationSans-Bold"; src: url("/images/a/a3/LiberationSans-Bold.ttf") format("truetype"); } @font-face { font-family: "LiberationSans-Italic"; src: url("/images/d/d9/LiberationSans-Italic.ttf") format("truetype"); } @font-face { font-family: "LiberationSans-BoldItalic"; src: url("/images/a/a0/LiberationSans-BoldItalic.ttf") format("truetype"); } h1.firstHeading { border: 0pt none; color: white; font-size: 175%; font-family: LiberationSans-Bold, "Open Sans", "Arial", sans-serif; letter-spacing: -1px; margin-bottom: 0pt; padding: 0.3em 0pt 0.3em; text-decoration: none; } #bodyContent { color: white; background: hsla(201, 100%, 28%, 0.5); } body { background-image: url('https://entropia.de/images/a/a9/GPN16_Raster.png'); background-repeat: repeat; color: white; font-family: LiberationSans-Regular, "Open Sans", "Arial", sans-serif; } #column-content { background-image: url('https://entropia.de/images/a/a9/GPN16_Raster.png'); background-repeat: repeat; color: white; } #content { background: hsla(201, 100%, 28%, 0.75) none repeat scroll 0 0; margin-right: 80px; } li, ul { list-style-image: none; } #p-navigation { background: none; color: white; } #p-navigation a { color: white; } #p-logo { background: none; } .pBody { background: none; color: white; } #p-personal li a { color: white; padding: } #p-fnord a, #p-tb a { color: white; } h1, h2, h3, h4, h5, h6 { color: white; font-family: LiberationSans-Bold, "Open Sans", "Arial", sans-serif; border-bottom-color: white; } h1 { border-bottom: 2px dashed white; } body { color: white; } a, a:visited, a:active, a:link, #bodyContent a.external { color: #ffffff; } #toc { background: none; border: 2px solid white; margin-top: 35px; } #p-navigation ul li, #p-tb ul li { border: none; } #p-cactions li a, #p-cactions li, #p-cactions li.selected a { background: none; color: white; } #p-fnord ul li { border-bottom: none; } #p-cactions li a { font-size: 125% } #footer, div#footer { background: none; border: none; } div.NavHead { background: none; } div.NavFrame { border: 2px solid white; } div.thumbinner { background-color: rgba(35, 150, 214, 0.4); border: none; } html .thumbimage { border: none; } h1 { border-bottom: 2px solid rgb(255, 255, 255); } #p-cactions .new a { color: #d0d0d0; } #bodyContent a.new { color: #FF8A8A; } div#catlinks { background: none; border: none; border-top: 2px solid white; } pre { background: none; border: none; color: white; } table.wikitable { background: none; margin: 1em 0; border: 1px solid white; border-collapse: collapse; color: white; } table.diff { background-color: #ffffff; color: #000000; } table.wikitable > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > th, table.wikitable > * > tr > td { border: 1px solid white; padding: 0.2em 0.4em; background: none; } tbody { border-color: white; } @-webkit-keyframes fadeIcon { 0% { opacity:0;} 40% { opacity:0;} 50% { opacity:1;} 60% { opacity:0;} 100% { opacity:0;} } @-moz-keyframes fadeIcon { 0% { opacity:0;} 40% { opacity:0;} 50% { opacity:1;} 60% { opacity:0;} 100% { opacity:0;} } @keyframes fadeIcon { 0% { opacity:0;} 40% { opacity:0;} 50% { opacity:1;} 60% { opacity:0;} 100% { opacity:0;} } div.NavFrame div.NavPic div.icon { -webkit-animation:fadeIcon linear infinite; -moz-animation:fadeIcon linear infinite; animation:fadeIcon linear infinite; -webkit-animation-duration:4s; -moz-animation-duration:4s; animation-duration:4s; } div.NavFrame div.NavPic div.icon:nth-child(1n+0) { -webkit-animation-delay: 0s; animation-delay: 0s; background: url('/images/1/10/GPN16-Logo1_smal.svg') no-repeat left top; } div.NavFrame div.NavPic div.icon:nth-child(2n+0) { -webkit-animation-delay: 1s; animation-delay: 1s; background: url('/images/b/ba/GPN16-Logo2_smal.svg') no-repeat left top; } div.NavFrame div.NavPic div.icon:nth-child(3n+0) { -webkit-animation-delay: 2s; animation-delay: 2s; background: url('/images/2/2c/GPN16-Logo3_smal.svg') no-repeat left top; } div.NavFrame div.NavPic div.icon:nth-child(4n+0) { -webkit-animation-delay: 3s; animation-delay: 3s; background: url('/images/e/ef/GPN16-Logo4_smal.svg') no-repeat left top; } div.NavFrame div.NavPic { height: 80px; width: 80px; } div.NavFrame div.NavPic div.icon { position: absolute; opacity: 0; height: 80px; width: 80px; background-size: 100% auto; } }