MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(58 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; | ||
} | } | ||
.container { | |||
display: flex; | |||
margin: 10px auto; | |||
max-width: 70%; | |||
} | |||
.infobox-wrapper { | .infobox-wrapper { | ||
display: flex; | display: flex; | ||
flex: 2; | |||
flex-grow: 1; | |||
} | } | ||
Line 163: | Line 266: | ||
bottom: -0.25em; | bottom: -0.25em; | ||
right: 0.25em; | right: 0.25em; | ||
} | } | ||
Line 171: | Line 272: | ||
top: 0.25em; | top: 0.25em; | ||
left: -0.25em; | left: -0.25em; | ||
} | } | ||
Line 184: | Line 283: | ||
.char-info { | .char-info { | ||
width: 135px; | |||
flex: 1; | flex: 1; | ||
padding: 20px; | padding: 20px; | ||
background-color: #fbfbfb; | background-color: #fbfbfb; | ||
box-shadow: 0 0.25em 0.6em -0.15em rgba(0,0,0,0.15); | 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; | |||
} | } |
Latest revision as of 21:14, 21 February 2024
/* 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; } .mw-wiki-logo { background-size: 135px auto; } .mw-body { box-shadow: 0 0.25em 0.6em -0.15em rgba(0,0,0,0.15); } #mw-page-base { background-image: url(https://i.imgur.com/LdSoUN9.png) !important; background-color: #FFFFFF00 !important; } #mw-head-base { margin-top: -4.9em } #p-personal { top: 2px; } #p-personal ul { padding-left: 0em; padding-right: 0.5em; padding-top: 0.2em; background-color: rgb(255 255 255 / 53%); border: 2px solid #574D3F; border-radius: 15px; } .vector-search-box-input { border-radius: 13px; } body: { background-color: #f2f2f2; } .mw-body { border: none; } .vector-menu-tabs a { 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 { border-top-left-radius: 15px; border-top-right-radius: 15px; box-shadow:inset 0px 0px 0px 2px #574D3F; background-color: #4f3220; 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; }