Predefinição:Banner/styles.css: mudanças entre as edições

De Wiki NBS
Ir para navegação Ir para pesquisar
(Paulo.xavier alterou o modelo de conteúdo da página Predefinição:Banner/styles.css de "wikitexto" para "CSS limpo": CSS)
Etiqueta: Mudança de modelo de conteúdo
Sem resumo de edição
Linha 1: Linha 1:
.mainpage-shadowbox {
.banner-image {
color: white;
position: relative;
background: rgb(16,16,16);
overflow: hidden;
background: rgba(0,0,0,0.3);
max-width: 1800px;
border-radius: 4px;
height: auto;
margin-bottom: .6em;
}
}
.mainpage-shadowbox h2, .mainpage-shadowbox h3 {
 
color: white;
.banner-image img {
border:none;
max-width: 100%;
font-family: sans-serif;
height: auto;
line-height: 1.2em;
width: auto;
margin:0;
padding: 0; /* was previously set only for h3, and skin styles would do the same for h2. however, cannot rely on skin to do this on mobile */
}
}
.mainpage-shadowbox a {
 
.banner-box {
position: absolute;
z-index: 2;
margin-top: 2.5em;
color: white;
color: white;
font-weight: bold;
min-width: 20em;
text-shadow: black 0.3em 0.3em 1em, black -0.1em -0.1em 1em;
}
}


.banner-image {
.banner-box-wide {
    position: relative;
width: 80%;
    max-width: 1125px;
    height: auto;
    margin-bottom: .6em;
}
}
.banner-image img {
 
    max-width: 100%;
.banner-box-left {
    height: auto;
left: 5%;
    /* width: auto\9; */ /* ie8 */
text-align: left;
}
}
.banner-box-wide {
 
    width: 80%
}
.banner-box-left,
.banner-box-right {
.banner-box-right {
padding: 8px 7px;
right: 5%;
background: rgb(16,16,16);
text-align: right;
background: rgba(0,0,0,0.3);
border-radius: 4px;
width: 40%;
}
}
.banner-box-left  { text-align: left; }
 
.banner-box-right { text-align: right; }
.banner-box .name {
.banner-box-2 {
font-size: 3em;
    position: absolute;
white-space: nowrap;
    z-index: 2;
line-height: 1.2em;
    min-width: 20em;
}
}


@media screen and ( min-width: 720px ) { /* greater than or equal to */
.banner-box .type {
.banner-image img.nolink { display: none; }
font-size: 2em;
.mainpage-shadowbox h2 {
line-height: 1.2em;
font-size: 190%;
}
.mainpage-shadowbox h3 {
font-size: 150%;
}
.banner-image {
overflow: hidden;
}
.banner-box-left {
left: 3%;
}
.banner-box-right {
right: 3%;
}
.banner-box-2 {
margin-top: 2em;
}
.banner-box-2 .quote {
    font-size: 80%;
    line-height: 1.2em;
}
}
@media screen and ( max-width: 720px ) {
.banner-image img:not(.nolink) { display: none; }
.banner-image > .mainpage-shadowbox {
width: inherit !important;
min-height: 100%;
margin-left: -150%;
margin-right: 150%;
opacity: 0;
background: black;
}
.mainpage-shadowbox .quote > a:after {
content: '\ATap to learn more.';
white-space: pre; /* needed to make content work. if content is disabled, this can be, too */
}
.jcarousel-item:hover .mainpage-shadowbox {
margin: unset;
opacity: 1;
transition: margin 0.5s; /* without this, problem with tap on image still activating links - speed may matter here */
bottom: 50%; /* relative vertical position; change to top to lower, negative percentages do not work as naively expected */
}
.jcarousel-control-prev, .jcarousel-control-next {
display: none;
/* hide the carousel arrows */
/* a kludge resulting from gadgets not working on mobile */
/* unforunately also targets very narrow desktops, but there can't be too many of those */
/* and besides, the number buttons still work */
}
.interactiveIcon {
position: absolute;
opacity: 0.4;
height: 75% !important;
width: auto;
bottom: 0;
right: 0;
}
}
}

Edição das 13h26min de 22 de julho de 2022

.banner-image {
	position: relative;
	overflow: hidden;
	max-width: 1800px;
	height: auto;
	margin-bottom: .6em;
}

.banner-image img {
	max-width: 100%;
	height: auto;
	width: auto;
}

.banner-box {
	position: absolute;
	z-index: 2;
	margin-top: 2.5em;
	color: white;
	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 {
	left: 5%;
	text-align: left;
}

.banner-box-right {
	right: 5%;
	text-align: right;
}

.banner-box .name {
	font-size: 3em;
	white-space: nowrap;
	line-height: 1.2em;
}

.banner-box .type {
	font-size: 2em;
	line-height: 1.2em;
}