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-bg: #0e2126;
  --color-bg-darker: #0c181b;
  --color-theme: #17373ff7;
  --color-link: #4a7e8b;
  --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 {
  display: block;
  font-family: var(--font);
  white-space: pre;
  margin: 1em 0;
  background-color: #0e2126;
  color: #A2D1D2;
  border: #4a7e8b;
  border-style: dashed;
}

code {
  display: block;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre;
  margin: 1em 0;
  background-color: #0e2126;
  color: #A2D1D2;
  border: #4a7e8b;
  border-style: dashed;
}

a,
u,
strike {
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

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;
}

/*** CSS ***/

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

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

/*** TOP ***/

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

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

#p-personal li {
  padding: 5px 10px;
  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;
  }
}

/*** PAGES ***/

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

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

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

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