User:C.Ezra.M/common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* Import CSS stylesheets:
   - tooltip CSS            / [[User:C.Ezra.M/tooltip.css]]
   - staff highlighting CSS / [[User:C.Ezra.M/staff-highlight.css]]
   - protection padlocks    / [[User:C.Ezra.M/protectionPadlocks.css]]
Separated from this page for ease of importing to test. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url(https://bulbapedia.bulbagarden.net/w/index.php?title=User:C.Ezra.M/tooltip.css&action=raw&ctype=text/css);
@import url(https://bulbapedia.bulbagarden.net/w/index.php?title=User:C.Ezra.M/staff-highlight.css&action=raw&ctype=text/css);
@import url(https://bulbapedia.bulbagarden.net/w/index.php?title=User:C.Ezra.M/protectionPadlocks.css&action=raw&ctype=text/css);

/* Disable hiding user creation logs */
.mw-special-Recentchanges .mw-changeslist-log-newusers {
    display: revert;
}

/* Reset display */

div { display: block; }
span { display: inline; }
table { display: table; }
tr { display: table-row; }
td, th { display: table-cell; }

/* Custom wikitable design */

table.wikitable {
    border-collapse: separate;
    background-color: #E0F2B6;
    border-radius: 5px;
    padding: 3px;
    color: black;
    border-spacing: 1px;
}

table.wikitable > tr > th, table.wikitable > * > tr > th, table.wikitable > tr > td, table.wikitable > * > tr > td {
    border-radius: 3px;
    vertical-align: middle;
}

table.wikitable > tr > th, table.wikitable > * > tr > th {
    background: #C4E673;
    border: none;
}

table.wikitable > tr, table.wikitable > * > tr {
    background: #efefef;
}

table.wikitable > tr > td, table.wikitable > * > tr > td {
    border: none;
}

/* Warning box with warning sign */

.warningbox, .errorbox {
    border-radius: 5px;
    background-blend-mode: soft-light;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/8e/Hong_Kong_road_sign_240.svg);
    background-size: 175px;
    background-repeat: no-repeat;
    background-position: 5px 5px;
}

/* Fix handling of overflow-ms */
.overflow-ms { pointer-events: auto; }
.overflow-ms a.image { pointer-events: none; }

/* Remove some blank images. Currently left out of use. */
/* body:not(.ns-6) img[src$="/None.png"], body:not(.ns-6) img[src$="/None2.png"], body:not(.ns-6) img[src$="/Bag_None_Sprite.png"] { display: none; } */

/* Fix for the background of sitenotice and usermessage */
.noticebar, .usermessage {
    background: #efe url('https://archives.bulbagarden.net/media/upload/6/6f/Notice_bar_background.png') no-repeat left center;
}

/* Top bar user links */

#p-personal li a:hover {
    background-color: transparent;
    color: red;
}

/* Bot edit, new page and minor edit markings */
abbr.botedit { color: #11aa88; }
abbr.newpage { color: #11aa22; }
abbr.minoredit { color: #aaaacc; }

/* pre elements */

.content pre, pre, .mw-code {
    border: 1px dashed blue;
    border-left: none;
    border-right: none;
    overflow-x: auto;
}

/* TOC and catlinks style */
.toc, #catlinks { 
    border-radius: 1em; 
    border: 1px solid #A1CF31;
}

#catlinks li {
    border: none;
    padding: 0;
    display: inline;
}

#catlinks li:not(:last-child)::after {
    content: "|";
    color: #a2a9b1;
    padding: 0 4px;
}

/* Highlight RC entries on hover */
.mw-changeslist-ns-0:hover,
li.mw-changeslist-line:hover,
table.mw-changeslist-line tr:hover {
    background-color: #88ccff;
}

/* Why does this allow us to resize horizontally? */
textarea {
    resize: vertical;
}

/* Edittools styling */

.mw-editform #editpage-copywarn .mw-charinsert-item {
    color: white;
    background-color: #7ae;
    border-radius: 3px;
    padding: 1px 2px;
    margin: 1px 0;
}
/* Image styles */
div.thumbinner, div.thumbinner > img, div.thumbinner > * > img {
    border-radius: 5px;
}
img {
    -moz-force-broken-image-icon: 1; /* Other browsers have this already on */
}

