MediaWiki:Hydradark.css

/* CSS placed here will affect users of the Hydradark skin */

/* copyright images tweak */ .skin-hydradark .copyright-icon { background-image: url("https://static.wikia.nocookie.net/commons_hydra/images/thumb/5/58/Copyright_darkwiki.png/32px-Copyright_darkwiki.png"); background-size: 100%; height: 32px; width: 32px; }

.feature { background: rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 5px; padding: 10px; }


 * root {

--blood-orange: 196, 80, 47; /*--blood-orange: #c4502f;*/ --orange-txt: #ff6c00; }

/* mw notify */ .mw-notification.mw-notification-type-error { color: black; background-color: #ffa4a4; }

/***************** body { background-image:url(https://static.wikia.nocookie.net/lastoasis_gamepedia_en/images/9/95/Bg_dark.jpg/revision/latest); /**/ background-size: cover; background-attachment: fixed; background-color: rgba(0, 0, 0, 0.8); }
 * Base framework *

background: transparent; height:3em; }
 * 1) mw-page-base {

margin-right: 10px; }
 * 1) pageWrapper {

div#content, div#footer { border: 2px solid #140a00; background-color:rgba(41,41,41,0.95); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); color: #ffffff; border-radius: 2px; }

div#content { padding-top:3em; }

div#footer { margin-top: 4em; margin-bottom: 2em; }

footer { border-top:#f48020 1px solid; }

footer#footer .footer-box { flex:unset; }

footer#footer ul li { white-space:nowrap; }

background-image: url(https://static.wikia.nocookie.net/lastoasis_gamepedia_en/images/3/35/WikiLogo.png/revision/latest); /* */ background-size:contain; filter: invert(100%); }
 * 1) p-logo a {

div #content hr { color: lightgray; background-color:lightgray; }

fieldset { border-color: rgba(255, 140, 0, 0.5); }

fieldset legend { color: rgb(255, 140, 0); }

.oo-ui-panelLayout-framed { border:1px solid #000; }

/* Links */ a, div#content a.extiw, div#content a.extiw:visited, div#content a.external, div#content a.external:visited, .pseudo-link { color: #50a8ff; }

a:active, a:visited { color: #2F7FEF; }

div#content a.new, div#content a.new:visited { color: red; text-decoration: underline dotted; }

div#content a.new:hover, div#content a.new:visited:hover { text-decoration: underline solid; }

div#content a.new:active { color: #d00000; } /********************* /*********** .fakeh2 { font-size: 1.5em; color: #e0e0e0; border-bottom: 1px solid #505050; line-height: 1.3; margin-bottom: 0.25em; margin-top: 1em; padding: 0; }
 * End base framework *
 * Headings *

border-bottom-color: rgb(var(--blood-orange)); } /*************** /************** /* Moved to Hydradark gadget */ /****************** /****************** div#mw-panel .portal, div#mw-panel.collapsible-nav div.portal#p-socialProfiles { background: rgb(var(--blood-orange)); border-radius: 6px; border: #292929 solid 2px; box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, .5); margin: 0 0.2em 0.4em 0.3em; transition: filter 0.1s; } div#mw-panel .portal:not(.collapsed):hover, div#mw-panel.collapsible-nav div.portal#p-socialProfiles:hover { filter: brightness(115%); } div#mw-panel #p-logo + .portal .body, div#mw-panel .portal .body { margin: 0 0.5em; }
 * 1) firstHeading {
 * End headings *
 * Vector tabs *
 * End Vector Tabs *
 * MediaWiki Panel *

/* Discord widget */ div#mw-panel div.portal li#n-Discord a[href="https://discord.gg/lastoasis"] { display: block; position: relative; height: 20px; width: 119px; margin: 0 auto; padding: 0; left: -0.5em; } div#mw-panel div.portal li#n-Discord a[href="https://discord.gg/lastoasis"]:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; background: url("https://discordapp.com/api/guilds/440538424991154177/widget.png") no-repeat; }

/* Portal headings */ .skin-hydradark div#mw-panel.collapsible-nav div.portal:not(#p-socialProfiles) h3:before { content: ""; position: absolute; top: calc(50% - 0.5em); left: -0.2em; width: 1.5em; height: 1em; background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%20%3Cpath%20d%3D%22m0.80904%2C5.98755l5.19096%2C-5.17353l5.19096%2C5.17353l-2.59548%2C0l0%2C5.19842l-5.19096%2C0l0%2C-5.19842l-2.59548%2C0z%22%20fill%3D%22white%22%20fill-opacity%3D%220.7%22%20transform%3D%22rotate%28180%206%2C5.999995231628418%29%22%2F%3E%20%3C%2Fsvg%3E) center center no-repeat; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; } .skin-hydradark div#mw-panel.collapsible-nav div.portal.collapsed:not(#p-socialProfiles) h3:before { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.skin-hydradark div#mw-panel.collapsible-nav div.portal:not(.collapsed):not(#p-socialProfiles) h3:after { content: ""; position: absolute; width: 98%; bottom: 0; left: 1%; border-bottom: 2px solid #bbb; }

.skin-hydradark div.portal:not(#p-socialProfiles) h3, .skin-hydradark div.portal.collapsed:not(#p-socialProfiles) h3 { margin: 0 3px; position: relative; overflow: hidden; background: none; padding: 3px 3px 3px 1.15em; /*  text-decoration: none; */ border-radius: 6px; }

.skin-hydradark #mw-panel:not(.collapsible-nav) div.portal:not(#p-socialProfiles) h3{ border-bottom: 2px solid #bbb; }

.skin-hydradark div#mw-panel.collapsible-nav div.portal:not(#p-socialProfiles) h3:hover { box-shadow: 0 0 5px 1.5em rgba(0,0,0,0.5) inset; text-decoration: none; }

.skin-hydradark div#mw-panel div.portal h3 a, .skin-hydradark div#mw-panel div.portal h3, color:#f3f8fc; text-shadow:1px 1px 1px rgba(0,0,0,0.5); font-family: "Exo2-Medium"; font-size: 15px; }
 * 1) mw-panel.collapsible-nav .portal.collapsed h3,
 * 2) mw-panel.collapsible-nav .portal h3 a,
 * 3) mw-panel.collapsible-nav .portal.collapsed h3 a {

.skin-hydradark div#mw-panel div.portal div.body { background-image:none; }

.skin-hydradark #mw-panel.collapsible-nav .portal h3, .skin-hydradark #mw-panel.collapsible-nav .portal.collapsed h3{ background:none; }

/* Links: Color, padding, and box shadow */ div#mw-panel div.portal[role=navigation] div.body { margin-left: 0.9em; }

div#mw-panel div.portal[role=navigation] div.body ul { padding-top: 0; }

div#mw-panel div.portal[role=navigation] div.body ul li a { color:#f3f8fc; text-shadow:1px 1px 1px rgba(0,0,0,0.5); font-family: "Exo2-Medium"; font-size: 14px; text-decoration: none; border-radius: 6px; padding: 1px 3px 2px; }

div#mw-panel div.portal[role=navigation] div.body ul li a:not([href="https://discord.gg/RwnGE3V"]):hover { box-shadow: 0 0 5px 1em rgba(0,0,0,0.6) inset; }

/* RSS feed in Tools panel */ div#mw-panel div.portal[role=navigation] div.body ul li#feedlinks a.feedlink { background-position: 4px center; padding-left: 19px; } /********************** /************** font-family: "Exo2-Medium"; font-size: 14px; } background: rgb(255, 140, 0); }
 * End MediaWiki Panel *
 * Preferences *
 * 1) preferences .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
 * 1) preferences .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
 * 1) preferences .oo-ui-optionWidget-selected {

color: #333; border-bottom-color: #aaa; }
 * 1) preferences .oo-ui-optionWidget-selected .oo-ui-labelElement-label {

background: rgba(255, 140, 0, 0.3); } /****************** /******************** .fpbox { background: rgba(0, 0, 0, 0.2); border: 2px solid rgba(var(--blood-orange), 0.3); border-radius: 2px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: box-shadow 0.15s; }
 * 1) preferences .oo-ui-tabOptionWidget:hover:not(.oo-ui-optionWidget-selected) {
 * End Preferences *
 * Front Page Styles *

.fpbox .heading, .fpbox .welcome, .fpbox .linkslabel { font-family: "Permanent Marker", cursive; font-size: 28px; /*  border-bottom: 1px solid */ }

