MediaWiki:Common.css: Difference between revisions
MediaWiki interface page
More actions
Buildababe (talk | contribs) Created page with "→============================================================ SKY BLUE WIKI THEME — MediaWiki:Common.css Drop-in replacement for the Circus Wiki pink theme. Paste into Special:EditPage/MediaWiki:Common.css ============================================================: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap'); →--- Global ---: body, #content, #mw-content-text { background-color: #f0f8ff !importan..." |
Buildababe (talk | contribs) No edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.portrait-ring-wrap img { | |||
width: 100%; | |||
height: auto; | |||
} | |||
/* ============================================================ | |||
PORTABLE INFOBOX — Blue Circus Wiki Theme | |||
Paste into Special:EditPage/MediaWiki:Common.css | |||
============================================================ */ | |||
.portable-infobox .pi-secondary-background { | |||
background: linear-gradient(to bottom, #4fc3f7, #01579b); | |||
border: 4px solid #01407a; | |||
} | |||
.pi-border-color { | |||
border-color: #01407a; | |||
border-width: 4px; | |||
border-radius: 20px; | |||
} | |||
.portable-infobox .pi-image { | |||
background: repeating-linear-gradient(-45deg, rgba(1, 64, 122, 0.15) 6%, rgba(1, 64, 122, 0.15) 10%, transparent 10%, transparent 15%); | |||
background-color: rgba(79, 195, 247, 0.2); | |||
} | |||
.portable-infobox .pi-title { | |||
border-radius: 15px 15px 0 0; | |||
border-width: 0 0 3px 0; | |||
border-style: solid; | |||
border-color: #01407a; | |||
background: linear-gradient(to bottom, #29b6f6, #0277bd); | |||
color: white; | |||
font-size: 25px !important; | |||
font-family: Nunito, sans-serif !important; | |||
font-weight: 900 !important; | |||
text-shadow: 2px 0 0 #01407a, -2px 0 0 #01407a, 0 2px 0 #01407a, 0 -2px 0 #01407a, | |||
2px 2px 0 #01407a, -2px -2px 0 #01407a, -2px 2px 0 #01407a, 2px -2px 0 #01407a; | |||
} | |||
.portable-infobox .pi-header { | |||
border-width: 3px 0 3px 0 !important; | |||
border-style: solid !important; | |||
border-color: #01407a !important; | |||
background: linear-gradient(to bottom, #81d4fa, #0288d1); | |||
color: white; | |||
font-size: 16px !important; | |||
font-family: Nunito, sans-serif !important; | |||
font-weight: 700 !important; | |||
text-shadow: 1px 0 0 #01407a, -1px 0 0 #01407a, 0 1px 0 #01407a, 0 -1px 0 #01407a, | |||
1px 1px 0 #01407a, -1px -1px 0 #01407a, -1px 1px 0 #01407a, 1px -1px 0 #01407a; | |||
} | |||
.portable-infobox .pi-data-label { | |||
color: #01579b !important; | |||
font-family: Nunito, sans-serif !important; | |||
font-weight: 700 !important; | |||
} | |||
.portable-infobox .pi-data-value { | |||
color: #0d2b4a !important; | |||
font-family: Nunito, sans-serif !important; | |||
} | |||
.portable-infobox { | |||
background-color: #f0f8ff !important; | |||
} | |||
#mw-site-navigation .sidebar-chunk, | |||
#mw-related-navigation .sidebar-chunk { | |||
background-color: transparent; | |||
color: #0277bd; | |||
padding: 0.3em; | |||
border: none; | |||
font-family: Nunito, sans-serif; | |||
font-weight: 700; | |||
} | |||
/* ============================================================ | /* ============================================================ | ||
SKY BLUE WIKI THEME — MediaWiki:Common.css | SKY BLUE WIKI THEME — MediaWiki:Common.css | ||
| Line 299: | Line 381: | ||
#mw-content-text h2 { | #mw-content-text h2 { | ||
border-bottom: 2px solid #b3e5fc !important; | border-bottom: 2px solid #b3e5fc !important; | ||
} | |||
/* ── Portrait border rings ─────────────────────────────────────────── */ | |||
.portrait-ring { | |||
padding: 5px; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 50%; | |||
box-shadow: 0 4px 20px #f7339a33; | |||
} | |||
.portrait-ring.shape-square { border-radius: 16px; } | |||
.portrait-ring img { | |||
width: 148px; height: 148px; | |||
object-fit: cover; object-position: top center; | |||
border-radius: 50%; display: block; | |||
} | |||
.portrait-ring.shape-square img { border-radius: 11px; } | |||
.pb-pink { background: linear-gradient(135deg,#f7339a 0%,#fff 35%,#ff9dd1 55%,#fff 75%,#f7339a 100%); } | |||
.pb-red { background: linear-gradient(135deg,#5a0000 0%,#ff4444 22%,#cc0000 44%,#ff8888 66%,#8b0000 88%,#ff4444 100%); } | |||
.pb-orange { background: linear-gradient(135deg,#5a1e00 0%,#ff8c00 22%,#e05a00 44%,#ffb347 66%,#7a3000 88%,#ff8c00 100%); } | |||
.pb-gold { background: linear-gradient(135deg,#5a3e00 0%,#ffd700 18%,#fff0a0 36%,#c8960c 54%,#ffe566 72%,#8a6000 90%,#ffd700 100%); } | |||
.pb-yellow { background: linear-gradient(135deg,#666600 0%,#ffff44 25%,#eeee00 50%,#ffffaa 75%,#888800 100%); } | |||
.pb-green { background: linear-gradient(135deg,#002200 0%,#22cc44 22%,#00882a 44%,#77ee99 66%,#004410 88%,#22cc44 100%); } | |||
.pb-cyan { background: linear-gradient(135deg,#002233 0%,#00ccdd 22%,#007799 44%,#88eeff 66%,#003344 88%,#00ccdd 100%); } | |||
.pb-blue { background: linear-gradient(135deg,#000066 0%,#4488ff 22%,#1133cc 44%,#99bbff 66%,#000088 88%,#4488ff 100%); } | |||
.pb-purple { background: linear-gradient(135deg,#1a0033 0%,#9933ff 22%,#6600bb 44%,#cc99ff 66%,#2a0055 88%,#9933ff 100%); } | |||
.pb-pink-metal { background: linear-gradient(135deg,#550033 0%,#ff44aa 22%,#cc0066 44%,#ff99cc 66%,#7a0044 88%,#ff44aa 100%); } | |||
.pb-brown { background: linear-gradient(135deg,#1a0800 0%,#8b5e3c 22%,#5a2e10 44%,#c4956a 66%,#2a1000 88%,#8b5e3c 100%); } | |||
.pb-bronze { background: linear-gradient(135deg,#2a1200 0%,#cd7f32 18%,#8b4513 36%,#eaaa6a 54%,#cd7f32 72%,#3a1800 90%,#cd7f32 100%); } | |||
.pb-silver { background: linear-gradient(135deg,#444 0%,#ddd 18%,#999 36%,#fff 54%,#bbb 72%,#eee 88%,#555 100%); } | |||
.pb-gray { background: linear-gradient(135deg,#111 0%,#777 25%,#444 50%,#aaa 75%,#222 100%); } | |||
.pb-black { background: linear-gradient(135deg,#000 0%,#333 22%,#000 44%,#555 66%,#111 88%,#444 100%); } | |||
.pb-white { background: linear-gradient(135deg,#bbb 0%,#fff 25%,#ddd 50%,#fff 75%,#ccc 100%); } | |||
.pb-rainbow { background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000); | |||
animation: pb-rainbow-spin 2.5s linear infinite; } | |||
@keyframes pb-rainbow-spin { | |||
0% { filter: hue-rotate(0deg) brightness(1.1); } | |||
50% { filter: hue-rotate(180deg) brightness(1.2); } | |||
100% { filter: hue-rotate(360deg) brightness(1.1); } | |||
} | |||
@keyframes pb-rainbow-spin { | |||
0% { filter: hue-rotate(0deg) brightness(1.05); } | |||
100% { filter: hue-rotate(360deg) brightness(1.05); } | |||
} | |||
@keyframes pb-rainbow-spin { | |||
0% { filter: hue-rotate(0deg) brightness(1.05) saturate(1.2); } | |||
100% { filter: hue-rotate(360deg) brightness(1.05) saturate(1.2); } | |||
} | |||
.pb-rainbow-ring { | |||
background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000) !important; | |||
animation: pb-rainbow-spin 3s linear infinite !important; | |||
} | |||
@keyframes pb-rainbow-spin { | |||
0% { filter: hue-rotate(0deg) brightness(1.05) saturate(1.3); } | |||
100% { filter: hue-rotate(360deg) brightness(1.05) saturate(1.3); } | |||
} | |||
.pb-rainbow-ring { | |||
background: conic-gradient(#ff0000,#ff8800,#ffff00,#00cc44,#0088ff,#8800ff,#ff00cc,#ff0000) !important; | |||
animation: pb-rainbow-spin 3s linear infinite !important; | |||
} | |||
/* Force Portrait template image cropping */ | |||
.portrait-ring-wrap { | |||
overflow: hidden; | |||
border-radius: 50%; | |||
width: 148px; | |||
height: 148px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.portrait-ring-wrap.shape-square { | |||
border-radius: 11px; | |||
} | |||
.portrait-ring-wrap figure, | |||
.portrait-ring-wrap figure a, | |||
.portrait-ring-wrap figure img, | |||
.portrait-ring-wrap .mw-file-element, | |||
.portrait-ring-wrap a, | |||
.portrait-ring-wrap img { | |||
width: 148px !important; | |||
height: 148px !important; | |||
object-fit: cover !important; | |||
object-position: top center !important; | |||
border-radius: inherit !important; | |||
margin: 0 !important; | |||
padding: 0 !important; | |||
display: block !important; | |||
} | |||
.portrait-ring-wrap figure { | |||
border: none !important; | |||
background: none !important; | |||
} | |||
.portable-infobox .pi-data-value { | |||
text-align: center; | |||
} | } | ||