Please remember that WiKirby contains spoilers, which you read at your own risk! See our general disclaimer for details.
MediaWiki:Common.css: Difference between revisions
From WiKirby, your independent source of Kirby knowledge.
Jump to navigationJump to search
m (More descriptive name ("roundtable")) |
mNo edit summary |
||
Line 170: | Line 170: | ||
src: url("fonts/delfino-webfont.woff2") format("woff2"), | src: url("fonts/delfino-webfont.woff2") format("woff2"), | ||
url("fonts/delfino-webfont.woff") format("woff"); | url("fonts/delfino-webfont.woff") format("woff"); | ||
} | |||
/* Responsive flex (based on Bootstrap) */ | |||
.row { | |||
--bs-gutter-x: .25rem; | |||
--bs-gutter-y: 0; | |||
display: flex; | |||
flex-wrap: wrap; | |||
margin-top: calc(var(--bs-gutter-y) * -1); | |||
margin-right: calc(var(--bs-gutter-x) / -2); | |||
margin-left: calc(var(--bs-gutter-x) / -2); | |||
} | |||
.row > * { | |||
box-sizing: border-box; | |||
flex-shrink: 0; | |||
width: 100%; | |||
max-width: 100%; | |||
margin-top: var(--bs-gutter-y); | |||
} | |||
.col { | |||
flex: 1 0 0%; | |||
} | |||
/* -- Columns for any size (especially small) -- */ | |||
@media (min-width: 576px) { | |||
.col-sm { flex: 1 0 0%; } | |||
.col-sm-1 { flex: 0 0 auto; width: 8.3333333333%; } | |||
.col-sm-2 { flex: 0 0 auto; width: 16.6666666667%; } | |||
.col-sm-3 { flex: 0 0 auto; width: 25%; } | |||
.col-sm-4 { flex: 0 0 auto; width: 33.3333333333%; } | |||
.col-sm-5 { flex: 0 0 auto; width: 41.6666666667%; } | |||
.col-sm-6 { flex: 0 0 auto; width: 50%; } | |||
.col-sm-7 { flex: 0 0 auto; width: 58.3333333333%; } | |||
.col-sm-8 { flex: 0 0 auto; width: 66.6666666667%; } | |||
.col-sm-9 { flex: 0 0 auto; width: 75%; } | |||
.col-sm-10 { flex: 0 0 auto; width: 83.3333333333%; } | |||
.col-sm-11 { flex: 0 0 auto; width: 91.6666666667%; } | |||
.col-sm-12 { flex: 0 0 auto; width: 100%; } | |||
/* ---- Floats ---- */ | |||
.float-sm-left { float: left!important; } | |||
.float-sm-right { float: right!important; } | |||
.float-sm-none { float: none!important; } | |||
} | |||
/* -- Columns for medium sizes or larger -- */ | |||
@media (min-width: 768px) { | |||
.col-md { flex: 1 0 0%; } | |||
.col-md-auto { flex: 0 0 auto; width: auto; } | |||
.col-md-1 { flex: 0 0 auto; width: 8.3333333333%; } | |||
.col-md-2 { flex: 0 0 auto; width: 16.6666666667%; } | |||
.col-md-3 { flex: 0 0 auto; width: 25%; } | |||
.col-md-4 { flex: 0 0 auto; width: 33.3333333333%; } | |||
.col-md-5 { flex: 0 0 auto; width: 41.6666666667%; } | |||
.col-md-6 { flex: 0 0 auto; width: 50%; } | |||
.col-md-7 { flex: 0 0 auto; width: 58.3333333333%; } | |||
.col-md-8 { flex: 0 0 auto; width: 66.6666666667%; } | |||
.col-md-9 { flex: 0 0 auto; width: 75%; } | |||
.col-md-10 { flex: 0 0 auto; width: 83.3333333333%; } | |||
.col-md-11 { flex: 0 0 auto; width: 91.6666666667%; } | |||
.col-md-12 { flex: 0 0 auto; width: 100%; } | |||
/* ---- Floats ---- */ | |||
.float-md-left { float: left !important; } | |||
.float-md-right { float: right !important; } | |||
.float-md-none { float: none !important; } | |||
} | |||
/* -- Columns for larger sizer -- */ | |||
@media (min-width: 992px) { | |||
.col-lg { flex: 1 0 0%; } | |||
.col-lg-auto { flex: 0 0 auto; width: auto; } | |||
.col-lg-1 { flex: 0 0 auto; width: 8.3333333333%; } | |||
.col-lg-2 { flex: 0 0 auto; width: 16.6666666667%; } | |||
.col-lg-3 { flex: 0 0 auto; width: 25%; } | |||
.col-lg-4 { flex: 0 0 auto; width: 33.3333333333%; } | |||
.col-lg-5 { flex: 0 0 auto; width: 41.6666666667%; } | |||
.col-lg-6 { flex: 0 0 auto; width: 50%; } | |||
.col-lg-7 { flex: 0 0 auto; width: 58.3333333333%; } | |||
.col-lg-8 { flex: 0 0 auto; width: 66.6666666667%; } | |||
.col-lg-9 { flex: 0 0 auto; width: 75%; } | |||
.col-lg-10 { flex: 0 0 auto; width: 83.3333333333%; } | |||
.col-lg-11 { flex: 0 0 auto; width: 91.6666666667%; } | |||
.col-lg-12 { flex: 0 0 auto; width: 100%; } | |||
/* ---- Floats ---- */ | |||
.float-lg-left { float: left !important; } | |||
.float-lg-right { float: right !important; } | |||
.float-lg-none { float: none !important; } | |||
} | } |
Revision as of 12:59, 24 June 2021
/* CSS placed here will be applied to all skins */ .wkfelt { background-color:#4DFD4D; background-image:url(https://wikirby.com/w/images/3/39/KEY_Fabric_Lime_Felt.png); } .stars { background-color:#90EE90; background-image:url(/w/images/0/0e/BGStars.png); } .wkyellow { background-color:#FAF191; background-image:url(/w/images/9/9d/BackYellow.png); } .wkblue { background-color:#DFEAFE; background-image:url(/w/images/e/eb/BackBlue.png); } .wkred { background-color:#E47575; background-image:url(/w/images/4/42/BackRed.png); } .wkcork { background-color:#FAF191; background-image:url(/w/images/5/5a/BackCork.png); } .wksky { background-color:#DFEAFE; background-image:url(/w/images/b/ba/BackSky.png); } .wkpuzzle { background-color:#FF9F9F; background-image:url(https://wikirby.com/w/images/0/06/BackPuzzle.png); } .wkblock { background-color:#DFCFAF; background-image:url(https://wikirby.com/w/images/e/e4/KEY_Fabric_Colored_Blocks.png); } .wksnow { background-color:#8FDFFF; background-image:url(https://wikirby.com/w/images/0/0c/BackBluedot.png); } .wkquilt { background-color:#DFDFDF; background-image:url(https://wikirby.com/w/images/8/8e/KEY_Fabric_Aqua_Quilted.png); } /* Colored usernames for staff members. */ /* Patrollers */ .mw-userlink[title="User:AdieuLain"], .mw-userlink[title="User:Hexelectron"], .mw-userlink[title="User:Iliekchez"], .mw-userlink[title="User:JRJ007"], .mw-userlink[title="User:Pandakekok9"], .mw-userlink[title="User:Scrooge200"], .mw-userlink[title="User:Kirb"], #whopatrol a { color: #B500F1 !important; } /* Moderators */ .mw-userlink[title="User:MetaDragon"], .mw-userlink[title="User:Superbound"], .mw-userlink[title="User:Pinkyoshifan"], #whomod a { color: #ED7014 !important; } /* Administrators */ .mw-userlink[title="User:Obsessive Mario Fan"], .mw-userlink[title="User:Owencrazyboy17"], .mw-userlink[title="User:StrawberryChan"], #whoadmin a { color: #30C5A4 !important; } /* Bureaucrats */ .mw-userlink[title="User:Gigi"], .mw-userlink[title="User:Samwell"], .mw-userlink[title="User:Tacopill"], .mw-userlink[title="User:Vellidragon"], .mw-userlink[title="User:YoshiFlutterJump"], #whocrat a { color: #CA408A !important; } /* Pink wikitable styling */ table.wikitable { background: #fff; margin: 1em 0; border: 1pt solid #000; border-collapse: collapse; color: black } table.wikitable > * > tr > td, table.wikitable > * > tr > th { border: 1pt solid #A92C3C; padding: 0.2em 0.4em; } table.wikitable > * > tr > th { background: #F59C98; } table.wikitable > * > tr:nth-child(odd) > td { background: #FACCC7; } table.wikitable > * > tr:nth-child(even) > td { background:#FFD8D2; } table.roundtable tr:last-of-type td:first-of-type { border-radius: 0 0 0 10px; } table.roundtable tr:last-of-type td:last-of-type { border-radius: 0 0 10px 0; } /* text sizes */ .large { font-size: 16px; } .xlarge { font-size: 20px; } /* text alignment */ .top-right { position: absolute; top: -26px; right: 10px; } .top-right-text { position: absolute; top: -17px; right: 10px; } .help-shift { top: -20px; right: 60px; } /* border */ fieldset { border: 1px solid #a92c3c; } div.mw-warning-with-logexcerpt { border: 2px solid #A92C3C; } /* main page */ body.page-Kirby_Wiki.action-view h1.firstHeading, body.page-Kirby_Wiki.action-view #siteSub, body.page-Kirby_Wiki.action-view #catlinks, body.page-Kirby_Wiki.action-view #lastmod, body.page-Kirby_Wiki.action-view .mw-revision { display: none; } body.page-Kirby_Wiki.action-view #bodyContent { margin-top: 16px; } body.page-Kirby_Wiki.action-view .usermessage { margin-top: 43px; } body.page-Kirby_Wiki.action-view #bodyContent { margin-top: -20px; } body.page-Kirby_Wiki.action-view #siteNotice { margin-bottom: 28px; } #mw-indicator-mw-helplink { display: none; } @media (max-width: 1010px) { .onlydesktop { display:none; } } @media (min-width: 1011px) { .onlymobile { display:none; } } .editOptions { background-color: #ECF6FF; border: 1px solid #A7BEEA; border-top: none; } /* Delfino font */ @font-face { font-family: "Delfino"; src: url("fonts/delfino-webfont.woff2") format("woff2"), url("fonts/delfino-webfont.woff") format("woff"); } /* Responsive flex (based on Bootstrap) */ .row { --bs-gutter-x: .25rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(var(--bs-gutter-y) * -1); margin-right: calc(var(--bs-gutter-x) / -2); margin-left: calc(var(--bs-gutter-x) / -2); } .row > * { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; margin-top: var(--bs-gutter-y); } .col { flex: 1 0 0%; } /* -- Columns for any size (especially small) -- */ @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .col-sm-1 { flex: 0 0 auto; width: 8.3333333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.6666666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.3333333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.6666666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.3333333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.6666666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.3333333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.6666666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } /* ---- Floats ---- */ .float-sm-left { float: left!important; } .float-sm-right { float: right!important; } .float-sm-none { float: none!important; } } /* -- Columns for medium sizes or larger -- */ @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.3333333333%; } .col-md-2 { flex: 0 0 auto; width: 16.6666666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.3333333333%; } .col-md-5 { flex: 0 0 auto; width: 41.6666666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.3333333333%; } .col-md-8 { flex: 0 0 auto; width: 66.6666666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.3333333333%; } .col-md-11 { flex: 0 0 auto; width: 91.6666666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } /* ---- Floats ---- */ .float-md-left { float: left !important; } .float-md-right { float: right !important; } .float-md-none { float: none !important; } } /* -- Columns for larger sizer -- */ @media (min-width: 992px) { .col-lg { flex: 1 0 0%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.3333333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.6666666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.3333333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.6666666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.3333333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.6666666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.3333333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.6666666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } /* ---- Floats ---- */ .float-lg-left { float: left !important; } .float-lg-right { float: right !important; } .float-lg-none { float: none !important; } }