.fpbox .heading { border-bottom: 1px rgba(var(--blood-orange), 0.9) solid; }

display: flex; flex-direction: column; align-content: center; justify-content: center; }
 * 1) welcomeBox {

margin: 5px 0 0 0; padding: 0 0 3px 0;
 * 1) welcomeBox .welcome {

}

.fpbox .body p { margin: 0.5em; }

.fpbox .fplinks { padding: 5px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; }

.fpbox .fplinks .fplink { border: none; background: none; }

.fplink a, .fplink a:visited, div#content .fplink a.external, div#content .fplink a.external:visited, div#content .fplink a.extiw, div#content .fplink a.extiw:visited { color: #f3f8fc; border-radius: 3px; text-decoration: none; font-family: "Exo2-Medium"; font-size: 16px; border: 2px rgba(var(--blood-orange), 0.9) solid; background: rgba(0, 0, 0, 0.2); box-shadow: none; transition: box-shadow 0.2s; padding: 4px 2px !important; line-height: 1.4; }

div#content .fpbox .fplink .fplink-inner a:hover { box-shadow: 0 0 5px 5em rgba(255,255,255,0.05) inset; }

div#content .fpbox .linkslabel { font-size: 22px; } /************************ /********* /* Moved to Hydradark gadget */ /************* /*************************** .key { display:inline-block; white-space:nowrap; }
 * End Front Page Styles *
 * Tables *
 * End Tables *
 * Used by Template:Key *

