MediaWiki:Common.css

/* CSS placed here will be applied to all skins */


/*** GENERAL APPEARANCE ***/

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

:root {
  --font: montserrat;
  --color: #f0f8ff; 
  --color-bg: #0e2126;
  --color-bg-darker: #0c181b;
  --color-theme: #17373ff7;
  --color-link: #26746E;
  --img-bg-top:url(https://wiki.beastsofbermuda.com/images/thumb/c/c7/Loading_screen_1_LAND_AND_SKY_sky_edited%282%29.png/2400px-Loading_screen_1_LAND_AND_SKY_sky_edited%282%29.png);
  --img-bg-bottom:url(https://wiki.beastsofbermuda.com/images/thumb/4/4e/Loading_screen_2_WATER_DEEP_water_edited%281%29.png/2400px-Loading_screen_2_WATER_DEEP_water_edited%281%29.png);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  word-break: break-word;
  text-wrap: pretty;
  transition: all .16s ease;
}

html,
body {
  margin: 0;
  font: 16px/1.6 var(--font)!important;
  text-align: justify;
  box-sizing: border-box;
}

body:before, body:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: .75;
  z-index: -1;
}

body:before{background:var(--img-bg-top) bottom / cover no-repeat;}
body:after{background:var(--img-bg-bottom) top / cover no-repeat;}

img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

pre {
  font-family: var(--font);
  margin: 1em 0!important;
  background-color: #0e2126!important;
  color: var(--color)!important;
  border-color: #4a7e8b!important;
  border-style: dashed!important;
  padding: 2px!important;
}

code {
  font-family: Consolas,"courier new";
  color: var(--color)!important;
  border-color: var(--color-link)!important;
  border-style: dashed!important;
  border-width: 0.5px!important;
  padding: 2px!important;
  background-color: #0e2126!important;
}

a,
u,
li,
ul,
strike {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  color: var(--color);
}

a {
  font-weight: bold;
  color: var(--color-link)!important;
}
i,
em {
  letter-spacing: .5px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font)!important;
  font-weight: 600;
  color: var(--color)!important;
}

p {
  color: var(--color);
}

/*** CSS ***/

@media screen {
  h1, h2, h3, h4, h5, h6 {
  border-bottom: 3px solid;
  }
}

body, #mw-head{
  background: var(--color-bg)!important;
}

div#content.mw-body {
  margin: 5px 150px 0px 200px;
  padding: 18px;   
}

/*** TOP ***/

#mw-head {
  padding-inline: 20px 3%;
}

#mw-head li {
  background: var(--color-bg-darker)!important;
}

#p-personal li {
  padding: 5px 5px;
  border-radius: 10px;
}

#left-navigation div.vectorTabs li.selected, #right-navigation div.vectorTabs li.selected {
  background-image: linear-gradient(var(--color-theme) 0,var(--color-bg-darker) 80%) !important;
}

#left-navigation div.vectorTabs, #right-navigation div.vectorTabs {
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: transparent !important;
}

/*** MENU LEFT ***/

div#mw-panel div.portal div.body {
  margin: 0 !important;
}

#mw-panel {
  padding: 0 !important;
}

#mw-panel ul {
  gap: 5px;
  display: grid;
}

#mw-panel li {
  background: var(--color-bg-darker);
  border-radius: 20px;
  padding: 10px !important;
}

#mw-navigation div#mw-panel div.portal {
  border: none!important;
}

div#mw-panel div.portal h3 {
  color: #fff!important;
  border-bottom: 2px solid!important;
  margin-bottom: 16px!important;
}

@media screen {
  #mw-panel .portal .body {
    background: transparent;
  }
}

/*** MENU BOTTOM ***/

textarea#wpTextbox1.mw-editfont-sans-serif {
  font-family: var(--font);
  background-color: #0e2126;
  color: var(--color);
  border-style: none;
}

div.editOptions {
  font-family: var(--font);
  background-color: #142b31;
  color: var(--color);
  border-style: none;
}

input#wpSummary.oo-ui-inoutWidget-input {
  background-color: var(--color);
  color: #0C181B;
  border-style: none;
}

span.oo-ui-checkboxInputWidget-checkIcon.oo-ui-widget.oo-ui-widget-enabled.oo-ui-iconElement-icon.oo-ui-icon-check.oo-ui-iconElement.oo-ui-labelElement-invisible.oo-ui-iconWidget.oo-ui-image-invert {
  background-color: var(--color-link);
  border-style: none;
}

input#wpCaptchaWord.mw-ui-input {
  background-color: var(--color);
  color: #0C181B;
  border-style: none;
}

input#wpSave.oo-ui-inputWidget-input.oo-ui-buttonElement-button {
  background-color: #0f7070;
  color: var(--color);
  border-style: none;
}

input#wpPreview.oo-ui-inputWidget-input.oo-ui-buttonElement-button {
  background-color: var(--color);
  color: #0C181B;
  border-style: none;
}

input#wpDiff.oo-ui-inputWidget-input.oo-ui-buttonElement-button {
  background-color: var(--color);
  color: #0C181B;
  border-style: none;
}

div#catlinks.catlinks {
  background-color: #0E2126;
  color: var(--color);
  border-style: none;
}

li#footer-info-lastmod {
  color: var(--color);
  font-style: bold;
}

/*** PAGES ***/

div#toc.toc {
  margin: 0.5;
  width: 150px;
  color: var(--color);
  border-style: solid;
  border-color: var(--color-link);
  background-color: #0E2126;
}

div.thumb div.thumbinner{
  background-color: transparent;
  border-style: none;
}

li::marker {
  color: var(--color-link);
}

.tocnumber {
  display: none;
}

label.toctogglelabel {
  color: var(--color-link)
}

.mw-body {
  background: var(--color-theme)!important;
  margin-right: 2%;
  border-radius: 20px;
  border: none!important;
}

.navigation-tabbar {
  background-color: #0E2126;
  color: var(--color-link);
  margin: 0.5em 0 0 0;
  border: 1px solid #0C181B;
}

.tab {
  padding:0 10px;
  display: inline-block;
}

.tab-active {
  background-color: #A2D1D2!important;
  color: #FFF!important;
}