MediaWiki:Common.css: Difference between revisions
From 18TRIP Wiki
Content added Content deleted
Shiroutalpha (talk | contribs) No edit summary |
Hoshimeguri (talk | contribs) m (change infobox data label sizing to not cut off labels mid word) |
||
(44 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Infoboxes.css|MediaWiki:Links.css|MediaWiki:Discord.css"); |
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Infoboxes.css|MediaWiki:Links.css|MediaWiki:Discord.css"); |
||
/* CSS */ |
/* CSS */ |
||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400;1,500&display=swap'); |
|||
.ibm-plex-sans-light { |
|||
font-family: "IBM Plex Sans", sans-serif; |
|||
font-weight: 400; |
|||
font-style: normal; |
|||
} |
|||
.ibm-plex-sans-light-italic { |
|||
font-family: "IBM Plex Sans", sans-serif; |
|||
font-weight: 400; |
|||
font-style: italic; |
|||
} |
|||
.ibm-plex-sans-medium { |
|||
font-family: "IBM Plex Sans", sans-serif; |
|||
font-weight: 500; |
|||
font-style: normal; |
|||
} |
|||
.ibm-plex-sans-medium-italic { |
|||
font-family: "IBM Plex Sans", sans-serif; |
|||
font-weight: 500; |
|||
font-style: italic; |
|||
} |
|||
@font-face { |
|||
font-family: '18TRIPSans-Regular'; |
|||
src: url("https://static.miraheze.org/18tripwiki/8/82/18TRIPSans-Regular.woff2") format('woff2'); |
|||
} |
|||
@font-face { |
|||
font-family: '18TRIPSans-Medium'; |
|||
src: url("https://static.miraheze.org/18tripwiki/f/f6/18TRIPSans-Medium.woff2") format('woff2'); |
|||
} |
|||
@font-face { |
|||
font-family: '18TRIPSansFunny-Medium'; |
|||
src: url("https://static.miraheze.org/18tripwiki/6/66/18TRIPSansFunny-Medium.woff2") format('woff2'); |
|||
} |
|||
/*Center Tabber*/ |
/*Center Tabber*/ |
||
.mw-parser-output .wds-tabs__tab:first-child { |
.mw-parser-output .wds-tabs__tab:first-child { |
||
margin-left: auto; |
margin-left: auto; |
||
Line 12: | Line 54: | ||
} |
} |
||
/*Homepage*/ |
|||
.charabox { |
|||
.homepage-img { |
|||
-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); |
|||
border-radius: 20px 20px 0 0; |
|||
} |
|||
.homepage-img img { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
.homepage-header { |
|||
position: relative; |
|||
top: -300%; |
|||
} |
|||
.homepage-header .homepage-title { |
|||
position: absolute; |
|||
bottom: 10%; |
|||
font-size: 300%; |
|||
font-weight: bolder; |
|||
line-height: 1.1; |
|||
color: #323232; |
|||
text-shadow: 0 0 30px #C8FF46, 0 0 20px #C8FF46, 0 0 10px #323232; |
|||
padding: 0 4%; |
|||
} |
|||
.homepage-subhead { |
|||
font-size: 130%; |
|||
font-weight: bolder; |
|||
padding: 0 4%; |
|||
} |
|||
/*Character Nav*/ |
|||
.charanav { |
|||
margin: auto; |
margin: auto; |
||
display: inline-block; |
display: inline-block; |
||
Line 21: | Line 100: | ||
} |
} |
||
. |
.charanav .cn-img { |
||
position: relative; |
position: relative; |
||
display: inline-block; |
display: inline-block; |
||
} |
} |
||
. |
.charanav .cn-img:hover { |
||
transform: scale(1.1); |
transform: scale(1.1); |
||
transition: all |
transition: all 1s; |
||
} |
} |
||
. |
.cn-img .cn-img-top { |
||
display: none; |
display: none; |
||
position: absolute; |
position: absolute; |
||
Line 40: | Line 119: | ||
} |
} |
||
. |
.cn-img:hover .cn-img-top { |
||
display: inline; |
display: inline; |
||
} |
|||
/*Scrollbar*/ |
|||
::-webkit-scrollbar { |
|||
width: 8px; |
|||
height: 8px; |
|||
overflow-y: scroll; |
|||
} |
|||
::-webkit-scrollbar-thumb { |
|||
background: #323232; |
|||
border-radius: 20px; |
|||
} |
|||
::-webkit-scrollbar-track { |
|||
background: #ffffff; |
|||
border-radius: 12px; |
|||
} |
|||
/*Search*/ |
|||
.search-modal__content { |
|||
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(https://static.wikia.nocookie.net/18trip/images/6/68/Main_Visual.png); |
|||
background-position: center 10%; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
} |
|||
.theme-fandomdesktop-light .search-modal__content { |
|||
background-image: linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url(https://static.wikia.nocookie.net/18trip/images/6/68/Main_Visual.png); |
|||
} |
|||
/* Skin CSS Edits */ |
|||
@media screen { |
|||
#p-logo-text a { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.7em; |
|||
} |
|||
#personal h2 { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.1em; |
|||
} |
|||
.mw-body h1 { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.85em; |
|||
font-weight: 500; |
|||
} |
|||
.mw-body h2 { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.65em; |
|||
font-weight: 500; |
|||
} |
|||
.mw-body { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size:1em; |
|||
font-weight: 400; |
|||
} |
|||
.color-middle { |
|||
background: #c8ff46; |
|||
} |
|||
.color-left { |
|||
background:#37c3b8; |
|||
} |
|||
.color-right { |
|||
background: #ffea00; |
|||
} |
|||
#mw-header-hack { |
|||
box-shadow: 0 3px 3px .1px rgba(0,0,0,.15),0 0 2px .5px rgba(0,0,0,.5); |
|||
} |
|||
.mw-wiki-logo { |
|||
background-size: contain; |
|||
} |
|||
/* sidebar */ |
|||
#mw-site-navigation, #mw-related-navigation, #mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 { |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
.countdown { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.5em; |
|||
text-align: center; |
|||
} |
|||
/* Infobox styling */ |
|||
.portable-infobox .pi-title { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.5em; |
|||
font-weight: 500; |
|||
} |
|||
.skin-timeless #mw-content-text .pi-header { |
|||
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif; |
|||
font-size: 1.3em; |
|||
} |
|||
.skin-timeless #mw-content-text .portable-infobox { |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
} |
|||
.pi-data-label { |
|||
flex-basis: 110px; |
|||
} |
} |
Latest revision as of 03:04, 26 May 2024
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Infoboxes.css|MediaWiki:Links.css|MediaWiki:Discord.css");
/* CSS */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400;1,500&display=swap');
.ibm-plex-sans-light {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 400;
font-style: normal;
}
.ibm-plex-sans-light-italic {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 400;
font-style: italic;
}
.ibm-plex-sans-medium {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 500;
font-style: normal;
}
.ibm-plex-sans-medium-italic {
font-family: "IBM Plex Sans", sans-serif;
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: '18TRIPSans-Regular';
src: url("https://static.miraheze.org/18tripwiki/8/82/18TRIPSans-Regular.woff2") format('woff2');
}
@font-face {
font-family: '18TRIPSans-Medium';
src: url("https://static.miraheze.org/18tripwiki/f/f6/18TRIPSans-Medium.woff2") format('woff2');
}
@font-face {
font-family: '18TRIPSansFunny-Medium';
src: url("https://static.miraheze.org/18tripwiki/6/66/18TRIPSansFunny-Medium.woff2") format('woff2');
}
/*Center Tabber*/
.mw-parser-output .wds-tabs__tab:first-child {
margin-left: auto;
}
.mw-parser-output .wds-tabs__tab:last-child {
margin-right: auto;
}
/*Homepage*/
.homepage-img {
-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
border-radius: 20px 20px 0 0;
}
.homepage-img img {
width: 100%;
height: auto;
}
.homepage-header {
position: relative;
top: -300%;
}
.homepage-header .homepage-title {
position: absolute;
bottom: 10%;
font-size: 300%;
font-weight: bolder;
line-height: 1.1;
color: #323232;
text-shadow: 0 0 30px #C8FF46, 0 0 20px #C8FF46, 0 0 10px #323232;
padding: 0 4%;
}
.homepage-subhead {
font-size: 130%;
font-weight: bolder;
padding: 0 4%;
}
/*Character Nav*/
.charanav {
margin: auto;
display: inline-block;
width: auto;
height: auto;
text-align: center;
font-size:85%;
}
.charanav .cn-img {
position: relative;
display: inline-block;
}
.charanav .cn-img:hover {
transform: scale(1.1);
transition: all 1s;
}
.cn-img .cn-img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
opacity: 0.5;
}
.cn-img:hover .cn-img-top {
display: inline;
}
/*Scrollbar*/
::-webkit-scrollbar {
width: 8px;
height: 8px;
overflow-y: scroll;
}
::-webkit-scrollbar-thumb {
background: #323232;
border-radius: 20px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 12px;
}
/*Search*/
.search-modal__content {
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(https://static.wikia.nocookie.net/18trip/images/6/68/Main_Visual.png);
background-position: center 10%;
background-repeat: no-repeat;
background-size: cover;
}
.theme-fandomdesktop-light .search-modal__content {
background-image: linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0.6)),url(https://static.wikia.nocookie.net/18trip/images/6/68/Main_Visual.png);
}
/* Skin CSS Edits */
@media screen {
#p-logo-text a {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.7em;
}
#personal h2 {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.1em;
}
.mw-body h1 {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.85em;
font-weight: 500;
}
.mw-body h2 {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.65em;
font-weight: 500;
}
.mw-body {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size:1em;
font-weight: 400;
}
.color-middle {
background: #c8ff46;
}
.color-left {
background:#37c3b8;
}
.color-right {
background: #ffea00;
}
#mw-header-hack {
box-shadow: 0 3px 3px .1px rgba(0,0,0,.15),0 0 2px .5px rgba(0,0,0,.5);
}
.mw-wiki-logo {
background-size: contain;
}
/* sidebar */
#mw-site-navigation, #mw-related-navigation, #mw-site-navigation .sidebar-chunk h3, #mw-related-navigation .sidebar-chunk h3 {
font-weight: 500;
}
}
.countdown {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.5em;
text-align: center;
}
/* Infobox styling */
.portable-infobox .pi-title {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.5em;
font-weight: 500;
}
.skin-timeless #mw-content-text .pi-header {
font-family: "IBM Plex Sans","Helvetica Neue","Helvetica","Hiragino Sans","Hiragino Kaku Gothic ProN","Arial","Yu Gothic","Meiryo",sans-serif;
font-size: 1.3em;
}
.skin-timeless #mw-content-text .portable-infobox {
font-size: 1em;
font-weight: 500;
}
.pi-data-label {
flex-basis: 110px;
}