https://wiki.javasatu.com/index.php?action=history&feed=atom&title=Halaman_Utama%2Fstyle.css 2026-04-03T21:09:55Z Riwayat revisi halaman ini di wiki MediaWiki 1.40.0 https://wiki.javasatu.com/index.php?title=Halaman_Utama/style.css&diff=703&oldid=prev 2023-09-16T08:58:03Z

<p>←Membuat halaman berisi &#039;<span dir="auto"><span class="autocomment"><a href="/index.php?title=Halaman_Utama/TesSeluler&amp;action=edit&amp;redlink=1" class="new" title="Halaman Utama/TesSeluler (halaman belum tersedia)">Halaman Utama/TesSeluler</a>: </span> <span dir="auto"><span class="autocomment">#region header: </span> .mp-header { border-radius: 10px; border: 1px solid #a7d7f9; background: url(&#039;//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png&#039;); background-repeat: no-repeat; background-position: -40px -15px; vertical-align: top; } .mp-header__main { display: flex; font-size: 95%; margin-top: 2px; margin-bottom: 2px; } .mp-header__welcome { margin-left: 155px; f...&#039;</span></span></p> <p><b>Halaman baru</b></p><div>/* [[Halaman Utama/TesSeluler]] */<br /> /* #region header */<br /> .mp-header {<br /> border-radius: 10px;<br /> border: 1px solid #a7d7f9;<br /> <br /> background: url('//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png');<br /> background-repeat: no-repeat;<br /> background-position: -40px -15px;<br /> vertical-align: top;<br /> }<br /> .mp-header__main {<br /> display: flex;<br /> font-size: 95%;<br /> margin-top: 2px;<br /> margin-bottom: 2px;<br /> }<br /> .mp-header__welcome {<br /> margin-left: 155px;<br /> flex: 1;<br /> margin-top: 2px;<br /> margin-bottom: 2px;<br /> }<br /> .mp-header__statistics {<br /> flex: 0 1 auto;<br /> padding: 1em;<br /> text-align: right;<br /> line-height: 1.3;<br /> }<br /> .mp-header__welcome-hero {<br /> font-size: 185%;<br /> }<br /> .mp-header__welcome-subtitle {<br /> padding-left: 8px;<br /> }<br /> .mp-header__portal {<br /> text-align: center;<br /> margin-top: 2px;<br /> margin-bottom: 2px;<br /> }<br /> <br /> .mp-main-content,<br /> .mp-main-content__focus, <br /> .mp-main-content__other {<br /> display: block;<br /> width: 100%;<br /> padding: 0;<br /> }<br /> <br /> /* #endregion */<br /> /* #region main-content */<br /> @media all and ( min-width: 800px ) {<br /> body:not(.skin-minerva) .mp-main-content {<br /> margin-top: 10px;<br /> display: flex;<br /> }<br /> body:not(.skin-minerva) .mp-main-content__focus {<br /> flex: 1 1 55%;<br /> border: 1px solid #a7d7f9;<br /> vertical-align: top;<br /> color: #000;<br /> padding: 0 10px 10px 0;<br /> border-radius: 10px;<br /> }<br /> body:not(.skin-minerva) .mp-main-content__other {<br /> flex: 1 1 45%;<br /> border: 1px solid #a7d7f9;<br /> vertical-align: top;<br /> padding: 0 10px 10px 0;<br /> background: #f5faff;<br /> border-radius: 10px;<br /> margin-left: 10px;<br /> }<br /> }<br /> body.skin-minerva .mp-main-content__focus,<br /> body.skin-minerva .mp-main-content__other {<br /> border: none;<br /> }<br /> /* #endregion */<br /> <br /> /* #region footer */<br /> .mp-footer {<br /> margin: 12px 0 0 0;<br /> color: #000;<br /> padding: 5px;<br /> }<br /> .mp-footer__main {<br /> border: 1px solid #a7d7f9;<br /> border-radius: 10px;<br /> }<br /> .mp-footer__title {<br /> text-align: center;<br /> margin-bottom: 5px;<br /> }<br /> .mp-footer__subtitle {<br /> font-size: 85%;<br /> text-align: center;<br /> }<br /> .mp-footer__contact-us {<br /> margin-top: 10px;<br /> text-align: center;<br /> }<br /> <br /> /* #endregion */<br /> <br /> /* #region [[Templat:Halaman Utama/Box3]] */<br /> <br /> .mp-content-box {<br /> margin-top: 10px;<br /> }<br /> .mp-content-box__header {<br /> position: relative;<br /> background-image: url('//upload.wikimedia.org/wikipedia/commons/4/46/Bluebg_rounded.png');<br /> left: 4px;<br /> top: 2px;<br /> margin: 0;<br /> height: 25px;<br /> background-repeat: no-repeat;<br /> overflow: visible;<br /> border: none;<br /> }<br /> .mp-content-box .mp-content-box__header::after {<br /> border: none;<br /> }<br /> .mp-content-box__header-icon {<br /> position: absolute;<br /> left: 5px;<br /> top: -6px;<br /> }<br /> .mp-content-box__header-text {<br /> position: absolute;<br /> left: 40px;<br /> top: 2px;<br /> <br /> margin-top: 0;<br /> color: black;<br /> font-weight: bold;<br /> font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;<br /> border-bottom: none;<br /> padding: 0.15em 0.4em;<br /> }<br /> .mp-content-box__header .mp-content-box__header-text {<br /> font-size: 1rem;<br /> }<br /> .mp-content-box__content {<br /> padding-left: 10px;<br /> padding-bottom: 5px;<br /> padding-top: 12px;<br /> }<br /> .mp-content-box__footer {<br /> text-align: right;<br /> }<br /> /* #endregion */<br /> <br /> /* #region [[Templat:Halaman Utama/Box4]] */<br /> .mp-content-box-other {<br /> margin-top: 10px;<br /> }<br /> .mp-content-box-other__header {<br /> position: relative;<br /> left: 8px;<br /> top: 2px;<br /> background: #c6defe;<br /> height: 25px;<br /> margin: 0 10px 0 0;<br /> border-radius: 8px;<br /> overflow: visible;<br /> border: none;<br /> }<br /> .mp-content-box-other .mp-content-box-other__header::after {<br /> border: none;<br /> }<br /> .mp-content-box-other__header-icon {<br /> position: absolute;<br /> left: 1px;<br /> top: -7px;<br /> }<br /> .mp-content-box-other__header-text {<br /> position: absolute;<br /> left: 40px;<br /> top: 2px;<br /> <br /> margin: 0;<br /> border-bottom: 0;<br /> font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;<br /> font-weight: bold;<br /> text-align: left;<br /> color: #000;<br /> padding: 0.15em 0.4em;<br /> }<br /> .mp-content-box-other__header .mp-content-box-other__header-text {<br /> font-size: 1rem;<br /> }<br /> .mp-content-box-other__content {<br /> margin: 0 1em 1em 1em;<br /> padding-right: 0;<br /> padding-top: 12px;<br /> }<br /> /* #endregion */<br /> <br /> /* Agar gambar pilihan mengecil di layar kecil */<br /> .mp-gambar-pilihan {<br /> width: 100%;<br /> height: auto;<br /> }<br /> <br /> /* Confetti Ultah WBI */<br /> @keyframes cauconfeti {<br /> from {opacity: 0;}<br /> 50% {opacity: 1;}<br /> to {transform: translateY(100vh);}<br /> }<br /> <br /> @keyframes amaguemcontainer {<br /> from {visibility: visible;}<br /> to {visibility: hidden;}<br /> }<br /> <br /> <br /> .container-confeti {<br /> display: flex;<br /> max-width: 100%;<br /> width: 90%;<br /> height: 100vh;<br /> z-index: 1000;<br /> margin:0 auto;<br /> position: absolute;<br /> visibility:hidden;<br /> animation: amaguemcontainer;<br /> animation-duration: 4s;<br /> }<br /> .confeti {<br /> position: absolute;<br /> width: 10px;<br /> height: 30px;<br /> top: 0;<br /> opacity: 0;<br /> }<br /> <br /> .confeti:nth-child(odd) {<br /> background: #E63946;<br /> }<br /> .confeti:nth-child(2n) {<br /> background: #84C318;<br /> }<br /> <br /> .confeti:nth-child(4n-7) {<br /> background: #73EEDC;<br /> }<br /> .confeti:nth-child(1) {<br /> left: 5%;<br /> transform: rotate(-23deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 152ms;<br /> animation-duration: 1000ms;<br /> }<br /> <br /> .confeti:nth-child(2) {<br /> left: 12%;<br /> transform: rotate(35deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 200ms;<br /> animation-duration: 1100ms;<br /> }<br /> <br /> .confeti:nth-child(3) {<br /> left: 25%;<br /> transform: rotate(-23deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 146ms;<br /> animation-duration: 1300ms;<br /> }<br /> <br /> .confeti:nth-child(4) {<br /> left: 32%;<br /> transform: rotate(35deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 182ms;<br /> animation-duration: 1500ms;<br /> }<br /> <br /> .confeti:nth-child(5) {<br /> left: 45%;<br /> transform: rotate(-23deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 232ms;<br /> animation-duration: 900ms;<br /> }<br /> <br /> .confeti:nth-child(6) {<br /> left: 52%;<br /> transform: rotate(35deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 222ms;<br /> animation-duration: 1300ms;<br /> }<br /> <br /> .confeti:nth-child(7) {<br /> left: 65%;<br /> transform: rotate(-23deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 382ms;<br /> animation-duration: 1200ms;<br /> }<br /> <br /> .confeti:nth-child(8) {<br /> left: 73%;<br /> transform: rotate(35deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 122ms;<br /> animation-duration: 1600ms;<br /> }<br /> <br /> .confeti:nth-child(9) {<br /> left: 77%;<br /> transform: rotate(-23deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 152ms;<br /> animation-duration: 1200ms;<br /> }<br /> <br /> .confeti:nth-child(10) {<br /> left: 82%;<br /> transform: rotate(35deg);<br /> animation: cauconfeti 5 ease-in-out;<br /> animation-delay: 282ms;<br /> animation-duration: 700ms;<br /> }<br /> <br /> .confeti:nth-child(3n) {<br /> width: 5px;<br /> height: 60px;<br /> border-radius: 15px;<br /> animation-duration: 1200ms;<br /> animation-delay: 1000ms;<br /> }<br /> <br /> .confeti:nth-child(4n) {<br /> width: 5px;<br /> height: 12px;<br /> animation-duration: 2000ms;<br /> }<br /> .confeti:nth-child(4n) {<br /> position: relative;<br /> width: 50px;<br /> height: 5px;<br /> margin: 20px 0;<br /> background: #457B9D;<br /> border-radius: 60% / 10%;<br /> color: white;<br /> text-align: center;<br /> text-indent: .1em;<br /> }<br /> .confeti:nth-child(4n):before {<br /> content: '';<br /> position: absolute;<br /> top: 10%;<br /> bottom: 10%;<br /> right: -5%;<br /> left: -5%;<br /> background: inherit;<br /> border-radius: 5% / 50%;<br /> }<br /> .confeti:nth-child(4n):after {<br /> content: '';<br /> position: absolute;<br /> bottom: 0;<br /> right: -11px;<br /> width: 50px;<br /> height: 5px;<br /> background: #457B9D;<br /> border-radius: 80% / 150%;<br /> <br /> }</div>

Adminjavasatu