Mudanças entre as edições de "MediaWiki:Common.css"

Linha 1: Linha 1:
 +
 
/** Estilo CSS para a skin Monobook */
 
/** Estilo CSS para a skin Monobook */
 +
 +
/** Fonte e cores principais */
 
body {
 
body {
−
     font-family: 'Open Sans', sans-serif;
+
     font-family: 'Arial', sans-serif; /* Fonte mais moderna */
−
    font-size: 16px;
+
     background-color: #f0f0f0; /* Cor de fundo suave */
−
    line-height: 1.6;
+
     color: #333333; /* Cor de texto padrão */
−
     background-color: #f4f4f4; /* Fundo claro */
 
−
     color: #333; /* Cor padrão do texto */
 
−
    margin: 0;
 
−
    padding: 0;
 
 
}
 
}
  
−
/* Personalização de links com animação */
 
 
a {
 
a {
−
     color: #006400; /* Verde IF */
+
     color: #007b00; /* Cor de link verde */
 
     text-decoration: none;
 
     text-decoration: none;
−
    transition: color 0.3s ease, transform 0.3s ease; /* Transição suave */
 
 
}
 
}
  
 
a:hover {
 
a:hover {
−
     color: #85c593; /* Cor ao passar o mouse */
+
     color: #009933; /* Efeito hover para links */
−
    transform: scale(1.05); /* Leve zoom no hover */
+
     text-decoration: underline;
−
}
 
−
 
 
−
/* Estilo da logo */
 
−
#p-logo a {
 
−
     background-image: url('https://nti.muz.ifsuldeminas.edu.br/images/c/c7/LogoWikiNTI250x250px.png');
 
−
    background-size: contain;
 
−
    width: 135px;
 
−
    height: 135px;
 
 
}
 
}
  
−
/* Ajuste do conteúdo principal */
 
−
#content {
 
−
    margin-left: 220px;
 
−
    padding: 20px;
 
−
    background-color: #fff;
 
−
    border-radius: 10px;
 
−
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra leve */
 
−
}
 
−
 
−
/* Responsividade */
 
−
@media (max-width: 768px) {
 
−
    #content {
 
−
        margin-left: 0;
 
−
        padding: 10px;
 
−
    }
 
−
}
 
  
−
/* Menu lateral fixo e ajustado */
+
/** Menus de navegação interativos */
 
#mw-panel {
 
#mw-panel {
−
     background-color: #006400;
+
     background-color: #333; /* Cor de fundo do menu */
−
     color: white;
+
     color: #fff; /* Cor de texto branco */
−
    position: fixed;
 
−
    top: 5px;
 
−
    left: 0;
 
−
    width: 190px;
 
 
     padding: 10px;
 
     padding: 10px;
−
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 
−
    z-index: 1000;
 
−
    border-radius: 0 10px 10px 0;
 
 
}
 
}
  
 
#mw-panel a {
 
#mw-panel a {
−
     color: white;
+
     color: #ffffff;
−
    font-weight: bold;
+
     padding: 10px;
−
     padding: 10px 15px;
 
 
     border-radius: 5px;
 
     border-radius: 5px;
−
     transition: background-color 0.3s ease, transform 0.3s ease;
+
     transition: background-color 0.3s ease-in-out;
 
}
 
}
  
 
#mw-panel a:hover {
 
#mw-panel a:hover {
−
     background-color: #85c593;
+
     background-color: #007b00; /* Efeito hover com verde escuro */
−
    transform: scale(1.05); /* Zoom leve ao passar o mouse */
 
 
}
 
}
  
−
/* Botões com estilo moderno */
+
/** Estilo de botões */
 
button, .button {
 
button, .button {
−
     background-color: #006400;
+
     background-color: #007b00; /* Cor de fundo dos botões */
 
     color: white;
 
     color: white;
 
     padding: 10px 20px;
 
     padding: 10px 20px;
 
     border: none;
 
     border: none;
 
     border-radius: 5px;
 
     border-radius: 5px;
−
    cursor: pointer;
+
     transition: background-color 0.3s ease-in-out;
−
     transition: background-color 0.3s ease, box-shadow 0.3s ease;
 
 
}
 
}
  
 
button:hover, .button:hover {
 
button:hover, .button:hover {
−
     background-color: #85c593; /* Cor clara no hover */
+
     background-color: #005f00; /* Efeito hover no botão */
−
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra no hover */
 
−
}
 
−
 
 
−
/* Ajustes de listas */
 
−
ol, ul {
 
−
    color: #006400;
 
−
    font-weight: bold;
 
−
    padding-left: 20px;
 
−
}
 
−
 
 
−
/* Estilo de rodapé */
 
−
#footer {
 
−
    background-color: #f3f3f3;
 
−
    color: #333;
 
−
    padding: 20px;
 
−
    text-align: center;
 
−
    margin-top: 20px;
 
−
    border-radius: 5px;
 
−
}
 
−
 
 
−
/* Imagens com estilo moderno */
 
−
img {
 
−
    max-width: 100%;
 
−
    height: auto;
 
−
    border-radius: 10px;
 
−
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
−
}
 
−
 
 
−
/* Tipografia responsiva */
 
−
@media (max-width: 1024px) {
 
−
    body {
 
−
        font-size: 15px;
 
−
    }
 
−
 
 
−
    h1 {
 
−
        font-size: 2em;
 
−
    }
 
−
 
 
−
    h2 {
 
−
        font-size: 1.75em;
 
−
    }
 
−
}
 
−
 
 
−
@media (max-width: 768px) {
 
−
    body {
 
−
        font-size: 14px;
 
−
    }
 
−
 
 
−
    h1 {
 
−
        font-size: 1.75em;
 
−
    }
 
−
 
 
−
    h2 {
 
−
        font-size: 1.5em;
 
−
    }
 
−
 
 
−
    #p-navigation ul {
 
−
        flex-direction: column;
 
−
    }
 
−
}
 
−
 
 
−
/* Estilo das páginas personalizadas */
 
−
.page-Política_de_Privacidade, .page-Sobre_NTI, .page-Termo_de_Responsabilidade {
 
−
    background-color: #f9f9f9;
 
−
    padding: 20px;
 
−
    border-radius: 10px;
 
−
    color: #333;
 
−
    line-height: 1.6;
 
 
}
 
}

Edição das 16h36min de 24 de outubro de 2024


/** Estilo CSS para a skin Monobook */

/** Fonte e cores principais */
body {
    font-family: 'Arial', sans-serif; /* Fonte mais moderna */
    background-color: #f0f0f0; /* Cor de fundo suave */
    color: #333333; /* Cor de texto padrão */
}

a {
    color: #007b00; /* Cor de link verde */
    text-decoration: none;
}

a:hover {
    color: #009933; /* Efeito hover para links */
    text-decoration: underline;
}


/** Menus de navegação interativos */
#mw-panel {
    background-color: #333; /* Cor de fundo do menu */
    color: #fff; /* Cor de texto branco */
    padding: 10px;
}

#mw-panel a {
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

#mw-panel a:hover {
    background-color: #007b00; /* Efeito hover com verde escuro */
}

/** Estilo de botões */
button, .button {
    background-color: #007b00; /* Cor de fundo dos botões */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease-in-out;
}

button:hover, .button:hover {
    background-color: #005f00; /* Efeito hover no botão */
}