.key kbd { padding: 0.1em 0.6em 0.1em 0.6em; margin-right:2px; font-size:85%; font-family:inherit; font-style:normal; border-radius: .2em; }

/* Dark Variation */ .keysDark { color:black; border: 1px solid rgb(170, 170, 170); box-shadow: 0.1em 0.2em 0.2em rgb(221, 221, 221); background-image: linear-gradient(to bottom, rgb(238, 238, 238), rgb(249, 249, 249), rgb(238, 238, 238)); background-color: rgb(249, 249, 249); }

/* Light Variation */ .keysLight { color:white; border: 1px solid rgb(0, 0, 0); box-shadow: 0.1em 0.2em 0.2em rgb(0, 0, 0); background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(15, 15, 15), rgb(30, 30, 30)); background-color: rgb(30, 30, 30); }

/************************** /***************** .infobox { float: right; width: 23em; max-width:100%; margin-left: 1em; margin-right: 1em; margin-bottom: 0.5em; padding: 4px; border:1px solid rgba(255,140,0,0.3); background-color:rgba(0,0,0,0.5); }
 * End Template:Key styles *
 * Infobox styles *

.infobox-table { width: 100%; padding: 0; background-color:transparent; border: 0; }

.infobox-header, .infobox-section { background-color: rgba(255,140,0,0.8); color: #000206; border:1px solid #000; letter-spacing: 0.05em; font-weight:bold; text-align:center; }

.infobox-header { font-size: 150%; padding:0.4em; }

.infobox-section { padding:0.05em 0.5em; }

.infobox-centered { text-align: center; }

.infobox-centered img { max-width:100%; height:auto; }

.infobox-row { vertical-align: top; }

.infobox-row-name { min-width:50%; text-align: right; vertical-align:middle; padding:0.1em 0.7em; color:#f3f8fc; font-size:89%; }

.infobox-spacer { height: 0.5em; } /********************* /******************************************** .mw-body, margin-left:11em; }
 * End infobox styles *
 * Improved responsiveness for narrow widths *
 * 1) footer {

.level img { /* wikipoints level on profile */ max-width:100%; }

