/**
* This stylesheet is intended for CSS that is used in all skins.
* CSS specifically related to the vector skin belongs in [[MediaWiki:Vector.css]].
*/
/**
* Custom heading style for wikitable
*/
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: #ddd;
}
/**
* Infobox
* Creates a table with gray background and lines, with a dark gray heading.
* This table is right-aligned.
*/
.infobox, .sidebar {
border: 1px solid #aaa;
background-color: #f9f9f9;
color: black;
margin: 0 0 1em 1em;
padding: 0;
font-size: 85%;
float: right;
clear: right;
width: 270px;
}
.infobox td,
.infobox th {
vertical-align: top;
}
.infobox th {
text-align: left;
}
.infobox .infobox-kop {
background-color: #e3e3e3;
text-align: center;
}
.infobox.bordered {
border-collapse: collapse;
}
.infobox.bordered td,
.infobox.bordered th {
border: 1px solid #aaa;
}
.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
border: 0;
}
/**
* Align in tables.
* Replacing valign="top", align="left" etc.
*/
.vatop tr,
tr.vatop,
td.vatop,
th.vatop {
vertical-align: top;
}
.ta-left,
.wikitable th.ta-left {
text-align: left;
}
.ta-center {
text-align: center;
}
.ta-right,
.wikitable th.ta-right {
text-align: right;
}
/**
* on category pages, Special:AllPages and Special:Prefix index,
* as well as in the 'Edit watchlist' screen. The code below also makes this green.
* If there is a change, please update [[MediaWiki:Prefixindex-summary]] and [[Help:Use of categories]].
*/
.allpagesredirect a,
.redirect-in-category a,
.watchlistredir {
color: green;
}
.allpagesredirect a:visited {
color: #004000;
}
/* {{pp|small=yes}} */
.mp-box {
border: 1px solid #aaa; /* all border colors overriden on specific elements */
padding: 0 0.5em 0.5em;
margin-top: 4px;
}
.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
border: 1px solid #aaa; /* all border colors overriden on specific elements */
margin: 0.5em 0;
padding: 0.2em 0.4em;
font-size: 120%;
font-weight: bold;
font-family: Montserrat, sans-serif;
}
h2.mp-h2::after { /* Remove borders in Timeless */
border: none;
}
.mp-later {
font-size: 85%;
font-weight: normal;
}
#mp-topbanner {
background: #f9f9f9;
border-color: #ddd;
}
#mp-welcomecount {
text-align: center;
margin: 0.4em;
}
#mp-welcome {
font-family: Montserrat, sans-serif;
font-size: 162%;
padding: 0.1em;
}
#mp-welcome h1 {
font-size: inherit;
font-family: inherit;
display: inline;
border: none;
}
#mp-welcome h1::after {
content: none;
}
#mp-free {
font-family: Montserrat, sans-serif;
font-size: 100%;
}
#articlecount {
font-size: 85%;
}
/* clear fix */
.mp-contains-float::after {
content: "";
display: block;
clear: both;
}
#mp-banner {
background: #fffaf5;
border-color: #f2e0ce;
}
#mp-left {
background: #f5fffa;
border-color: #cef2e0;
}
#mp-left .mp-h2 {
background: #cef2e0;
border-color: #a3bfb1;
}
#mp-right {
background: #f5faff;
border-color: #cedff2;
}
#mp-right .mp-h2 {
background: #cedff2;
border-color: #a3b0bf;
}
#mp-middle {
background: #fff5fa;
border-color: #f2cedd;
}
#mp-middle .mp-h2 {
background: #f2cedd;
border-color: #bfa3af;
}
#mp-lower {
background: #faf5ff;
border-color: #ddcef2;
}
#mp-lower .mp-h2 {
background: #ddcef2;
border-color: #afa3bf;
}
#mp-bottom {
/* no background */
border-color: #e2e2e2;
}
#mp-bottom .mp-h2 {
background: #eee;
border-color: #ddd;
}
@media (max-width: 875px) {
/* We need to improve Template:POTD as used on the main page so that these
* hacks aren't necessary */
#mp-tfp table,
#mp-tfp tr,
#mp-tfp td,
#mp-tfp tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
#mp-tfp tr:first-child td:first-child a {
text-align: center;
display: table;
margin: 0 auto;
}
}
@media (min-width: 875px) {
#mp-upper {
display: flex;
}
#mp-left {
flex: 1 1 55%;
margin-right: 2px;
}
#mp-right {
flex: 1 1 45%;
margin-left: 2px;
}
}
/***** header, contents, footer *****/
div.hp-header,
div.hp-contents,
div.hp-footer {
margin: 10px 0;
background-color: #ffffff;
}
div.hp-header {
padding: 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
div.hp-header > table,
div.hp-contents > table {
width: 100%;
margin: 0;
}
div.hp-header td {
vertical-align: middle;
text-align: center;
padding: 1.5em 1em;
}
div.hp-header td.hp-welcome {
width: 75%;
font-family: Montserrat;
font-size: 1.3em;
line-height: 150%;
}
div.hp-header .hp-welcome-1 {
font-variant: small-caps;
font-size: 185%;
}
div.hp-header td.hp-welcome a {
color: #333333;
}
div.hp-header td.hp-statistics {
border-left: 1px solid #cccccc;
}
div.hp-header .hp-statistics-1 {
display: inline-block;
text-align: left;
}
div.hp-contents {
padding: 2px 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
div.hp-contents table {
text-align: center;
font-size: 1em;
border-spacing: 1px;
}
div.hp-contents td { /* background-color, border-color and width are defined inline */
padding: 0;
border-width: 0px 0 0 0;
border-style: solid;
}
div.hp-contents a {
display: block;
padding: 3px 0.25em;
color: #000000;
}
div.hp-footer {
text-align: center;
font-size: 0.95em;
}
/***** most outer div (wraps the whole page); general styles *****/
div.hp {
background-color: #ffffff;
color: #333333;
}
.justapedia-J { /* for the stylized J of Justapedia */
font-feature-settings: 'ss05';
}
div.hp table {
margin: 0;
border-collapse: separate;
}
div.hp p {
margin: 0.5em 0;
}
/***** blocks of segments *****/
table.hp-block {
width: 100%;
border-spacing: 2px;
}
table.hp-block > tbody > tr > td {
vertical-align: top;
padding: 10px;
}
table.hp-block h2.hp-segment-title {
margin: 1px;
padding: 10px 10px 10px 25px;
white-space: nowrap;
border-bottom: 0px solid #555555;
font-family: unset;
font-size: 2em;
font-variant: small-caps;
line-height: unset;
}
@media screen and ( max-width: 999px ) {
/* slightly smaller segment titles on narrower screens/windows */
table.hp-block h2.hp-segment-title {
padding-left: 15px;
font-size: 1.8em;
}
}
table.hp-block h2.hp-segment-title a {
color: #555555;
}
table.hp-block div.hp-segment-content {
padding: 10px;
border-top: 2px solid #ffffff;
text-align: justify;
}
#segment-sisterprojects div.hp-segment-content {
text-align: center;
}
/***** vertical lay-out on narrow screens, both desktop and mobile *****/
@media screen and ( max-width: 899px ) {
.hp-responsive-table,
.hp-responsive-table > tbody,
.hp-responsive-table > tbody > tr,
.hp-responsive-table > tbody > tr > td {
display: block;
width: 100% !important;
height: auto;
box-sizing: border-box;
}
div.hp-header td.hp-statistics {
padding-top: 0;
border-left: 0 none;
}
div.hp-contents table tr {
display: flex !important;
flex-wrap: wrap;
}
div.hp-contents table td {
width: auto !important;
margin: 0 1px 1px 0;
flex: auto;
}
table.hp-block > tbody > tr {
display: flex !important;
flex-direction: column;
}
#segment-Over_Justapedia {
background-color: transparent !important;
order: -1;
}
#segment-Over_Justapedia h2.hp-segment-title {
display: none;
}
#segment-Over_Justapedia div.hp-segment-content {
background-color: transparent !important;
padding: 0;
font-size: 0.95em;
}
table.hp-block tr.hp-3colsegment-content > td {
border-top: 2px solid #ffffff;
}
}
/* [[phab:T293232]] - Mobile doesn't have this style.
* Will be fixed with TStyles.
*/
div.hlist.inline ul,
div.hlist.inline li,
div.hlist.inline {
display: inline;
}
/* #region [[Templat:Halaman Utama/Box4]] */
.mp-content-box-other {
margin-top: 10px;
}
.mp-content-box-other__header {
position: relative;
left: 8px;
top: 2px;
background: #c6defe;
height: 25px;
margin: 0 10px 0 0;
border-radius: 8px;
overflow: visible;
border: none;
}
.mp-content-box-other .mp-content-box-other__header::after {
border: none;
}
.mp-content-box-other__header-icon {
position: absolute;
left: 1px;
top: -7px;
}
.mp-content-box-other__header-text {
position: absolute;
left: 40px;
top: 2px;
margin: 0;
border-bottom: 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-weight: bold;
text-align: left;
color: #000;
padding: 0.15em 0.4em;
}
.mp-content-box-other__header .mp-content-box-other__header-text {
font-size: 1rem;
}
.mp-content-box-other__content {
margin: 0 1em 1em 1em;
padding-right: 0;
padding-top: 12px;
}
/* #endregion */
/* #region footer */
.mp-footer {
margin: 12px 0 0 0;
color: #000;
padding: 5px;
}
.mp-footer__main {
border: 1px solid #a7d7f9;
border-radius: 10px;
}
.mp-footer__title {
text-align: center;
margin-bottom: 5px;
}
.mp-footer__subtitle {
font-size: 85%;
text-align: center;
}
.mp-footer__contact-us {
margin-top: 10px;
text-align: center;
}
/* #endregion */
/* #region main-content */
@media all and ( min-width: 800px ) {
body:not(.skin-minerva) .mp-main-content {
margin-top: 10px;
display: flex;
}
body:not(.skin-minerva) .mp-main-content__focus {
flex: 1 1 55%;
border: 1px solid #a7d7f9;
vertical-align: top;
color: #000;
padding: 0 10px 10px 0;
border-radius: 10px;
margin-right: 10px;
}
body:not(.skin-minerva) .mp-main-content__other {
flex: 1 1 45%;
border: 1px solid #a7d7f9;
vertical-align: top;
padding: 0 10px 10px 0;
background: #f5faff;
border-radius: 10px;
margin-left: 10px;
}
}
body.skin-minerva .mp-main-content__focus,
body.skin-minerva .mp-main-content__other {
border: none;
}
/* #endregion */
/*TYPEWRITER*/
.typewriter {
padding: 0;
width: 100% !important;
float: left;
margin:0.3em;
}
.typewriter div {
overflow: hidden; /* Ensures the content is not revealed until the animation */
white-space: nowrap; /* Keeps the content on a single line */
/* margin: 0 auto; Gives that scrolling effect as the typing happens */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
border-bottom: 0;
font-size: 15px;
width: 100% !important;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #2a4b8d; }
}
