MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* | /* ========================= | ||
. | Eaglespeed Corporate Theme | ||
. | =========================*/ | ||
body{ | |||
background:#eef3f9; | |||
font-family:Inter,"Segoe UI",Roboto,sans-serif; | |||
} | |||
.mw-page-container{ | |||
max-width:100%!important; | |||
} | |||
.mw-body{ | |||
max-width:100%!important; | |||
padding:0!important; | |||
background:transparent!important; | |||
box-shadow:none!important; | |||
} | |||
/* HERO */ | |||
.es-hero{ | |||
position:relative; | |||
height:88vh; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
overflow:hidden; | |||
background: | |||
linear-gradient(135deg,#02132f 0%,#003c8f 45%,#0076ff 100%); | |||
} | |||
.es-overlay{ | |||
position:absolute; | |||
inset:0; | |||
background: | |||
radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 35%), | |||
radial-gradient(circle at 80% 30%,rgba(255,255,255,.15),transparent 30%), | |||
radial-gradient(circle at 50% 100%,rgba(255,255,255,.08),transparent 40%); | |||
animation:float 14s infinite linear; | |||
} | |||
@keyframes float{ | |||
0%{transform:translateY(0px);} | |||
50%{transform:translateY(-35px);} | |||
100%{transform:translateY(0px);} | |||
} | |||
.es-content{ | |||
position:relative; | |||
z-index:2; | |||
text-align:center; | |||
width:1000px; | |||
max-width:90%; | |||
color:white; | |||
} | } | ||
.es-content img{ | |||
. | |||
width:190px; | |||
margin-bottom:25px; | |||
filter:drop-shadow(0 10px 35px rgba(0,0,0,.35)); | |||
} | } | ||
. | .es-badge{ | ||
display:inline-block; | |||
padding:12px 24px; | |||
border-radius:50px; | |||
background:rgba(255,255,255,.15); | |||
backdrop-filter:blur(16px); | |||
font-size:13px; | |||
font-weight:700; | |||
letter-spacing:2px; | |||
margin-bottom:30px; | |||
border:1px solid rgba(255,255,255,.3); | |||
} | } | ||
.es-content h1{ | |||
. | |||
font-size:74px; | |||
font-weight:900; | |||
line-height:1.05; | |||
margin:0; | |||
color:white; | |||
} | } | ||
.es-subtitle{ | |||
. | |||
font-size:23px; | |||
line-height:1.8; | |||
margin-top:35px; | |||
opacity:.93; | |||
} | } | ||
.es-buttons{ | |||
. | |||
margin-top:55px; | |||
} | } | ||
. | .es-btn-primary{ | ||
background:white; | |||
padding:18px 38px; | |||
border-radius:12px; | |||
font-weight:700; | |||
color:#003b8f; | |||
display:inline-block; | |||
margin-right:15px; | |||
transition:.35s; | |||
} | } | ||
.es-btn-secondary{ | |||
. | |||
border:2px solid rgba(255,255,255,.4); | |||
padding:18px 38px; | |||
border-radius:12px; | |||
font-weight:700; | |||
color:white; | |||
display:inline-block; | |||
transition:.35s; | |||
} | } | ||
.es-btn-primary:hover{ | |||
. | |||
transform:translateY(-5px); | |||
} | } | ||
. | .es-btn-secondary:hover{ | ||
background:white; | |||
color:#003b8f; | |||
} | } | ||
.es-wave{ | |||
. | |||
height:120px; | |||
background:white; | |||
margin-top:-60px; | |||
border-radius:100% 100% 0 0; | |||
} | } | ||
Revision as of 18:29, 4 August 2026
/* CSS placed here will be applied to all skins */
/* =========================
Eaglespeed Corporate Theme
=========================*/
body{
background:#eef3f9;
font-family:Inter,"Segoe UI",Roboto,sans-serif;
}
.mw-page-container{
max-width:100%!important;
}
.mw-body{
max-width:100%!important;
padding:0!important;
background:transparent!important;
box-shadow:none!important;
}
/* HERO */
.es-hero{
position:relative;
height:88vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
linear-gradient(135deg,#02132f 0%,#003c8f 45%,#0076ff 100%);
}
.es-overlay{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(255,255,255,.15),transparent 30%),
radial-gradient(circle at 50% 100%,rgba(255,255,255,.08),transparent 40%);
animation:float 14s infinite linear;
}
@keyframes float{
0%{transform:translateY(0px);}
50%{transform:translateY(-35px);}
100%{transform:translateY(0px);}
}
.es-content{
position:relative;
z-index:2;
text-align:center;
width:1000px;
max-width:90%;
color:white;
}
.es-content img{
width:190px;
margin-bottom:25px;
filter:drop-shadow(0 10px 35px rgba(0,0,0,.35));
}
.es-badge{
display:inline-block;
padding:12px 24px;
border-radius:50px;
background:rgba(255,255,255,.15);
backdrop-filter:blur(16px);
font-size:13px;
font-weight:700;
letter-spacing:2px;
margin-bottom:30px;
border:1px solid rgba(255,255,255,.3);
}
.es-content h1{
font-size:74px;
font-weight:900;
line-height:1.05;
margin:0;
color:white;
}
.es-subtitle{
font-size:23px;
line-height:1.8;
margin-top:35px;
opacity:.93;
}
.es-buttons{
margin-top:55px;
}
.es-btn-primary{
background:white;
padding:18px 38px;
border-radius:12px;
font-weight:700;
color:#003b8f;
display:inline-block;
margin-right:15px;
transition:.35s;
}
.es-btn-secondary{
border:2px solid rgba(255,255,255,.4);
padding:18px 38px;
border-radius:12px;
font-weight:700;
color:white;
display:inline-block;
transition:.35s;
}
.es-btn-primary:hover{
transform:translateY(-5px);
}
.es-btn-secondary:hover{
background:white;
color:#003b8f;
}
.es-wave{
height:120px;
background:white;
margin-top:-60px;
border-radius:100% 100% 0 0;
}