MediaWiki:Common.css: mudanças entre as edições
Aparência
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 1: | Linha 1: | ||
@import url('https://fonts.googleapis.com/css2?family= | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Inter:wght@400;500&display=swap'); | ||
/* | /* RESET */ | ||
* { margin: 0; padding: 0; box-sizing: border-box; } | * { | ||
margin: 0; | |||
padding: 0; | |||
box-sizing: border-box; | |||
} | |||
body { | body { | ||
font-family: 'Inter', sans-serif; | font-family: 'Inter', sans-serif; | ||
background: linear-gradient( | background: linear-gradient(160deg, #0d0d0d, #1a1a1a); | ||
color: #f0f0f0; | color: #f0f0f0; | ||
background-attachment: fixed; | |||
overflow-x: hidden; | |||
} | } | ||
/* | /* HEADER FIXO */ | ||
#mw-head { | #mw-head { | ||
position: fixed; | position: fixed; | ||
top: 0; left: 0; | top: 0; left: 0; | ||
width: 100%; height: 60px; | width: 100%; | ||
background: rgba(10,10,10,0. | height: 60px; | ||
background: rgba(10,10,10,0.9); | |||
backdrop-filter: blur(6px); | backdrop-filter: blur(6px); | ||
box-shadow: 0 2px 10px rgba(0,0,0,0.6); | |||
z-index: 1000; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: 0 20px; | padding: 0 20px; | ||
} | } | ||
# | #p-logo { | ||
background-image: url('/images/logo.png'); | |||
background-size: contain; | |||
background-repeat: no-repeat; | |||
width: 180px; | |||
height: 40px; | height: 40px; | ||
text-indent: -9999px; | |||
margin-right: 20px; | |||
} | |||
#p-logo a { | |||
display: block; | |||
width: 100%; | |||
height: 100%; | |||
} | } | ||
/* | /* MENU LATERAL ESQUERDO BONITÃO */ | ||
.vector-sticky-pinned-container { | .vector-sticky-pinned-container { | ||
position: fixed; | position: fixed; | ||
top: | top: 80px; | ||
width: | left: 20px; | ||
background: rgba( | width: 220px; | ||
background: rgba(20, 20, 20, 0.6); | |||
border: 1px solid #333; | border: 1px solid #333; | ||
border-radius: | border-radius: 12px; | ||
padding: | padding: 20px; | ||
backdrop-filter: blur(10px); | backdrop-filter: blur(10px); | ||
box-shadow: 0 0 20px rgba(255,153,47,0.08); | |||
z-index: 900; | z-index: 900; | ||
} | } | ||
.vector-sticky-pinned-container h3 { | .vector-sticky-pinned-container h3 { | ||
font-family: 'Orbitron', sans-serif; | font-family: 'Orbitron', sans-serif; | ||
color: #ff992f; | |||
text-transform: uppercase; | text-transform: uppercase; | ||
font-size: 13px; | |||
border-bottom: 1px solid #444; | |||
margin-bottom: 8px; | |||
padding-bottom: 4px; | padding-bottom: 4px; | ||
} | } | ||
.vector-sticky-pinned-container ul { | .vector-sticky-pinned-container ul { | ||
list-style: none; | list-style: none; | ||
padding-left: 0; | |||
} | } | ||
.vector-sticky-pinned-container ul li a { | .vector-sticky-pinned-container ul li a { | ||
| Linha 60: | Linha 76: | ||
color: #eee; | color: #eee; | ||
border-bottom: 1px solid #2a2a2a; | border-bottom: 1px solid #2a2a2a; | ||
transition: | transition: 0.2s; | ||
} | } | ||
.vector-sticky-pinned-container ul li a:hover { | .vector-sticky-pinned-container ul li a:hover { | ||
| Linha 67: | Linha 83: | ||
} | } | ||
/* | /* CONTEÚDO CENTRAL */ | ||
#content, #mw-content-text { | #content, #mw-content-text { | ||
margin: | margin-left: 270px; | ||
margin- | margin-top: 100px; | ||
max-width: 1100px; | max-width: 1100px; | ||
padding: 40px; | padding: 40px; | ||
background: rgba( | background: rgba(25,25,25,0.8); | ||
border: 1px solid #2a2a2a; | border: 1px solid #2a2a2a; | ||
box-shadow: 0 0 40px rgba(255,153,47,0.1); | border-radius: 16px; | ||
box-shadow: 0 0 40px rgba(255, 153, 47, 0.1); | |||
backdrop-filter: blur(6px); | |||
} | } | ||
/* | /* TÍTULOS */ | ||
.firstHeading { | .firstHeading { | ||
font-family: 'Orbitron', sans-serif; | font-family: 'Orbitron', sans-serif; | ||
color: #ff992f; | color: #ff992f; | ||
font-size: 2. | font-size: 2.6em; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
text-align: center; | text-align: center; | ||
text-shadow: 0 0 | text-shadow: 0 0 10px #ff992f; | ||
} | } | ||
h1,h2,h3,h4 | h1, h2, h3, h4 { | ||
font-family: 'Orbitron', sans-serif; | font-family: 'Orbitron', sans-serif; | ||
color: #ff992f; | color: #ff992f; | ||
margin: 30px | margin-top: 30px; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
text-shadow: 0 0 | text-shadow: 0 0 8px #ff992f66; | ||
} | } | ||
/* | /* LINKS */ | ||
a { | a { | ||
color: #ff992f; | color: #ff992f; | ||
transition: | text-decoration: none; | ||
transition: 0.2s; | |||
} | } | ||
a:hover { | a:hover { | ||
| Linha 107: | Linha 124: | ||
} | } | ||
/* | /* ABAS ATIVAS */ | ||
#p-views li.selected a, | #p-views li.selected a, | ||
.vectorTabs li.selected a { | .vectorTabs li.selected a { | ||
| Linha 115: | Linha 132: | ||
} | } | ||
/* | /* FORMULÁRIOS */ | ||
input, select, textarea { | input, select, textarea { | ||
background: #1a1a1a; | background: #1a1a1a; | ||
| Linha 125: | Linha 142: | ||
input:focus, textarea:focus { | input:focus, textarea:focus { | ||
border-color: #ff992f; | border-color: #ff992f; | ||
box-shadow: 0 0 10px # | box-shadow: 0 0 10px #ff992f55; | ||
outline: none; | outline: none; | ||
} | } | ||
| Linha 131: | Linha 148: | ||
background: #ff992f; | background: #ff992f; | ||
color: #111; | color: #111; | ||
padding: 10px 20px; | |||
border: none; | border: none; | ||
border-radius: 6px; | border-radius: 6px; | ||
font-weight: bold; | |||
transition: | text-transform: uppercase; | ||
transition: 0.3s; | |||
} | } | ||
button:hover, .mw-ui-button:hover { | button:hover, .mw-ui-button:hover { | ||
background: #ffaa4d; | background: #ffaa4d; | ||
box-shadow: 0 0 | box-shadow: 0 0 12px #ff992f88; | ||
} | } | ||
/* | /* RODAPÉ */ | ||
#footer { | |||
text-align: center; | |||
color: #888; | |||
padding: 40px 0; | |||
font-size: 14px; | |||
} | } | ||
/* SCROLLBAR */ | |||
::-webkit-scrollbar { | |||
width: 10px; | |||
} | } | ||
::-webkit-scrollbar-track { | |||
background: # | background: #111; | ||
} | } | ||
::-webkit-scrollbar-thumb { | ::-webkit-scrollbar-thumb { | ||
background: #ff992f; | background: #ff992f; | ||
border-radius: 6px; | border-radius: 6px; | ||
} | } | ||
::-webkit-scrollbar-thumb:hover { background: #ffaa4d | ::-webkit-scrollbar-thumb:hover { | ||
background: #ffaa4d; | |||
} | } | ||
/* | /* RESPONSIVO */ | ||
@media(max-width:900px) { | @media screen and (max-width: 900px) { | ||
.vector-sticky-pinned-container { | .vector-sticky-pinned-container { | ||
position: static; | position: static; | ||
width: 100%; | width: 100%; | ||
margin: 20px | margin-top: 20px; | ||
} | } | ||
#content { | #content { | ||
Edição das 09h47min de 22 de julho de 2025
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Inter:wght@400;500&display=swap');
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(160deg, #0d0d0d, #1a1a1a);
color: #f0f0f0;
background-attachment: fixed;
overflow-x: hidden;
}
/* HEADER FIXO */
#mw-head {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 60px;
background: rgba(10,10,10,0.9);
backdrop-filter: blur(6px);
box-shadow: 0 2px 10px rgba(0,0,0,0.6);
z-index: 1000;
display: flex;
align-items: center;
padding: 0 20px;
}
#p-logo {
background-image: url('/images/logo.png');
background-size: contain;
background-repeat: no-repeat;
width: 180px;
height: 40px;
text-indent: -9999px;
margin-right: 20px;
}
#p-logo a {
display: block;
width: 100%;
height: 100%;
}
/* MENU LATERAL ESQUERDO BONITÃO */
.vector-sticky-pinned-container {
position: fixed;
top: 80px;
left: 20px;
width: 220px;
background: rgba(20, 20, 20, 0.6);
border: 1px solid #333;
border-radius: 12px;
padding: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px rgba(255,153,47,0.08);
z-index: 900;
}
.vector-sticky-pinned-container h3 {
font-family: 'Orbitron', sans-serif;
color: #ff992f;
text-transform: uppercase;
font-size: 13px;
border-bottom: 1px solid #444;
margin-bottom: 8px;
padding-bottom: 4px;
}
.vector-sticky-pinned-container ul {
list-style: none;
padding-left: 0;
}
.vector-sticky-pinned-container ul li a {
display: block;
padding: 6px 0;
color: #eee;
border-bottom: 1px solid #2a2a2a;
transition: 0.2s;
}
.vector-sticky-pinned-container ul li a:hover {
color: #ffaa4d;
text-shadow: 0 0 5px #ff992f;
}
/* CONTEÚDO CENTRAL */
#content, #mw-content-text {
margin-left: 270px;
margin-top: 100px;
max-width: 1100px;
padding: 40px;
background: rgba(25,25,25,0.8);
border: 1px solid #2a2a2a;
border-radius: 16px;
box-shadow: 0 0 40px rgba(255, 153, 47, 0.1);
backdrop-filter: blur(6px);
}
/* TÍTULOS */
.firstHeading {
font-family: 'Orbitron', sans-serif;
color: #ff992f;
font-size: 2.6em;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 0 10px #ff992f;
}
h1, h2, h3, h4 {
font-family: 'Orbitron', sans-serif;
color: #ff992f;
margin-top: 30px;
text-transform: uppercase;
text-shadow: 0 0 8px #ff992f66;
}
/* LINKS */
a {
color: #ff992f;
text-decoration: none;
transition: 0.2s;
}
a:hover {
color: #ffaa4d;
text-shadow: 0 0 6px #ff992f;
}
/* ABAS ATIVAS */
#p-views li.selected a,
.vectorTabs li.selected a {
color: #fff !important;
background: transparent !important;
text-shadow: 0 0 6px #ff992f;
}
/* FORMULÁRIOS */
input, select, textarea {
background: #1a1a1a;
color: #fff;
border: 1px solid #444;
padding: 10px;
border-radius: 6px;
}
input:focus, textarea:focus {
border-color: #ff992f;
box-shadow: 0 0 10px #ff992f55;
outline: none;
}
button, .mw-ui-button {
background: #ff992f;
color: #111;
padding: 10px 20px;
border: none;
border-radius: 6px;
font-weight: bold;
text-transform: uppercase;
transition: 0.3s;
}
button:hover, .mw-ui-button:hover {
background: #ffaa4d;
box-shadow: 0 0 12px #ff992f88;
}
/* RODAPÉ */
#footer {
text-align: center;
color: #888;
padding: 40px 0;
font-size: 14px;
}
/* SCROLLBAR */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #111;
}
::-webkit-scrollbar-thumb {
background: #ff992f;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #ffaa4d;
}
/* RESPONSIVO */
@media screen and (max-width: 900px) {
.vector-sticky-pinned-container {
position: static;
width: 100%;
margin-top: 20px;
}
#content {
margin-left: 0;
}
#mw-head {
flex-direction: column;
height: auto;
padding: 10px;
}
}