MediaWiki:Common.css: mudanças entre as edições

Ir para navegação Ir para pesquisar

MediaWiki:Common.css (ver código-fonte)

Edição das 18h01min de 24 de julho de 2023

2 099 bytes adicionados ,  24 de julho de 2023
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 398: Linha 398:
     font-size: 1.2em;
     font-size: 1.2em;
     font-weight: bold;
     font-weight: bold;
}
:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}
.hero-section{   
    margin: 5%;
    padding-bottom: 53%;
}
.hero-section2{   
    margin: 5%;
    padding-bottom: 88%;
}
.card-grid{
  display: grid;
  width: 100%;
}
.card{
  list-style: none;
  position: relative;
}
.card:before{
  content: '';
  display: block;
  width: 100%;
}
.card__background{
  width: 100%;
  height: auto;
  background-size: cover;
  background-position: center;
  bottom: 0;
  filter: brightness(0.95) saturate(1) contrast(0.95);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition:
    filter 1s,
    transform 1s;
}
.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}
.card__content{
  left: 0;
  margin: var(--spacing-l);
  position: absolute;
  top: 0;
  text-align: left;
}
.card__category{
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}
.card__heading{
  color: var(--text-lighter);
  font-size: 1.9rem;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
  line-height: 1.4;
}
h3.card__heading {
    margin-top: -10px;
}
}


Linha 492: Linha 579:
/* Tests */
/* Tests */


:root{
      * {
  --background-dark: #2d3548;
            box-sizing: border-box;
  --text-light: rgba(255,255,255,0.6);
        }
  --text-lighter: rgba(255,255,255,0.9);
 
  --spacing-s: 8px;
        .slideshow-container {
  --spacing-m: 16px;
            max-width: 1000px;
  --spacing-l: 24px;
            position: relative;
  --spacing-xl: 32px;
            margin: auto;
  --spacing-xxl: 64px;
        }
  --width-container: 1200px;
}


.hero-section{  
        .mySlides {
    margin: 5%;
            display: none;
    padding-bottom: 53%;
        }
}


.hero-section2{  
        .prev,
    margin: 5%;
        .next {
    padding-bottom: 88%;
            cursor: pointer;
}
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -22px;
            padding: 16px;
            color: white;
            font-weight: bold;
            font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
        }


.card-grid{
        .next {
  display: grid;
            right: 0;
  width: 100%;
            border-radius: 3px 0 0 3px;
}
        }


.card{
        .prev:hover,
  list-style: none;
        .next:hover {
  position: relative;
            background-color: rgba(0, 0, 0, 0.8);
}
        }


.card:before{
        .text {
  content: '';
            color: #f2f2f2;
  display: block;
            font-size: 15px;
  width: 100%;
            padding: 8px 12px;
}
            position: absolute;
            bottom: 8px;
            width: 100%;
            text-align: center;
        }


.card__background{
        .numbertext {
  width: 100%;
            color: #f2f2f2;
  height: auto;
            font-size: 12px;
  background-size: cover;
            padding: 8px 12px;
  background-position: center;
            position: absolute;
  bottom: 0;
            top: 0;
  filter: brightness(0.95) saturate(1) contrast(0.95);
        }
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition:
    filter 1s,
    transform 1s;
}


.card:hover .card__background{
        .dot {
  transform: scale(1.05) translateZ(0);
            cursor: pointer;
}
            height: 15px;
            width: 15px;
            margin: 0 2px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }


.card__content{
        .active,
  left: 0;
        .dot:hover {
  margin: var(--spacing-l);
            background-color: #717171;
  position: absolute;
        }
  top: 0;
  text-align: left;
}


.card__category{
        .fade {
  color: var(--text-light);
            -webkit-animation-name: fade;
  font-size: 0.9rem;
            -webkit-animation-duration: 1.5s;
  margin-bottom: var(--spacing-s);
            animation-name: fade;
  text-transform: uppercase;
            animation-duration: 1.5s;
}
        }


.card__heading{
        @-webkit-keyframes fade {
  color: var(--text-lighter);
            from {
  font-size: 1.9rem;
                opacity: .4;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
            }
  line-height: 1.4;
            to {
}
                opacity: 1;
            }
        }


h3.card__heading {
        @keyframes fade {
    margin-top: -10px;
            from {
}
                opacity: .4;
            }
            to {
                opacity: 1;
            }
        }
Disponível em “https://wiki.otpokemon.com/index.php/Especial:MobileDiff/16227”

Menu de navegação