@media screen and (max-width:720px) { div#content { border-left:none; border-right:none; } div#footer { border:none; margin-top:1em; } #pageWrapper { margin-right:0; background-position:unset; }

div#left-navigation { margin-left:5px; } div#right-navigation { margin-right:5px; }

div#right-navigation div#p-search { margin-right:0; } div#mw-head div.vectorMenu { margin-top:0.2em; } div#mw-head div.vectorMenu div.menu { left:unset; }

div#mw-navigation div#mw-panel .portal { width:auto; text-align:center; } div#mw-navigation div#mw-panel { width:100%; margin: 0; padding:0; top:0; }

.curseprofile .leftcolumn, .curseprofile .rightcolumn { width:unset; } .section.friends ul.friends { -moz-columns: 2; -webkit-columns: 2; columns: 2; }

.headline ul { clear:left } .infobox { float:none; margin:auto; } } /****************************** /***************** .skin-hydradark .rcfilters-head { margin-bottom: 3px; margin-top: -1.6em; }
 * end improved responsiveness *
 * Recent Changes *

.skin-hydradark .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle, .skin-hydradark .mw-rcfilters-ui-cell.mw-rcfilters-ui-filterTagMultiselectWidget-views-select { background: rgba(0, 0, 0, 0.3); }

.skin-hydradark .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled { background-color: var(--orange-txt); border-color: rgb(var(--blood-orange)); }

.skin-hydradark .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label { text-shadow: 0.5px 0.5px black; }

.oo-ui-iconElement-icon:not(.oo-ui-icon-close) { filter: invert(1) brightness(0.4) sepia(1) hue-rotate(-30deg) saturate(10); }

.oo-ui-iconElement-icon.oo-ui-icon-close { filter: invert(1) brightness(0.2) sepia(1) hue-rotate(310deg) saturate(10); }

/* Live updates fix */ .oo-ui-iconElement-icon.oo-ui-icon-play { filter: invert(1) brightness(0.5) sepia(1) hue-rotate(80deg) saturate(10); }

.oo-ui-iconElement-icon.oo-ui-icon-stop { filter: brightness(0.5) sepia(1) hue-rotate(310deg) saturate(20); }

/* Fix for blue expanding circle */ .mw-rcfilters-ui-liveUpdateButtonWidget.oo-ui-toggleWidget-on::after { top: 0.3em; left: 0.66em; }

/* Popup boxes */ .mw-rcfilters-ui-valuePickerWidget .oo-ui-buttonSelectWidget .oo-ui-buttonElement-framed > a.oo-ui-buttonElement-button { border-color: white; }

.mw-rcfilters-ui-valuePickerWidget .oo-ui-buttonSelectWidget .oo-ui-optionWidget-selected.oo-ui-buttonElement-active > a.oo-ui-buttonElement-button { background-color: var(--orange-txt); } /********************* /***************** .infobox-custom { background: none; border: none; }
 * End Recent Changes *
 * Custom Infobox *

.infobox-custom .infobox-table { border: 3px rgb(var(--blood-orange)) solid; border-radius: 15px; width: 100%; }

.infobox-custom .infobox-header { background: url('media/f/fd/NameBg.png') 0 0/100% 100% no-repeat; /* */ border: none; color: var(--orange-txt); text-shadow: 1px 1px 1px black; font-family: 'Permanent Marker', cursive; font-size: 2.4em; line-height: 1.1em; padding: 0.5em 0.2em 0.8em 0.2em; position: relative; }

