MediaWiki:Vector.css

/* All CSS here will be loaded for users of the Vector skin */
@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Michroma&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope&family=Ubuntu&display=swap');

:root {
  --white: #ffffff;
  --black: #000000;
  --grey: #bbbbbb;
  --purple: #6521C4; /* rgb(101, 33, 196) */
  --blue: #48C8F4; /* rgb(72, 200, 244) */

  --fs-grey: #3b3b3b;
  --fs-header: #bfea7c;
  --fs-direct: #ffd8ba;
  --fs-objectim: #8e5b3f;
  --fs-owner: #ffffc9;
  --fs-system: #e5e5e5;

  --txt-font: 'Hachi Maru Pop';
  --txt-font-second: 'sans-serif';
  --txt-font-body: 'Ubuntu';
  --txt-font-body-second: 'sans-serif';
  --mono-font: 'Overpass Mono';
  --normal: 1.1em;
  --small: 0.8em;
}


/*** GENERAL ***/
body {
  font-family: var(--txt-font-body), var(--txt-font-body-second);
}

a {
  -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
  color: var(--purple);
  text-decoration: none;
}

a:hover {
  color: var(--blue) !important;
  border-bottom-color: transparent;
  text-decoration: none;
}

.mw-page-container {
  background-color: var(--white);
  background-image: linear-gradient(to top, rgba(0, 206, 255, 0.5), rgba(0, 206, 255, 0.5)), url("https://crystalcraze.net/assets/img/bg.jpg");
  background-size: auto,
 cover;
  background-attachment: fixed,
 fixed;
  background-position: center,
 center;
  padding: 0;
}


/*** HEADER ***/
.mw-header {
  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  background-color: rgba(101, 33, 196, 0.95);
  /*width: 100%;
  height: 3.5em;
  min-height: 3.5em;*/
  padding: 5px 20px 5px  20px;
}

.vector-sticky-header {
  background-color: rgba(101, 33, 196, 0.95);
  border-bottom: 0;
}

.vector-sticky-header-context-bar-primary {
  font-family: var(--txt-font), var(--txt-font-second);
  text-transform: uppercase;
  color: var(--white) !important;
}

.mw-header .mw-ui-button, #pt-userpage-2, #p-lang-btn-sticky-header, .vector-sticky-header-icons a, #vector-user-links-dropdown-sticky-header {
  font-family: var(--txt-font), var(--txt-font-second);
  text-transform: uppercase;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  font-size: 0.8em;
  font-weight: 700;
  line-height: 3em;
  min-height: 3em;
  padding-left: 1em !important;
  padding-right: 1em !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
  letter-spacing: 0.1em;
  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  border-radius: 5px !important;
}

#ca-uls span, #pt-userpage-2 span, #p-lang-btn-sticky-header span {
  color: var(--white);
  text-decoration: none;
}

/*.mw-ui-button.mw-ui-quiet:not(.mw-ui-icon-element) {
  min-height: 46px;
}*/


/*** MENUS ***/
.vector-menu-dropdown .vector-menu-content, .vector-main-menu-container, #mw-panel-toc, .vector-pinned-container {
  background-color: var(--purple) !important;
  border-radius: 15px !important;
}

#vector-main-menu, #mw-panel-toc, .vector-toc {
  margin-left: 0 !important;
  background-color: transparent !important;
}

.vector-page-tools {
  padding: 20px;
  margin-right: 0 !important;
  background-color: transparent !important;
}

.vector-toc::after, .vector-page-tools::after {
  background: none !important;
}

.vector-main-menu-action-opt-out, .vector-main-menu-action-lang-alert {
  display: none !important;
}

.vector-menu-heading, .vector-pinnable-header-label, .vector-toc-contents  {
  font-family: var(--txt-font), var(--txt-font-second);
  text-transform: uppercase;
  color: var(--white) !important;
  /*padding: 0 1em;*/
}

.vector-menu-dropdown .mw-list-item:hover, .vector-pinned-container .mw-list-item:hover, .vector-toc-text:hover {
  background-color: var(--blue) !important;
  border-radius: 5px;
}

.vector-menu-dropdown .mw-list-item a:hover, .vector-pinned-container .mw-list-item a:hover, .vector-toc-list-item a:hover {
  color: var(--white) !important;
  text-decoration: none;
}

.mw-list-item a, .vector-toc-list-item a {
  color: var(--blue) !important;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  border-radius: 5px;
  border: 0;
  display: block;
  font-family: var(--txt-font), var(--txt-font-second);
  font-size: var(--normal);
  font-weight: 200;
  text-transform: uppercase;
  /*padding: 0.5em 1.0em;*/
  min-height: 32px;
}


