MediaWiki:Common.css
Tampilan
Catatan: Setelah menerbitkan, Anda mungkin perlu melewati tembolok peramban web Anda untuk melihat perubahan.
- Firefox/Safari: Tekan dan tahan Shift sembari mengeklik Reload, atau tekan Ctrl-F5 atau Ctrl-R (⌘-R di Mac)
- Google Chrome: Tekan Ctrl-Shift-R (⌘-Shift-R di Mac)
- Edge: Tahan Ctrl sembari mengeklik Refresh, atau tekan Ctrl-F5
/* ============================================================
WIKI UNISSULA INTERNAL UI V1
MediaWiki search / article / special pages
Homepage "/" remains Nginx static portal.
============================================================ */
:root {
--wui-green: #08783e;
--wui-green-dark: #045a30;
--wui-green-deep: #034724;
--wui-mint: #eef8f2;
--wui-gold: #ddaF31;
--wui-text: #1d2722;
--wui-muted: #65726b;
--wui-border: #e1e8e4;
--wui-bg: #f5f7f6;
--wui-white: #ffffff;
}
/* ============================================================
PAGE BACKGROUND
============================================================ */
html,
body {
background: var(--wui-bg) !important;
}
body {
color: var(--wui-text);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;
}
/* ============================================================
CLEAN VECTOR HEADER
============================================================ */
.vector-header-container {
background: #fff !important;
border-bottom: 1px solid var(--wui-border);
}
.vector-header {
max-width: 1240px !important;
margin: 0 auto !important;
min-height: 68px;
}
.mw-logo-icon {
display: none !important;
}
.mw-logo-container {
position: relative !important;
padding-left: 49px !important;
min-width: 190px;
}
.mw-logo-container::before {
content: "WU";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
background: var(--wui-green);
color: #fff;
font-size: 11px;
font-weight: 900;
letter-spacing: .5px;
}
.mw-logo-wordmark {
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif !important;
font-size: 20px !important;
font-weight: 850 !important;
color: var(--wui-green-dark) !important;
}
.vector-search-box {
max-width: 560px !important;
}
.cdx-text-input__input,
.vector-search-box-input {
border-color: #ccd7d1 !important;
border-radius: 9px !important;
}
/* ============================================================
REMOVE WIDE VECTOR SIDE COLUMNS
============================================================ */
.vector-column-start,
.vector-column-end {
display: none !important;
}
.mw-page-container-inner {
display: block !important;
}
.mw-content-container {
width: calc(100% - 48px) !important;
max-width: 1180px !important;
margin: 34px auto 0 !important;
}
/* ============================================================
MAIN CONTENT CARD
============================================================ */
.mw-page-container {
background: var(--wui-bg) !important;
}
.mw-body {
box-sizing: border-box;
width: 100% !important;
max-width: none !important;
padding: 34px 40px !important;
border: 1px solid var(--wui-border);
border-radius: 16px;
background: #fff !important;
box-shadow:
0 5px 22px rgba(25, 65, 43, .035);
}
.firstHeading {
margin-bottom: 18px !important;
color: var(--wui-text) !important;
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif !important;
font-size: 32px !important;
line-height: 1.2;
font-weight: 820 !important;
letter-spacing: -.7px;
}
.mw-body h2 {
margin-top: 34px;
color: var(--wui-green-dark);
border-bottom-color: var(--wui-border);
font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;
}
.mw-body h3 {
color: var(--wui-green-dark);
}
.mw-parser-output {
font-size: 15px;
line-height: 1.75;
}
.mw-parser-output a {
color: #086ca5;
}
.mw-parser-output a.new {
color: #a43d4b;
}
/* ============================================================
PAGE TOOLBAR
============================================================ */
.vector-page-toolbar {
margin-bottom: 25px;
}
.vector-page-toolbar-container {
border-bottom-color: var(--wui-border) !important;
}
.vector-menu-tabs .mw-list-item a {
font-size: 13px;
}
.vector-menu-tabs .selected a {
color: var(--wui-green-dark) !important;
}
/* ============================================================
SEARCH PAGE
============================================================ */
body.mw-special-Search .mw-body {
padding: 36px 42px 44px !important;
}
body.mw-special-Search .firstHeading {
color: var(--wui-green-dark) !important;
font-size: 34px !important;
}
/* Search input area */
.mw-search-form-wrapper {
margin: 12px 0 22px !important;
padding: 20px !important;
border: 1px solid var(--wui-border) !important;
border-radius: 13px !important;
background: #f8faf9 !important;
}
.mw-search-form-wrapper form {
max-width: none !important;
}
.mw-search-form-wrapper .cdx-search-input {
max-width: 820px;
}
.mw-search-form-wrapper .cdx-text-input__input {
min-height: 46px;
border-color: #cbd8d1 !important;
border-radius: 9px 0 0 9px !important;
font-size: 15px;
}
.mw-search-form-wrapper .cdx-search-input__end-button,
.mw-search-form-wrapper button {
min-width: 90px;
background: var(--wui-green) !important;
border-color: var(--wui-green) !important;
color: #fff !important;
font-weight: 750;
}
/* Search tabs */
.mw-search-profile-tabs {
margin: 0 0 28px !important;
border: 1px solid var(--wui-border) !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden;
}
.mw-search-profile-tabs ul {
margin: 0 !important;
}
.mw-search-profile-tabs li {
border: 0 !important;
}
.mw-search-profile-tabs li a {
padding: 11px 17px !important;
color: #536059 !important;
font-size: 13px;
font-weight: 650;
}
.mw-search-profile-tabs li.current a,
.mw-search-profile-tabs li.selected a {
background: var(--wui-mint) !important;
color: var(--wui-green-dark) !important;
}
/* Results */
.mw-search-results {
margin: 0 !important;
padding: 0 !important;
}
.mw-search-result {
list-style: none !important;
margin: 0 !important;
padding: 22px 5px !important;
border-bottom: 1px solid #ebf0ed;
}
.mw-search-result:last-child {
border-bottom: 0;
}
.mw-search-result-heading {
margin-bottom: 7px !important;
}
.mw-search-result-heading a {
color: var(--wui-green-dark) !important;
font-size: 20px !important;
line-height: 1.35;
font-weight: 800 !important;
text-decoration: none !important;
}
.mw-search-result-heading a:hover {
color: var(--wui-green) !important;
}
.searchresult,
.mw-search-result .searchresult {
max-width: 850px;
color: #4f5d56 !important;
font-size: 13px !important;
line-height: 1.65 !important;
}
.mw-search-result-data {
margin-top: 6px;
color: #86918b !important;
font-size: 11px !important;
}
/* search information / counts */
.results-info,
.mw-search-results-info {
color: var(--wui-muted);
font-size: 12px;
}
/* ============================================================
NO RESULTS
============================================================ */
.mw-search-nonefound {
padding: 30px;
border: 1px dashed #cad8d0;
border-radius: 12px;
background: #fafcfb;
color: var(--wui-muted);
}
/* ============================================================
SPECIAL / CATEGORY / ALL PAGES
============================================================ */
.mw-special-Allpages .mw-allpages-body,
.mw-special-Categories .mw-spcontent {
margin-top: 20px;
}
.mw-allpages-chunk {
line-height: 1.8;
}
/* ============================================================
LOGIN
============================================================ */
.mw-special-Userlogin .mw-body,
.mw-special-CreateAccount .mw-body {
max-width: 760px !important;
margin-left: auto;
margin-right: auto;
}
/* ============================================================
FOOTER
============================================================ */
.mw-footer-container {
margin-top: 34px;
background: transparent !important;
}
#footer {
max-width: 1180px;
margin: 0 auto !important;
padding: 22px 0 30px !important;
color: var(--wui-muted);
}
#footer-poweredbyico {
display: none !important;
}
/* ============================================================
CREATE ACCOUNT HIDDEN
============================================================ */
#pt-createaccount,
#pt-createaccount-2 {
display: none !important;
}
/* ============================================================
MOBILE
============================================================ */
@media (max-width: 760px) {
.mw-content-container {
width: calc(100% - 24px) !important;
margin-top: 18px !important;
}
.mw-body {
padding: 24px 20px !important;
border-radius: 12px;
}
.firstHeading {
font-size: 27px !important;
}
body.mw-special-Search .mw-body {
padding: 24px 20px 30px !important;
}
.mw-logo-container {
min-width: auto;
}
}