MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
(21 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.rot-box { | |||
background-color: #141414; | |||
border: 1px solid #A67C52; | |||
border-radius: 6px; | |||
padding: 10px 15px; | |||
margin: 10px; | |||
box-sizing: border-box; | |||
color: #ccc; | |||
} | |||
a:link { | |||
color: #7aa9ff !important; /* Light steel blue */ | |||
} | |||
a:visited { | |||
color: #c98bff !important; /* Light violet */ | |||
} | |||
a:hover { | |||
color: #FFD700 !important; | |||
text-shadow: 0 0 5px rgba(255, 215, 0, 0.2); | |||
} | |||
.rot-flex-wrap { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 20px; | |||
} | |||
.rot-left, .rot-right, .rot-bottom { | |||
width: 48%; | |||
min-width: 320px; | |||
} | |||
/* Make portable infobox match dark theme */ | |||
.portable-infobox { | |||
background-color: #1c1c1c; | |||
color: #e0e0e0; | |||
border: 1px solid #444; | |||
font-size: 90%; | |||
} | |||
.portable-infobox .pi-title { | |||
background-color: #2a2a2a; | |||
color: #f9d29d; | |||
font-size: 130%; | |||
font-weight: bold; | |||
} | |||
.portable-infobox .pi-image img { | |||
border: 1px solid #444; | |||
} | |||
.portable-infobox .pi-data-label { | |||
color: #c9a66b; | |||
font-weight: bold; | |||
width: 40%; | |||
} | |||
.portable-infobox .pi-data-value { | |||
color: #eee; | |||
} | |||
.portable-infobox .pi-header { | |||
background-color: #2e2e2e; | |||
color: #d4af37; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
font-size: 95%; | |||
} | |||
.portable-infobox .pi-navigation { | |||
display: none; /* Hide empty navigation footer if unused */ | |||
} | |||
#p-logo { | |||
position: static !important; | |||
height: auto !important; | |||
margin: 0px 0 5px 5px !important; | |||
padding: 0 !important; | |||
display: flex !important; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
#mw-panel { | #mw-panel { | ||
Line 10: | Line 92: | ||
flex-direction: column; | flex-direction: column; | ||
gap: 4px; | gap: 4px; | ||
} | |||
#mw-panel .mw-portlet .vector-menu-heading-label { | |||
display: inline-block; | |||
text-align: center; | |||
} | } | ||
#mw-panel .mw-portlet { | #mw-panel .mw-portlet { | ||
width: 100%; | width: 100%; | ||
overflow: hidden; | |||
position: relative; | |||
background: linear-gradient(to bottom, #111 0%, #222 100%); | background: linear-gradient(to bottom, #111 0%, #222 100%); | ||
border: 1px solid rgba(255, 215, 0, 0.3); | border: 1px solid rgba(255, 215, 0, 0.3); | ||
Line 22: | Line 111: | ||
#mw-panel .mw-portlet .vector-menu-heading { | #mw-panel .mw-portlet .vector-menu-heading { | ||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-family: 'Cinzel', serif; | |||
font-size: 12px; | |||
font-weight: bold; | |||
letter-spacing: 0.5px; | |||
text-transform: uppercase; | |||
color: #C0A080; | |||
background-color: rgba(15, 15, 15, 0.9); | |||
height: 30px; | |||
margin: -2px -2px 4px -2px; | |||
border-radius: 6px 6px 0 0; | |||
text-align: center; | |||
} | } | ||
#mw-panel .mw-portlet .body a { | #mw-panel .mw-portlet .body a { | ||
font-family: 'Cinzel', serif; | font-family: 'Cinzel', serif; | ||
font-size: | font-size: 14px; | ||
color: #bbb; | color: #bbb; | ||
text-decoration: none; | text-decoration: none; | ||
Line 97: | Line 187: | ||
/* Header & Title */ | /* Header & Title */ | ||
.toc .toctitle { | .toc .toctitle { | ||
border-bottom: 1px solid rgba(255, 215, 0, 0.3); | |||
margin-bottom: 6px; | |||
padding-bottom: 4px; | |||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
Line 107: | Line 200: | ||
} | } | ||
.toc .toctitle h2 { | .toc .toctitle h2 { | ||
padding: 0 | padding: 0 0px; | ||
font-weight: bold; | font-weight: bold; | ||
display: flex; | display: flex; | ||
Line 119: | Line 212: | ||
display: block; | display: block; | ||
width: 14px; | width: 14px; | ||
height: | height: 12px; | ||
--mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat; | --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat; | ||
-webkit-mask: var(--mask); | -webkit-mask: var(--mask); | ||
Line 128: | Line 221: | ||
mask-position: center center; | mask-position: center center; | ||
background-color: #FFD700; | background-color: #FFD700; | ||
margin: 0 | margin: 0 4px 0 0; | ||
margin-bottom: 2px; | |||
} | } | ||
Line 214: | Line 308: | ||
color: #ddd; /* Light text for readability */ | color: #ddd; /* Light text for readability */ | ||
font-family: 'Cormorant Garamond', serif; | font-family: 'Cormorant Garamond', serif; | ||
font-size: 18px | font-size: 18px; | ||
} | } | ||
Line 220: | Line 314: | ||
background-color: #111; | background-color: #111; | ||
color: #ddd; | color: #ddd; | ||
} | |||
#bodyContent, | |||
#mw-content-text, | |||
.mw-parser-output { | |||
font-size: 18px; | |||
font-weight: 500; | |||
line-height: 1.6; | |||
font-family: 'Cormorant Garamond', serif; | |||
} | } | ||
Line 240: | Line 343: | ||
color: #C0A080; /* Stylish headers */ | color: #C0A080; /* Stylish headers */ | ||
font-family: 'Cinzel', serif; | font-family: 'Cinzel', serif; | ||
} | |||
.mw-parser-output a:link { | |||
color: #7aa9ff; | |||
} | |||
.mw-parser-output a:visited { | |||
color: #c98bff; | |||
} | |||
.mw-parser-output a:hover { | |||
color: #FFD700; | |||
text-shadow: 0 0 3px rgba(255, 215, 0, 0.4); | |||
} | } | ||
Line 262: | Line 378: | ||
.vector-menu-content-list a { | .vector-menu-content-list a { | ||
position: relative; | position: relative; | ||
font-size: 15px; | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
Line 300: | Line 417: | ||
} | } | ||
@keyframes logoPopIn { | @keyframes logoPopIn { | ||
Line 326: | Line 435: | ||
.mw-wiki-logo { | .mw-wiki-logo { | ||
animation: logoPopIn 0.6s ease-out forwards; | animation: logoPopIn 0.6s ease-out forwards; | ||
width: | width: 230px !important; | ||
height: | height: 85px !important; | ||
background-image: url('https://static.wikioasis.org/realmofthroneswiki/ | background-image: url('https://static.wikioasis.org/realmofthroneswiki/9/9d/ADOD.gif'); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center; | background-position: center; |