contributors, Interface administrators, uploadaccess
875
edits
No edit summary |
No edit summary |
||
(115 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
/* Main container style */ | |||
.mp-container { | |||
margin: 10px auto; | |||
display: table; | |||
width: 100%; | |||
} | |||
/* Table row style */ | |||
.mp-table-row { | |||
display: table-row; | |||
} | |||
/* Table cell style */ | |||
.mp-table-cell { | |||
display: table-cell; | |||
border: 3px solid transparent; | |||
border-image: linear-gradient(to right, transparent 0%, #6a1b9a 25%, #6a1b9a 75%, transparent 100%); | |||
border-image-slice: 1; | |||
width: 48%; /* Adjust the width as needed */ | |||
box-sizing: border-box; | |||
margin: 0 auto; | |||
} | |||
/* Common style for section headings */ | |||
.mp-section-heading { | |||
border-radius: 12px; | |||
background: linear-gradient(45deg, #4b0082, #8b008b, #4b0082); | |||
color: white; | |||
border: 2px solid #632971; | |||
text-align: center; | |||
font-size: 24px; | |||
padding: 12px; | |||
line-height: 1.6; | |||
position: relative; | |||
letter-spacing: 1px; | |||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; | |||
} | |||
/* Style for links within .mp-section-heading */ | |||
.mp-section-heading a { | |||
color: white; /* Make the link white */ | |||
text-decoration: none; /* Remove underline if needed */ | |||
} | |||
.mp-section-spacing { | |||
margin-bottom: 10px; /* Adjust the margin as needed */ | |||
} | |||
/* Category filter style */ | |||
.category-filter { | |||
background-color: transparent; | |||
padding: 10px; | |||
border: 1px solid #ddd; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
text-align: center; | |||
width: 100%; /* Adjust the width as needed */ | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
.category-filter h2 { | |||
color: #4b0082; | |||
} | |||
.category-filter ul { | |||
list-style-type: none; | |||
padding: 0; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin: 5px !important; | |||
} | |||
.category-filter li { | |||
margin: 0 10px; /* Equal spacing on both sides */ | |||
} | |||
.category-link { | |||
display: inline-block; | |||
padding: 8px 12px; | |||
border-radius: 5px; | |||
color: #fff; | |||
text-align: center; | |||
cursor: pointer; | |||
transition: background-color 0.3s; | |||
} | |||
.category-link-characters, | |||
.category-link-events, | |||
.category-link-village, | |||
.category-link-drakenberg, | |||
.category-link-miscellanea { | |||
background-color: #4b0082; | |||
flex: 1; /* Equal width for all buttons */ | |||
} | |||
.category-link:hover { | |||
background-color: #632971; | |||
} | |||
Line 6: | Line 109: | ||
} | } | ||
.mw-body | .mw-body { | ||
box-shadow: 0 0.25em 0.6em -0.15em rgba(0,0,0,0.15); | |||
} | } | ||
Line 13: | Line 116: | ||
background-image: url(https://i.imgur.com/LdSoUN9.png) !important; | background-image: url(https://i.imgur.com/LdSoUN9.png) !important; | ||
background-color: #FFFFFF00 !important; | background-color: #FFFFFF00 !important; | ||
} | |||
#mw-head-base { | |||
margin-top: -4.9em | |||
} | |||
#p-personal { | |||
top: 2px; | |||
} | } | ||
#p-personal ul { | #p-personal ul { | ||
padding-left: 0em; | padding-left: 0em; | ||
padding-right: | padding-right: 0.5em; | ||
padding-top: 0. | padding-top: 0.2em; | ||
background-color: rgb(255 255 255 / 53%); | background-color: rgb(255 255 255 / 53%); | ||
border: 2px solid | border: 2px solid #574D3F; | ||
border-radius: 15px; | |||
} | |||
.vector-search-box-input { | |||
border-radius: 13px; | |||
} | } | ||
Line 33: | Line 149: | ||
.vector-menu-tabs a { | .vector-menu-tabs a { | ||
background-image: none; | background-image: none; | ||
} | |||
.vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { | |||
background-image: none; | |||
} | |||
.vector-menu-tabs-legacy .selected a, .vector-menu-tabs-legacy .selected a:visited { | |||
color: #E9DEC7; | |||
} | |||
.vector-menu-tabs-legacy .new a, .vector-menu-tabs-legacy .new a:visited { | |||
color: #E9DEC7; | |||
} | |||
.vector-menu-dropdown .vector-menu-heading { | |||
color: #E9DEC7; | |||
} | } | ||
.vector-menu-tabs-legacy li { | .vector-menu-tabs-legacy li { | ||
background-color: # | border-top-left-radius: 15px; | ||
border-top-right-radius: 15px; | |||
box-shadow:inset 0px 0px 0px 2px #574D3F; | |||
background-color: #4f3220; | |||
background-image: none; | background-image: none; | ||
line-height: 0.8em; | |||
} | |||
.vector-menu-tabs-legacy li a { | |||
color: #E9DEC7; | |||
height: 3em; | |||
} | |||
.vector-menu-tabs-legacy .selected { | |||
background-color: #2C1C12; | |||
} | |||
.vector-menu-tabs .mw-watchlink.icon a { | |||
padding: 3em 0 0 0; | |||
} | |||
.mw-body { | |||
padding: 0.25em 1.5em 1.5em 1.5em | |||
} | |||
.ve-init-mw-desktopArticleTarget { | |||
padding-top: 1em; | |||
} | |||
.vector-user-menu-legacy li { | |||
padding-top: 0em; | |||
} | |||
img { | |||
max-height: 100% !important; | |||
max-width: 100% !important; | |||
height: auto !important; | |||
} | |||
.container { | |||
display: flex; | |||
margin: 10px auto; | |||
max-width: 70%; | |||
} | |||
.infobox-wrapper { | |||
display: flex; | |||
flex: 2; | |||
flex-grow: 1; | |||
} | |||
/* Style the bio info */ | |||
.bio-info { | |||
flex: 1; | |||
text-align: center; | |||
padding: 20px; | |||
} | |||
/* Style the bio info text */ | |||
.bio-info p { | |||
font-size: 15px; | |||
} | |||
.blessings { | |||
flex: 1; | |||
text-align: center; | |||
padding: 20px; | |||
} | |||
.blessings-row { | |||
display: flex; | |||
flex-direction: row; | |||
} | |||
.shadow { | |||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | |||
} | |||
.smalltitle { | |||
font-size: 10px !important; | |||
font-weight: bold; | |||
color: #808080; | |||
} | |||
.charWithType { | |||
position: relative; | |||
display: inline; | |||
} | |||
.type { | |||
position: absolute; | |||
bottom: -0.25em; | |||
right: 0.25em; | |||
} | |||
.rarity { | |||
position: absolute; | |||
top: 0.25em; | |||
left: -0.25em; | |||
} | |||
.top-dot { | |||
border-top: 1px dotted #00000075; | |||
} | |||
.left-dot { | |||
border-left: 1px dotted #00000075; | |||
} | |||
.char-info { | |||
width: 135px; | |||
flex: 1; | |||
padding: 20px; | |||
background-color: #fbfbfb; | |||
box-shadow: 0 0.25em 0.6em -0.15em rgba(0,0,0,0.15); | |||
} | |||
.toc { | |||
padding: 15px; | |||
height: 100%; | |||
} | |||
.toc, .toccolours { | |||
background-color: #fbfbfb; | |||
box-shadow: 0em 0em 1em 0em rgba(0,0,0,0.15); | |||
border: none; | |||
} | |||
.toc-container { | |||
padding: 0px 20px 0px 0px; | |||
height: 100%; | |||
} | |||
.centered-colum { | |||
flex-direction: column; | |||
align-items: center; | |||
text-align: center; | |||
} | |||
.grid-container { | |||
display: flex; | |||
justify-content: space-between; | |||
gap: 10px; | |||
} | |||
.box { | |||
text-align: center; | |||
flex: 1; | |||
} | |||
.box-style { | |||
border: 2px solid #ddd; | |||
border-radius: 10px; | |||
padding: 20px; | |||
background-color: #f0f0f0b5; | |||
} | |||
.content { | |||
width: 100%; | |||
} | |||
.blur { | |||
transition: filter 0.15s ease-in-out; | |||
overflow: hidden; | |||
position: relative; | |||
} | |||
.blur img { | |||
filter: blur(20px); | |||
transition: filter 0.15s ease-in-out; | |||
} | |||
.blur:hover img { | |||
filter: none; | |||
transition: filter 0.15s ease-in-out; | |||
} | |||
.blur:hover figcaption { | |||
opacity: 0; | |||
display: none; | |||
} | |||
.blur > figcaption { | |||
opacity: 0.5; | |||
padding: 10px 15px 10px 15px !important; | |||
border-radius: 15px; | |||
background-color: black !important; | |||
color: white; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
} | |||
.blur > figcaption::before { | |||
margin-left: 0px !important; | |||
float: unset !important; | |||
} | |||
.blur > figcaption:empty { | |||
display: none; | |||
} | |||
.spoiler { | |||
background-color: #000; /* Change this to the desired background color */ | |||
color: #000; /* Change this to the desired text color */ | |||
cursor: pointer; | |||
padding: 5px; /* Adjust the padding as needed */ | |||
} | |||
.spoiler:hover { | |||
background-color: transparent; /* Reveals the content on hover */ | |||
color: inherit; | |||
} | } |