Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.
- Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
- Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
- Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
- Opera: Naciśnij klawisze Ctrl+F5.
/*
* Kod CSS odpowiadadający za wygląd przenośnych infoboksów
* @author Rail
*/
/* Podstawowe style infoboksów */
.portable-infobox {
background: transparent;
border: solid 1px #ccc;
width: 250px
}
.portable-infobox .pi-title {
text-align: center;
font-weight: bold;
font-size: 11pt;
padding: 5px;
line-height: 20px;
border-bottom: solid 1px #ccc;
background: #ccc
}
.portable-infobox .pi-image,
.portable-infobox .pi-image .pi-image-thumbnail {
max-width: 100%;
height: auto
}
.portable-infobox .pi-image .pi-caption {
font-size: 8.7pt;
text-align: center;
padding: 0
}
.portable-infobox .pi-header {
background: transparent;
text-align: center;
font-size: 10pt
}
.portable-infobox .pi-data {
border-color: #ddd;
padding: 0
}
.portable-infobox .pi-data:first-of-type { border-top: solid 1px #ccc }
.portable-infobox .pi-data .pi-data-label {
border-right: solid 1px #ddd;
background: #ccc
}
.portable-infobox .pi-data .pi-data-value { background: #eee }
.portable-infobox .pi-data .pi-data-label,
.portable-infobox .pi-data .pi-data-value {
padding: 2px 5px;
line-height: 20px
}
.portable-infobox .pi-data {
grid-column-gap: 0
}
/**
* Motywy kolorystyczne infoboksów
* Sprawiają, że różne infoboksy mają różne kolory
*
* Dostępne motywy:
* - green
* - yellow
* - orange
* - brown
* - lightbrown
* - blue
* - red
* - black
*/
/* Motyw – zielony */
.portable-infobox.pi-theme-green {
--color-1: #007e29;
--color-2: #fff;
--color-3: #ccc;
--color-4: #229f4b;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-green .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-green .pi-data,
.portable-infobox.pi-theme-green .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-green .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-green .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-green .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – żółty */
.portable-infobox.pi-theme-yellow {
--color-1: #fbed0b;
--color-2: #000;
--color-3: #000;
--color-4: #fdff2d;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-yellow .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-yellow .pi-data,
.portable-infobox.pi-theme-yellow .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-yellow .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-yellow .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-yellow .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – pomarańczowy */
.portable-infobox.pi-theme-orange {
--color-1: #ffa500;
--color-2: #000;
--color-3: #000;
--color-4: #ffc722;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-orange .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-orange .pi-data,
.portable-infobox.pi-theme-orange .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-orange .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-orange .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-orange .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – brązowy */
.portable-infobox.pi-theme-brown {
--color-1: #5c3312;
--color-2: #fff;
--color-3: #000;
--color-4: #7e5534;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-brown .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-brown .pi-data,
.portable-infobox.pi-theme-brown .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-brown .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-brown .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-brown .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – jasny brąz */
.portable-infobox.pi-theme-lightbrown {
--color-1: #d7c8c2;
--color-2: #000;
--color-3: #000;
--color-4: #f9eae4;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-lightbrown .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-lightbrown .pi-data,
.portable-infobox.pi-theme-lightbrown .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-lightbrown .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-lightbrown .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-lightbrown .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – niebieski */
.portable-infobox.pi-theme-blue {
--color-1: #008aff;
--color-2: #fff;
--color-3: #000;
--color-4: #22acff;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-blue .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-blue .pi-data,
.portable-infobox.pi-theme-blue .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-blue .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-blue .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-blue .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – czerwony */
.portable-infobox.pi-theme-red {
--color-1: #e90003;
--color-2: #fff;
--color-3: #000;
--color-4: #fb2225;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-red .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-red .pi-data,
.portable-infobox.pi-theme-red .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-red .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-red .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-red .pi-data .pi-data-value { background: var( --color-4 ) }
/* Motyw – czarny */
.portable-infobox.pi-theme-black {
--color-1: #000;
--color-2: #fff;
--color-3: #444;
--color-4: #222;
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-black .pi-title {
background: var( --color-1 );
color: var( --color-2 );
border-color: var( --color-3 )
}
.portable-infobox.pi-theme-black .pi-data,
.portable-infobox.pi-theme-black .pi-data .pi-data-label { border-color: var( --color-3 ) }
.portable-infobox.pi-theme-black .pi-data { color: var( --color-2 ) }
.portable-infobox.pi-theme-black .pi-data .pi-data-label { background: var( --color-1 ) }
.portable-infobox.pi-theme-black .pi-data .pi-data-value { background: var( --color-4 ) }