/*** SIDEBAR ***/
/*#mw-panel-toc, #mw-panel, #vector-page-tools {
  padding: 0.5em 0 1em 0;
  border-radius: 0 15px 15px 0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);

  -moz-transition: opacity 0.35s ease, -moz-transform 0.35s ease;
  -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  -ms-transition: opacity 0.35s ease, -ms-transform 0.35s ease;
  transition: opacity 0.35s ease, transform 0.35s ease;
  -webkit-overflow-scrolling: touch;

  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  background-color: rgba(101, 33, 196, 0.95) !important;

  font-family: var(--txt-font), var(--txt-font-second);
  text-transform: uppercase;
}

.mw-sidebar-action {
  padding: 0 0.25em;
}

.mw-sidebar-action-content a {
  color: var(--white);
}*/


/*** BUTTONS ***/
/*.mw-ui-button, .uls-lcd-region-title {
  color: var(--white);
  text-decoration: none;
  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  font-family: var(--txt-font), var(--txt-font-second);
  text-transform: uppercase;
  font-weight: 300;
  line-height: 1.65;
}

.mw-ui-button {
  border-radius: 5px !important;
}

.mw-ui-button:before, .vector-user-menu-logout:before, .vector-user-menu-login:before {
  margin-left: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  text-transform: none !important;
}
}*/


/** Language Tools**/
.mw-pt-translate-header {
  border-bottom: 0;
}

.uls-lcd, .uls-lcd-region-title {
  background-color: var(--purple);
  color: var(--white) !important;
}

.uls-menu {
  border-radius: 15px;
  margin-top: 20px;
  max-width: 400px;
}

.uls-search {
  background-color: var(--blue);
  border-radius: 15px 15px 0 0;
}

#uls-settings-block {
  background-color: var(--blue) !important;
  border-radius: 0 0 15px 15px;
}

.uls-trigger{
  background: transparent;
}


/*** CONTENT ***/
.mw-content-container {
  background-color: var(--white);
  padding: 25px 50px 25px 50px;
  border-radius: 25px;
}

.vector-menu-tabs .vector-menu-content .vector-menu-content-list li a {
  color: var(--purple) !important;
}


/*** COLLAPSIBLES ***/
.mw-collapsible {
  width: 100%;
}
.mw-collapsible, .mw-collapsible tbody, .mw-collapsible tr {
  border: 0 none !important;
  outline: 0 none !important;
  border-collapse: collapse !important;
}

.mw-collapsible th {
  background-color: var(--purple) !important;
  color: var(--white);
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.mw-collapsible tbody tr:first-child th:last-child {
  border-radius: 0px 15px 0px 0px;
}

.mw-collapsible tbody tr:first-child th:first-child {
  border-radius: 15px 0px 0px 0px;
}

.mw-collapsible th a {
  color: var(--blue);
}

.mw-collapsible th:hover {
  background-color: #7062E0 !important;
}

.mw-collapsible th:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.mw-collapsible td {
  color: black;
  padding: 5px 18px;
  max-height: 0;
  overflow: hidden;
  background-color: var(--blue);
  transition: max-height 0.2s ease-out;
}

.mw-collapsible tr:last-child td:last-child {
  border-radius: 0px 0px 15px 0px;
}

.mw-collapsible tr:last-child td:first-child {
  border-radius: 0px 0px 0px 15px;
}


/** Chat Message **/
.chat {
  padding: 5px 18px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  margin-bottom: 15px;
  background-color: var(--fs-grey);
  border: 3px solid var(--blue);
  color: var(--fs-system);
}

.chat .speaker {
  color: var(--fs-header);
}

.chat .regionsay {
  color: var(--fs-direct);
}

.chat .ownersay {
  color: var(--fs-owner);
}

.chat .objectim {
  color: var(--fs-owner);
}

.chat a {
  color: var(--fs-header);
}

.chat a:visited {
  color: var(--fs-header);
}

/** Note **/
.note, .mw-pt-languages {
  padding: 5px 18px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  margin-bottom: 15px;
  background-color: var(--purple);
  border: 3px solid var(--blue);
  color: var(--blue);
}

.mw-pt-languages a, .note a {
  color: var(--white);
}

.mw-pt-languages a:visited, .note a:visited {
  color: var(--grey);
}

.note img {
  float: left;
  width: 100%;
  width: 128px;
  height: 128px;
  margin-right: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.125);
}

.note .h2, .mw-pt-languages-label {
  color: var(--white);
  background-color: transparent;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
  font-family: var(--txt-font), var(--txt-font-second), sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
  margin: 0 0 1em 0;
  margin-bottom: 0px;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.note hr {
  background-color: transparent;
  margin: 0.5em 0 !important;
  border: 0;
  border-bottom: solid 2px rgba(255, 255, 255, 0.125) !important;
}