/* Custom scrollbar. NOT FUNCTIONAL IN FIREFOX (see https://bugzil.la/1432935) */
@media (min-width: 768px) {
::-webkit-scrollbar {
    width: 12px;
    box-shadow: inset 2px 2px 10px #88AA88, inset -2px -2px 10px #88AA88;
}

::-webkit-scrollbar-button {
    background-color: #88AA88;
}

::-webkit-scrollbar-button:decrement {
    background-image: linear-gradient(-45deg, #88AA88 40%, #C4E673 40%, #C4E673 50%, #88AA88 50%), linear-gradient(45deg, #88AA88 40%, #C4E673 40%, #C4E673 50%, #88AA88 50%);
    background-size: 50% auto, 50% auto;
    background-repeat: no-repeat;
    background-position: 0px, 100%;
    border: 1px solid #88AA88;
}

::-webkit-scrollbar-button:increment {
    background-image: linear-gradient(-135deg, #88AA88 40%, #C4E673 40%, #C4E673 50%, #88AA88 50%), linear-gradient(135deg, #88AA88 40%, #C4E673 40%, #C4E673 50%, #88AA88 50%);
    background-size: 50% auto, 50% auto;
    background-repeat: no-repeat;
    background-position: 0px, 100%;
    border: 1px solid #88AA88;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border-width: 4px;
    border-color: #88AA88;
    border-style: groove ridge ridge groove;
    background-color: #88AA88;
    background-image: linear-gradient(to bottom, #88AA88 calc(50% - 5px), #C4E673 calc(50% - 5px), #C4E673 calc(50% - 4px),#88AA88 calc(50% - 4px), #88AA88 50%, #C4E673 50%, #C4E673 calc(50% + 1px),#88AA88 calc(50% + 1px), #88AA88 calc(50% + 4px), #C4E673 calc(50% + 4px), #C4E673 calc(50% + 5px),#88AA88 calc(50% + 5px));
}

::-webkit-scrollbar-thumb:horizontal {
    background-image: linear-gradient(to right, #88AA88 calc(50% - 5px), #C4E673 calc(50% - 5px), #C4E673 calc(50% - 4px),#88AA88 calc(50% - 4px), #88AA88 50%, #C4E673 50%, #C4E673 calc(50% + 1px),#88AA88 calc(50% + 1px), #88AA88 calc(50% + 4px), #C4E673 calc(50% + 4px), #C4E673 calc(50% + 5px),#88AA88 calc(50% + 5px));
}

::-webkit-scrollbar-thumb:vertical {
    background-image: linear-gradient(to bottom, #88AA88 calc(50% - 5px), #C4E673 calc(50% - 5px), #C4E673 calc(50% - 4px),#88AA88 calc(50% - 4px), #88AA88 50%, #C4E673 50%, #C4E673 calc(50% + 1px),#88AA88 calc(50% + 1px), #88AA88 calc(50% + 4px), #C4E673 calc(50% + 4px), #C4E673 calc(50% + 5px),#88AA88 calc(50% + 5px));
}

::-webkit-scrollbar-corner {
    background-color: #88AA88;
}

::-webkit-resizer {
    background-image: linear-gradient(-45deg,#88AA88 0,#C4E673 0,#C4E673 10%,#88AA88 10%,#88AA88 20%,#C4E673 20%,#C4E673 30%,#88AA88 30%,#88AA88 40%,#C4E673 40%,#C4E673 50%,#88AA88 50%);
    background-repeat: no-repeat;
}

::-webkit-scrollbar-track-piece {
    box-shadow: inset 2px 2px 10px #88AA88, inset -2px -2px 10px #88AA88;
}
}
html {
    /* Close Firefox polyfill. Only Firefox supports the W3C-compliant property, Chrome and other Blink/WebKit browsers implement it in a nonstandard way */
    scrollbar-color: #3e7614 #c5f6c5;
    /* The text inflation algorithm is unpredictable, so I am disabling it */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ADD TO MW:COMMON.CSS, PLEASE */
.ns--1 .editsection, .ns--1 .editsectionnew {
    display: none;
}

body, input, button {
    #font-family: 'bp_gender', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-family: 'bp_gender', Inter, Arial, sans-serif;
}
code, samp, pre, kbd, .mw-highlight, .mw-code, tt,
.content :is(code, samp, pre, kbd, .mw-highlight, .mw-code, tt),
.wikiEditor-ui .ace_editor,
.mw-editfont-monospace,
#mw-mf-diffview,
.mw-highlight,
.diff-editfont-monospace .diff-addedline,
.diff-editfont-monospace .diff-deletedline,
.diff-editfont-monospace .diff-context,
.CodeMirror {
    font-family: 'JetBrains Mono', Consolas, 'Courier New', Courier, monospace, monospace;
    #font-family: Consolas, 'Courier New', monospace;
}

.mw-body {
    line-height: 1.5 !important;
}
a > * {
    text-decoration: inherit; /* This makes the link have the same underline color when hovered as the span's color */
}

/*:not(.thumbinner), */::before, ::after {
    box-sizing: border-box;
}
a.mw-redirect {
     text-decoration: underline 2px dashed #ff0000;
     text-decoration-offset: 5px;
}

div.gallerytext {
    height: unset;
}