contributors, delete_pages, Interface administrators
4,719
edits
No edit summary  | 
				FaeriMagic (talk | contribs)  m (Undo revision 6556 by FaeriMagic (talk)) Tag: Undo  | 
				||
| (73 intermediate revisions by 3 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. */  | ||
/* 🍄 Wiki Font (For toolbars and menus) 🍄 */  | |||
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap');  | |||
body {  | |||
  font-family: 'Shippori Mincho B1', serif;  | |||
  font-weight: 600;  | |||
}   | |||
#content { /* Keeps the main content area as default font. */  | |||
  font-family: sans-serif;  | |||
  font-weight: normal;  | |||
}  | |||
/* 🍄 Template:StoryChapter 🍄*/  | |||
.story-bold, /* Force bold on specified container. */  | |||
.story-bold *, /* Ensure nested <span>s, bold tags, etc, are also properly styled. */  | |||
.story-bold p {  /* Handles the issue where MediaWiki wraps transcluded content in <p> and prevent it from receiving other styles. */  | |||
  font-family: 'Shippori Mincho B1', serif !important;  | |||
  font-weight: 700 !important;  | |||
}  | |||
/* 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 225: | ||
img {  | img {  | ||
     max-height: 100% !important;  |      max-height: 100% !important;  | ||
    max-width: 100% !important;  | |||
     height: auto !important;  |      height: auto !important;  | ||
}  | }  | ||
| Line 106: | Line 232: | ||
   display: flex;  |    display: flex;  | ||
   margin: 10px auto;  |    margin: 10px auto;  | ||
   width:   |    max-width: 70%;  | ||
}  | }  | ||
.infobox-wrapper {  | .infobox-wrapper {  | ||
   display: flex;  |    display: flex;  | ||
   flex: 2;  |    flex: 2;  | ||
   flex-grow: 1;  |    flex-grow: 1;  | ||
}  | }  | ||
| Line 185: | Line 305: | ||
.char-info {  | .char-info {  | ||
  width: 135px;  | |||
   flex: 1;  |    flex: 1;  | ||
   padding: 20px;  |    padding: 20px;  | ||
| Line 205: | Line 326: | ||
   padding: 0px 20px 0px 0px;  |    padding: 0px 20px 0px 0px;  | ||
   height: 100%;  |    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;  | |||
}  | |||
ol li {  | |||
    margin-left: -0.5em;  | |||
}  | }  | ||