contributors, Interface administrators, uploadaccess
875
edits
No edit summary |
No edit summary |
||
(49 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 100: | Line 203: | ||
img { | img { | ||
max-height: 100% !important; | max-height: 100% !important; | ||
max-width: 100% !important; | |||
height: auto !important; | height: auto !important; | ||
} | } | ||
Line 105: | Line 209: | ||
.container { | .container { | ||
display: flex; | display: flex; | ||
margin: 10px auto; | |||
max-width: 70%; | |||
} | } | ||
.infobox-wrapper { | .infobox-wrapper { | ||
display: flex; | display: flex; | ||
flex: 2; | flex: 2; | ||
flex-grow: 1; | flex-grow: 1; | ||
} | } | ||
Line 185: | Line 283: | ||
.char-info { | .char-info { | ||
width: 135px; | |||
flex: 1; | flex: 1; | ||
padding: 20px; | padding: 20px; | ||
Line 203: | Line 302: | ||
.toc-container { | .toc-container { | ||
padding: 5px; | 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; | |||
} | } |