.infobox-custom .infobox-desc { font-size: 12px; }

.infobox-custom .infobox-row-name, .infobox-custom .infobox-row-value { width: 50%; }

.infobox-custom .infobox-header div { color: white; position: absolute; top: 100%; font-size: 14px; text-shadow: 1px 1px 1px black; font-family: 'Exo2-Medium'; font-weight: normal; line-height: 1.3em; padding: 1px 3px; border-radius: 4px; background-color: rgba(var(--blood-orange), 0.9); -webkit-text-stroke-width: 0; z-index: 1; }

.infobox-custom .item-icon { width: 82px; height: 82px; border: none; top: 2px; left: 2px; border-radius: 0; background-image: url("https://static.wikia.nocookie.net/lastoasis_gamepedia_en/images/b/b2/Item_Bg.png/revision/latest"); }

.infobox-custom .stack-size { top: 0; text-shadow: #222 1px 1px; font-family: 'Permanent Marker', cursive; }

.infobox-custom .stack-size.not-icon { border: #000000aa solid 2px; background-color: rgb(var(--blood-orange)); }

.infobox-custom .stack-size:not(.not-icon) { top: 54px; left: unset; right: 229px; color: var(--orange-txt); padding-left: 0; background: none; border: none; }

.infobox-custom.no-image .main-image .image img { filter: invert(80%); }

.infobox-custom .infobox-desc + .infobox-spacer { height: 0.5em; } .infobox-custom .infobox-desc + .infobox-spacer > td { position: relative; }

.infobox-custom .infobox-desc + .infobox-spacer > td::after { content: ''; position: absolute; top: 25%; left: 2.5%; width: 95%; height: 1px; border-top: 1px var(--orange-txt) solid; }

.infobox-custom .infobox-section { background: url('media/3/3f/SectionBg.png') 0 0/100% 100% no-repeat; /* */ border: none; color: var(--orange-txt); height: 35px; font-size: 1.6em; text-shadow: 2px 2px 1px black; font-family: 'Permanent Marker', cursive; }

@supports (-webkit-text-stroke: 1px black) { @media screen and (-webkit-min-device-pixel-ratio: 0) { .infobox-custom .infobox-header { -webkit-text-stroke: 0.5px #000000c4; -webkit-text-fill-color: var(--header-txt); } }

@-moz-document url-prefix { .infobox-custom .infobox-header { -webkit-text-stroke: 1.3px #000000c4; -webkit-text-fill-color: var(--header-txt); } }

.infobox-custom .infobox-section { -webkit-text-stroke: thin #000000c4; -webkit-text-fill-color: var(--header-txt); } } /********************* /************* .pfCollapsedFieldset legend, .pfExpandedFieldset legend { filter: invert(100%); }
 * End Custom Infobox *
 * Page Forms *

.otherInputParams div:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }

.otherInputParams div:last-child { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }

.otherInputParams > div { background-color: #00000055 !important; }

.otherInputParams > div { padding: 6px; }

.otherInputParams > div > div > em { font-size: 12px; color: #ffffff88; margin-top: -1px; line-height: 1em; }

/* Walker form */ .walker-parts { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }

.formtable tr > * { vertical-align: top; padding-top: 5px; }

.formtable tr > th:last-of-type:not(:only-of-type) { padding-left: 10px; }

.select2-container .select2-default.select2-choice > span { color: #0006; font-style: italic; }

.select2-choice { min-width: 150px; }

.pf-select2-container { margin: 0; }

.multipleTemplateInstance { background-color: #0005; }

a.addAboveButton:hover { background-color: #ffffffaa; border-radius: 5px; }

a.removeButton:hover { background-color: darkred; border-radius: 5px; } /***************** /************** div.editSchemaSection { background: #000000dd; }
 * End Page Forms *
 * PageSchemas *

div.editSchemaSection .sectionHeader { color: #000d; } /******************
 * End PageSchemas *