MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ @import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Oxygen&family=Cabin&family=Clicker+Script&family=Kosugi+Maru&display=swap'); @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:Themes.css|MediaWiki:Mainpage.css|MediaWiki:Quote.css|u:dev:MediaWiki:UCPEditorMinimal/code.css");

body, body.skin-fandomdesktop { font-family: 'Cabin', sans-serif; }


 * lang(ja) {font-family: 'Kosugi Maru', sans-serif;}

/*****************scrollbar*********************/
 * -webkit-scrollbar {

width: 12px; height: 7px; }


 * -webkit-scrollbar-thumb {

background-color: rgba(114,188,212,0.5); }


 * -webkit-scrollbar-thumb:hover {

background-color: rgba(114,188,212,0.75); }


 * -webkit-scrollbar-thumb:active {

background-color: rgba(114,188,212,1); }


 * -webkit-scrollbar-track {

background-color: transparent; }

/* Hover Book - Credits to the BlackPink Wiki */ .book-hover, .book-hover-image { -moz-perspective: 1200px; -webkit-perspective: 1200px; -moz-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; -webkit-user-drag: none; user-drag: none; display: block; margin: 0 auto; perspective: 1200px; width: 225px; } .book-hover, .book-hover-image { width: 225px; } .book, .book-image { -moz-transform-origin: 125px 0; -moz-transform-style: preserve-3d; -moz-transition: 0.75s; -webkit-transform-origin: 125px 0; -webkit-transform-style: preserve-3d; -webkit-transition: 0.75s; box-shadow: 0 0 4px rgba(227, 109, 118, 0.25); transform-origin: 125px 0; transform-style: preserve-3d; transition: 0.75s; } .book:after, .book-image:after { bottom: 0; content: ""; left: 3px; position: absolute; top: 0; width: 7px; } .book:hover { -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); } .book-image:hover { -moz-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); -webkit-transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); transform: translateX(-10px) translateZ(5px) translateX(5px) rotateY(45deg); } .book-cover { position: relative; } .book-cover img { height: auto; max-width: 100%; vertical-align: bottom; } .book-spine-image { background-image: gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #02a9ff), color-stop(75%, #71cfff)); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(25%, #02a9ff), color-stop(75%, #71cfff)); background-image: -moz-linear-gradient(top, #02a9ff 25%, #71cfff 75%); background-image: -o-linear-gradient(top, #02a9ff 25%, #71cfff 75%); background-image: -ms-linear-gradient(top, #02a9ff 25%, #71cfff 75%); } .book-spine-image { -moz-transform-origin: 0; -moz-transform: rotateY(-90deg) translateX(-49px); -webkit-transform-origin: 0; -webkit-transform: rotateY(-90deg) translateX(-49px); background-size: auto 100%; bottom: 0; box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); color: #fff; margin-left: 5px; overflow: hidden; position: absolute; top: 0; transform-origin: 0; } .book-spine { transform: rotateY(-90deg) translateX(-30px); width: 30px; } .book-spine-image { transform: rotateY(-90deg) translateY(-1px) translateX(-26px); width: 20px; } .book-spine-image:before, .book-spine:before { content: ""; display: block; height: 100%; width: 100%; }

/* ==== Hover Edit button - Credits to the Hollow Knight Wiki ===== */ h1 > .mw-editsection, h2 > .mw-editsection, h3 > .mw-editsection, h4 > .mw-editsection, h5 > .mw-editsection, h6 > .mw-editsection { opacity: 0; transition: 0.5s; } h1:hover > .mw-editsection, h2:hover > .mw-editsection, h3:hover > .mw-editsection, h4:hover > .mw-editsection, h5:hover > .mw-editsection, h6:hover > .mw-editsection { opacity: 1; transition: 0.5s; }

/* Userpages */ box-shadow: 0 0 0 0.3125vw #00b4d0; border-radius: 16.09375vw; border: .3125vw solid transparent; }
 * 1) userProfileApp .user-identity-avatar__image {

/* Styles in "Tabs" template, credits to Virtual YouTuber Wiki */ .vyw--tabs-placement-control { float: right; min-width: 300px; border-collapse: collapse; } .vyw--tabs-placement-control.float-right-compact { margin-left: 15px; } .vyw--tabs-placement-control.across { width: 100%; float: none; clear: both; margin-left: 0; } .vyw--tab-container { display: flex; justify-content: flex-end; } .vyw--tab-line { flex-grow: 1; } .vyw--tab-line.short { max-width: 5px; } .vyw--tab-container > ul { margin: 10px 0; padding: 0; display: flex; justify-content: flex-end; } .vyw--tab-container > ul > li { list-style-type: none; display: inline-block; margin: 0; padding: 2.5px 1.25rem; } .vyw--tab-selected { border: 1px solid #02a9ff; border-bottom: none; } .vyw--tab-default, .vyw--tab-line { border-bottom: 1px solid #02a9ff; } .vyw--tab-selected, .vyw--tab-default, .vyw--tab-line { margin: 10px 0; padding: 0; }

.visually-hidden { position: absolute !important; overflow: hidden; height: 1px; width: 1px; clip: rect(1px, 1px, 1px, 1px); opacity: 0; }

/* Animations - Credits to Horimiya Wiki */ .chara_portal:hover { animation: spin 1.5s 1; } @keyframes spin { 100% {       transform: rotate(360deg); } } /* Line running through gallery headers - Credits to Horimiya Wiki */ .gallery_header:before, .gallery_header:after { background: #00b4d0; display: inline-block; position: relative; vertical-align: middle; content: ""; width: 20%; height: 2px; } .gallery_header:before { right: 12px; } .gallery_header:after { left: 12px; }

/*Hover underline animation, credits to 30secondsofcode.org */ .hover-underline-animation { display: inline-block; position: relative; color: #00b4d0; }

.hover-underline-animation:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #00b4d0; transform-origin: bottom right; transition: transform 0.25s ease-out; }

.hover-underline-animation:hover:after { transform: scaleX(1); transform-origin: bottom left; }

/*link hover styling*/ a:hover { text-shadow: 0 0 5px; } .mw-parser-output a:active, .mw-parser-output a:hover { text-decoration: none; } /* Snow Frame */ .snow_frame { height: 6.771vw; width: 22.787vw; top: 0; left: 0; margin: auto; filter: drop-shadow(0 0 3px #00b4d0); background: url(https://static.wikia.nocookie.net/sorcerers-receptionist/images/b/be/Snowflake_frame.png) 0 0/contain no-repeat; }

/** text frames **/ .st-Frame { position: relative; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; overflow: hidden; padding: 15px; }

.st-Frame_Line { position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; right: 1px; bottom: 1px; left: 1px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: solid 1px #00b4d0; }

.st-Frame_Line_Inner { position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 6px; right: 6px; bottom: 6px; left: 6px; outline: solid 2px #00b4d0; width: calc(100% - 12px); height: calc(100% - 12px); }