MediaWiki:Common.css: Porovnání verzí
(pokus o css úpravu vzhledu infoboxu) |
m (fix) |
||
| (Není zobrazeno 18 mezilehlých verzí od stejného uživatele.) | |||
| Řádek 1: | Řádek 1: | ||
/* Zde uvedené CSS bude ovlivňovat všechny styly */ | /* Zde uvedené CSS bude ovlivňovat všechny styly */ | ||
| + | |||
/* | /* | ||
=== infobox === | === infobox === | ||
| − | převzato z en | + | zdroj: cs.wiki (na cs.wiki převzato z en.wiki) |
| − | + | */ | |
.infobox | .infobox | ||
{ | { | ||
| − | background-color: # | + | background-color: #FFFFFF; |
| − | border: 1px solid # | + | border: 1px solid #888888; |
clear: right; | clear: right; | ||
float: right; | float: right; | ||
| − | margin-bottom: .5em; | + | margin-left:2em; |
| − | margin-left: 1em; | + | margin-right:2em; |
| − | + | margin-bottom:2em; | |
| − | + | margin-top:0.5em; | |
| + | padding-top:1em; | ||
| + | padding-bottom: 3em; | ||
| + | padding-right: 3em; | ||
| + | padding-left: 3em; | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | === carousel === | ||
| + | zdroj: en.wikivoyage | ||
| + | */ | ||
| + | .jcarousel { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | } | ||
| + | |||
| + | .jcarousel-wrapper { | ||
| + | max-width: 1125px; | ||
| + | margin: 0; | ||
| + | position: relative; | ||
| + | } | ||
| + | |||
| + | .jcarousel .jcarousel-list { | ||
| + | width: 20000em; | ||
| + | position: relative; | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | } | ||
| + | |||
| + | .jcarousel .jcarousel-item { | ||
| + | float: left; | ||
| + | } | ||
| + | |||
| + | .jcarousel-item img { | ||
| + | display: block; | ||
| + | max-width: 100%; | ||
| + | height: auto !important; | ||
| + | } | ||
| + | |||
| + | .jcarousel-control-prev, | ||
| + | .jcarousel-control-next { | ||
| + | position: absolute; | ||
| + | top: 45%; | ||
| + | width: 30px; | ||
| + | height: 30px; | ||
| + | text-align: center; | ||
| + | background: #fff; | ||
| + | color: #fff; | ||
| + | text-decoration: none; | ||
| + | text-shadow: 0 0 1px #000; | ||
| + | font: 24px/27px Arial, sans-serif; | ||
| + | -webkit-border-radius: 30px; | ||
| + | -moz-border-radius: 30px; | ||
| + | border-radius: 30px; | ||
| + | -webkit-box-shadow: 0 0 2px #999; | ||
| + | -moz-box-shadow: 0 0 2px #999; | ||
| + | box-shadow: 0 0 2px #999; | ||
| + | } | ||
| + | |||
| + | .jcarousel-control-prev { | ||
| + | left: -15px; | ||
| + | } | ||
| + | |||
| + | .jcarousel-control-next { | ||
| + | right: -15px; | ||
| + | } | ||
| + | |||
| + | .jcarousel-control-prev:hover span, | ||
| + | .jcarousel-control-next:hover span { | ||
| + | display: block; | ||
| + | } | ||
| + | |||
| + | .jcarousel-control-prev.inactive, | ||
| + | .jcarousel-control-next.inactive { | ||
| + | opacity: .5; | ||
| + | cursor: default; | ||
| + | } | ||
| + | |||
| + | .jcarousel-pagination { | ||
| + | position: absolute; | ||
| + | bottom: 10px; | ||
| + | left: 15px; | ||
| + | } | ||
| + | |||
| + | .jcarousel-pagination a { | ||
| + | text-decoration: none; | ||
| + | display: inline-block; | ||
| + | font-size: 11px; | ||
| + | line-height: 14px; | ||
| + | min-width: 14px; | ||
| + | background: #fff; | ||
| + | color: #4E443C; | ||
| + | border-radius: 14px; | ||
| + | padding: 3px; | ||
| + | text-align: center; | ||
| + | margin-right: 2px; | ||
| + | opacity: .75; | ||
| + | } | ||
| + | |||
| + | .jcarousel-pagination a.active { | ||
| + | background: #4E443C; | ||
| + | color: #fff; | ||
| + | opacity: 1; | ||
| + | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75); | ||
| + | } | ||
| + | |||
| + | /* | ||
| + | === mainbanner === | ||
| + | zdroj: en.wikivoyage | ||
| + | */ | ||
| + | .banner-image { | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | max-width: 1125px; | ||
| + | height: auto; | ||
| + | margin-bottom: .6em; | ||
| + | } | ||
| + | |||
| + | .banner-image img { | ||
| + | max-width: 100%; | ||
| + | height: auto; | ||
| + | width: auto\9; | ||
| + | } | ||
| + | |||
| + | .banner-box { | ||
| + | position: absolute; | ||
| + | z-index: 2; | ||
| + | margin-top: 2.5em; | ||
| + | color: white; | ||
| + | width: 50%; | ||
| + | min-width: 20em; | ||
| + | text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em; | ||
| + | } | ||
| + | |||
| + | .banner-box-wide { | ||
| + | width: 80% | ||
| + | } | ||
| + | |||
| + | .banner-box-left, | ||
| + | .banner-box-right { | ||
| + | padding: 8px 7px; | ||
| + | background: rgb(16,16,16); | ||
| + | background: rgba(0,0,0,0.3); | ||
| + | border-radius: 4px; | ||
| + | text-shadow: none; | ||
| + | width: 40%; | ||
| + | } | ||
| − | . | + | .banner-box-left { |
| − | + | left: 3%; | |
| − | + | text-align: left; | |
| − | + | } | |
| + | |||
| + | .banner-box-right { | ||
| + | right: 3%; | ||
| + | text-align: right; | ||
| + | } | ||
| + | |||
| + | .banner-box-welcome { | ||
| + | left: 1em; | ||
| + | text-align: center; | ||
| + | width: 40%; | ||
| + | white-space: nowrap; | ||
| + | } | ||
| + | |||
| + | .banner-box a { | ||
| + | color: white !important; | ||
| + | font-weight: bold; | ||
| + | } | ||
| + | |||
| + | .banner-box .name { | ||
| + | font-size: 2.5em; | ||
| + | white-space: nowrap; | ||
| + | line-height: 1.2em; | ||
| + | } | ||
| + | |||
| + | .banner-box .type { | ||
| + | font-size: 2em; | ||
| + | line-height: 1.2em; | ||
| + | } | ||
| + | |||
| + | .banner-box .banner_item3{ | ||
| + | font-size: 1em; | ||
| + | margin-top: 1.7em; | ||
| + | } | ||
| + | |||
| + | .banner-box .banner_item2{ | ||
| + | font-size: 1em; | ||
| + | line-height: 1.2em; | ||
| + | margin-top: 1.5em; | ||
| + | } | ||
| + | |||
| + | .banner-box .welcome a { | ||
| + | font-size: 1.5em; | ||
| + | } | ||
| + | |||
| + | .banner-box .welcome { | ||
| + | font-size: 2.1em; | ||
| + | } | ||
| + | |||
| + | .banner-box .banner_item4 { | ||
| + | font-size: 1.5em; | ||
| + | margin-top: 1.5em; | ||
| + | margin-bottom: 1.5em; | ||
| + | } | ||
| + | |||
| + | .banner-box .welcome-map-nav { | ||
| + | font-size: 1.25em; | ||
| + | } | ||
| + | |||
| + | .banner-box ul { | ||
| + | font-size: 1.25em; | ||
| + | } | ||
| − | + | .banner-box ul li { | |
| − | + | display: inline; | |
| − | + | } | |
| − | |||
| − | + | .banner-box ul li:before { | |
| − | + | content: " • "; | |
| − | + | } | |
| − | |||
| − | + | .banner-box ul li:nth-of-type(1):before { | |
| − | + | content: " "; | |
| − | + | } | |
| − | |||
| − | |||
Aktuální verze z 28. 10. 2014, 19:38
/* Zde uvedené CSS bude ovlivňovat všechny styly */
/*
=== infobox ===
zdroj: cs.wiki (na cs.wiki převzato z en.wiki)
*/
.infobox
{
background-color: #FFFFFF;
border: 1px solid #888888;
clear: right;
float: right;
margin-left:2em;
margin-right:2em;
margin-bottom:2em;
margin-top:0.5em;
padding-top:1em;
padding-bottom: 3em;
padding-right: 3em;
padding-left: 3em;
}
/*
=== carousel ===
zdroj: en.wikivoyage
*/
.jcarousel {
position: relative;
overflow: hidden;
}
.jcarousel-wrapper {
max-width: 1125px;
margin: 0;
position: relative;
}
.jcarousel .jcarousel-list {
width: 20000em;
position: relative;
margin: 0;
padding: 0;
}
.jcarousel .jcarousel-item {
float: left;
}
.jcarousel-item img {
display: block;
max-width: 100%;
height: auto !important;
}
.jcarousel-control-prev,
.jcarousel-control-next {
position: absolute;
top: 45%;
width: 30px;
height: 30px;
text-align: center;
background: #fff;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -15px;
}
.jcarousel-control-next {
right: -15px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
.jcarousel-pagination {
position: absolute;
bottom: 10px;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
/*
=== mainbanner ===
zdroj: en.wikivoyage
*/
.banner-image {
position: relative;
overflow: hidden;
max-width: 1125px;
height: auto;
margin-bottom: .6em;
}
.banner-image img {
max-width: 100%;
height: auto;
width: auto\9;
}
.banner-box {
position: absolute;
z-index: 2;
margin-top: 2.5em;
color: white;
width: 50%;
min-width: 20em;
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}
.banner-box-wide {
width: 80%
}
.banner-box-left,
.banner-box-right {
padding: 8px 7px;
background: rgb(16,16,16);
background: rgba(0,0,0,0.3);
border-radius: 4px;
text-shadow: none;
width: 40%;
}
.banner-box-left {
left: 3%;
text-align: left;
}
.banner-box-right {
right: 3%;
text-align: right;
}
.banner-box-welcome {
left: 1em;
text-align: center;
width: 40%;
white-space: nowrap;
}
.banner-box a {
color: white !important;
font-weight: bold;
}
.banner-box .name {
font-size: 2.5em;
white-space: nowrap;
line-height: 1.2em;
}
.banner-box .type {
font-size: 2em;
line-height: 1.2em;
}
.banner-box .banner_item3{
font-size: 1em;
margin-top: 1.7em;
}
.banner-box .banner_item2{
font-size: 1em;
line-height: 1.2em;
margin-top: 1.5em;
}
.banner-box .welcome a {
font-size: 1.5em;
}
.banner-box .welcome {
font-size: 2.1em;
}
.banner-box .banner_item4 {
font-size: 1.5em;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.banner-box .welcome-map-nav {
font-size: 1.25em;
}
.banner-box ul {
font-size: 1.25em;
}
.banner-box ul li {
display: inline;
}
.banner-box ul li:before {
content: " • ";
}
.banner-box ul li:nth-of-type(1):before {
content: " ";
}