MediaWiki:Helper.css

/*! * Helper classes * * @Source: Bootstrap v4 alpha * @License: MIT License * * Reusable universal patterns. * Designed to boosts productivity and performance. * * In order for an easier adaptation, we borrowed these classes * from `Bootstrap` framework which is widely used among web designers. * * If you consider adding other custom classes here, * please indicate that with a comment. */

/* Clearfix */ .clearfix::after, .group::after { content: ''; clear: both; display: table; border-spacing: 0; }

/* Display */ .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-inline { display: inline !important; } .d-table { display: table !important; } /* CUSTOM */ .d-table-cell { display: table-cell !important; } /* CUSTOM */

/* Float (xs- prefix removed) */ .float-left { float: left !important; } .float-right { float: right !important; } .float-none { float: none !important; }

/* Expand */ .w-100 { width: 100% !important; } .w-50 { width: 50% !important; } .h-100 { height: 100% !important; }

/* Margins and Paddings (rem unit converted to px to fit to ko.pokemon.wikia.com) */ .mx-auto { margin-right: auto !important; margin-left: auto !important; }

.m-1 { margin: 10px 10px !important; } .mt-1 { margin-top: 10px !important; } .mr-1 { margin-right: 10px !important; } .mb-1 { margin-bottom: 10px !important; } .ml-1 { margin-left: 10px !important; } .mx-1 { margin-right: 10px !important; margin-left: 10px !important; } .my-1 { margin-top: 10px !important; margin-bottom: 10px !important; }

.m-2 { margin: 15px 15px !important; } .mt-2 { margin-top: 15px !important; } .mr-2 { margin-right: 15px !important; } .mb-2 { margin-bottom: 15px !important; } .ml-2 { margin-left: 15px !important; } .mx-2 { margin-right: 15px !important; margin-left: 15px !important; } .my-2 { margin-top: 15px !important; margin-bottom: 15px !important; }

.m-3 { margin: 30px 30px !important; } .mt-3 { margin-top: 30px !important; } .mr-3 { margin-right: 30px !important; } .mb-3 { margin-bottom: 30px !important; } .ml-3 { margin-left: 30px !important; } .mx-3 { margin-right: 30px !important; margin-left: 30px !important; } .my-3 { margin-top: 30px !important; margin-bottom: 30px !important; }

.p-0 { padding: 0 0 !important; } .pt-0 { padding-top: 0 !important; } .pr-0 { padding-right: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .px-0 { padding-right: 0 !important; padding-left: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

.p-1 { padding: 10px 10px !important; } .pt-1 { padding-top: 10px !important; } .pr-1 { padding-right: 10px !important; } .pb-1 { padding-bottom: 10px !important; } .pl-1 { padding-left: 10px !important; } .px-1 { padding-right: 10px !important; padding-left: 10px !important; } .py-1 { padding-top: 10px !important; padding-bottom: 10px !important; }

.p-2 { padding: 15px 15px !important; } .pt-2 { padding-top: 15px !important; } .pr-2 { padding-right: 15px !important; } .pb-2 { padding-bottom: 15px !important; } .pl-2 { padding-left: 15px !important; } .px-2 { padding-right: 15px !important; padding-left: 15px !important; } .py-2 { padding-top: 15px !important; padding-bottom: 15px !important; }

.p-3 { padding: 30px 30px !important; } .pt-3 { padding-top: 30px !important; } .pr-3 { padding-right: 30px !important; } .pb-3 { padding-bottom: 30px !important; } .pl-3 { padding-left: 30px !important; } .px-3 { padding-right: 30px !important; padding-left: 30px !important; } .py-3 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* Rounded corner */ .rounded, .roundy { border-radius: 10px !important; } .rounded-top, .roundytop { border-top-right-radius: 10px !important; border-top-left-radius: 10px !important; } .rounded-right, .roundyright { border-bottom-right-radius: 10px !important; border-top-right-radius: 10px !important; } .rounded-bottom, .roundybottom { border-bottom-right-radius: 10px !important; border-bottom-left-radius: 10px !important; } .rounded-left, .roundyleft { border-bottom-left-radius: 10px !important; border-top-left-radius: 10px !important; } .rounded-topleft, .roundytopleft { border-top-left-radius: 10px !important; } .rounded-topright, .roundytopright { border-top-right-radius: 10px !important; } .rounded-bottomleft, .roundybottomleft { border-bottom-left-radius: 10px !important; } .rounded-bottomright, .roundybottomright { border-bottom-right-radius: 10px !important; } .rounded-circle, .roundycircle { border-radius: 50%; }

table.rounded > tbody > tr:first-child > th:first-child, table.rounded > tbody > tr:first-child > td:first-child { border-top-left-radius: 5px; } table.rounded > tbody > tr:first-child > th:last-child, table.rounded > tbody > tr:first-child > td:last-child { border-top-right-radius: 5px; } table.rounded > tbody > tr:last-child > th:first-child, table.rounded > tbody > tr:last-child > td:first-child { border-bottom-left-radius: 5px; } table.rounded > tbody > tr:last-child > th:last-child, table.rounded > tbody > tr:last-child > td:last-child { border-bottom-right-radius: 5px; }

/* Vertical alignment */ .align-baseline { vertical-align: baseline !important; } .align-top { vertical-align: top !important; } .align-middle { vertical-align: middle !important; } .align-bottom { vertical-align: bottom !important; } .align-text-bottom { vertical-align: text-bottom !important; } .align-text-top { vertical-align: text-top !important; }

/* Text (xs- prefix removed) */ .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-center { text-align: center !important; } .text-justify { text-align: justify !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .font-weight-normal { font-weight: normal !important; } .font-weight-bold { font-weight: bold !important; } .font-italic { font-style: italic !important; } .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; }

.text-large { font-size: 1.25rem; } /* CUSTOM */ .text-larger { font-size: 1.5rem; } /* CUSTOM */ .text-small { font-size: .846rem; line-height: normal; } /* CUSTOM */ .text-smaller { font-size: .769rem; line-height: normal; } /* CUSTOM */

/* Color */ .text-white { color: #fff !important; } .text-muted { color: #888 !important; } .text-warning { color: #f00 !important; }

.bg-white, .back-white { background: #fff !important; } /* legacy class ".back-white" requires replacement */ .bg-transparent { background: transparent !important; } /* CUSTOM */

/* Miscellaneous */ .hidden { display: none !important; } .invisible { visibility: hidden !important; } .centered { /* CUSTOM */ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

/* ,  */ .list-unstyled, .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item + .list-inline-item { margin-left: 5px; }

/*  */ .table { width: 100%; max-width: 100%; margin-bottom: 1rem; } .table th, .table td { padding: 0.75rem; vertical-align: top; border-top: 1px solid #eceeef; } .table thead th { vertical-align: bottom; border-bottom: 2px solid #eceeef; } .table tbody + tbody { border-top: 2px solid #eceeef; } .table .table { background-color: #fff; }

.table-bordered { border: 1px solid #eceeef; } .table-bordered th, .table-bordered td { border: 1px solid #eceeef; } .table-bordered thead th, .table-bordered thead td { border-bottom-width: 2px; }

.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.05); }

/* Legacy * NOT from Bootstrap. Avoid use those classes, * they will be migrated in the future. */ .lefted { float: left !important; } .centered { margin: auto !important; } .righted { float: right !important; }

.alignleft { text-align: left; } .aligncenter { text-align: center; } table.aligncenter td { text-align: center; } .alignright { text-align: right; }