User:Frogsbian/common.css

@import url("https://watatomo.github.io/enstars-wiki/fix.css"); /* bookmarks */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&display=swap');


 * root {

--theme-neg-color: #d92f2f; }

.theme-fandomdesktop-light { --theme-neg-color: #d92f2f; }

.theme-fandomdesktop-dark { --theme-neg-color: #ff6f6f; }

position: relative; }
 * 1) rail-bookmarks{

overflow: auto; display: flex; flex-wrap: wrap; }
 * 1) rail-bookmarks ul {

max-height: 18em; }
 * 1) rail-bookmarks.scrollable ul {

max-height: unset; }
 * 1) rail-bookmarks.bookmarks-expanded ul {

flex: 1 1 100%; font-size: 14px; }
 * 1) rail-bookmarks ul li{

font-size: 0.9em; text-align: right; }
 * 1) rail-bookmarks ul li:last-child{

position: absolute; font-size: 12px; color: var(--theme-link-color); border: solid 2px var(--theme-link-color); text-align: center; display: block; padding: 2px 10px; border-radius: 5px; transition: all 0.2s ease; top: 0px; right: 20px; }
 * 1) rail-bookmarks [href="#bookmark"]{

background: var(--theme-link-color); color: var(--theme-infobox-background-color); text-decoration: none; }
 * 1) rail-bookmarks [href="#bookmark"]:hover{

background: var(--theme-link-color); color: var(--theme-infobox-background-color); text-decoration: none; }
 * 1) rail-bookmarks [href="#bookmark"]:active{

--theme-link-color: var(--theme-neg-color); }
 * 1) rail-bookmarks .bookmarked[href="#bookmark"]{

font: 900 0.6em Montserrat, sans-serif; margin-left: 5px; display: inline-block; padding: 0px 2px; border-radius: 2px; background: var(--theme-neg-color); color: white; vertical-align: 2px; }
 * 1) rail-bookmarks [href="#removeBookmark"]{

color: #FFFD; text-decoration: none; }
 * 1) rail-bookmarks [href="#removeBookmark"]:hover{

color: #FFFB; text-decoration: none; }
 * 1) rail-bookmarks [href="#removeBookmark"]:active,
 * 2) rail-bookmarks [href="#removeBookmark"]:focus{

display: none; }
 * 1) rail-bookmarks > a{

display: block; text-align: center; padding: 10px 0px 5px; font-size: 0.8em; }
 * 1) rail-bookmarks.scrollable > a{

/* story cover */ .story-cover-wrapper { border-radius: 20px; background: linear-gradient(         rgba(0, 0, 0, 0.4),           rgba(0, 0, 0, 0.5)        ),var(--theme-color-character-color); padding-bottom: 20px; margin: 10px 0px; }

.story-background-cover { justify-content:center; align-items:flex-end; overflow:hidden; height:fit-content; width:100%; border-radius:20px 20px 0px 0px; } .story-background-cover img { object-fit:cover; object-position:center; width:100%; }

.story-infobox-wrapper{ margin: -300px auto 0px; display: flex; justify-content: center; }

.story-infobox-wrapper .portable-infobox[data-item-name="story-infobox"]{ width: 100%; max-width: 700px; float:none; margin-left: 0px; margin-bottom: 8px; display: flex; flex-wrap: wrap; }

.story-infobox-wrapper .portable-infobox > section{ flex: 1 1 300px; }

.story-infobox-wrapper [data-item-name="story-infobox-information"] > div { flex-wrap: wrap; }

.story-infobox-wrapper [data-item-name="story-infobox-information"] > div > *{ flex: 1 1 100%; }

.story-infobox-wrapper [data-item-name="story-infobox-gallery"] .wikia-gallery { display: flex; flex-wrap: wrap; justify-content: center; }

.story-infobox-wrapper [data-item-name="story-infobox-gallery"] .wikia-gallery-item { padding: 5px 0px 5px; }

.story-infobox-wrapper [data-item-name="story-infobox-gallery"] .wikia-gallery-item .lightbox-caption { margin: 5px 0px 0px;; }

.story-infobox-wrapper [data-item-name="story-infobox-chapters"] > div{ flex: 1 1 100%; }

.story-infobox-wrapper [data-item-name="story-infobox-chapters"] li { font: 700 16px Montserrat, 'Noto Sans JP', sans-serif; display: block; margin: 0px 0px 15px; border-radius: 5px; }

.story-infobox-wrapper [data-item-name="story-infobox-chapters"] li::before{ content: ''; display: none; }

.story-infobox-wrapper [data-item-name="story-infobox-chapters"] li a{   font: 500 14px Rubik, 'Noto Sans JP', sans-serif; display: block; padding: 10px 15px; margin: 5px 0px; background: linear-gradient(108deg, var(--theme-color-character-color-2) 50%, white 50%); border: solid 2px var(--theme-color-character-color); background-size: 250% 100%; background-position: right; border-radius: 5px; transition: transform 0.2s ease, background 0.5s cubic-bezier(.13,.95,.22,.99), color 0.2s ease; color: var(--theme-color-character-color); background-size: 250% 100%; }

.story-infobox-wrapper [data-item-name="story-infobox-chapters"] li a:hover{ transform: translateX(3px); text-decoration: none; background-position: left; color: white; }