MediaWiki:Common.css: Difference between revisions

From Morloch Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(97 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');


.mapmark {position: relative; width: 500px; height: 500px;}
/***************************/
/* Define Infobox Style  */
/***************************/


.wrap {
.infobox {
  white-space: pre-wrap;
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    color: black;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}
}
 
/*** LINK HOVERING ***/
/* Modernize MediaWiki */
/****************************/
 
/*UNVISITED LINKS */
:root {
    --primary-color: #3b82f6;
a,
    --text-color: #1e293b;
.color2 a {
    --bg-color: #f8fafc;
color: #388aaf;
    --border-color: #e2e8f0;
    --content-bg: #ffffff;
    --header-bg: #f1f5f9;
}
}
a: hover,
 
.color2 a:hover {
/* VISITED LINKS */
color: #2081ad;
text-decoration: none;
text-shadow: #2dbdff 0 0 8px;
}
a: visited,
.color2 a:visited {
color: #2081ad;
text-decoration: none;
}
a: visited: hover,
.color2 a:visited:hover {
/* NEW LINKS */
color: #388aaf;
text-decoration: none;
text-shadow: #2dbdff 0 0 8px;
}
a.new {
color: #871611 !important;
}
a.new: hover,
.color2 a.new:hover {
color: #388aaf!important;
text-decoration: none;
text-shadow: #2dbdff 0 0 8px !important;
}
/* Map Marker */
body {
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}
}


.pin {
#content, .mw-body {
  width: 30px;
    font-family: 'Inter', sans-serif !important;
  height: 30px;
    border-radius: 8px !important;
  border-radius: 50% 50% 50% 0;
    border: 1px solid var(--border-color) !important;
  background: #00cae9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  position: absolute;
    background-color: var(--content-bg) !important;
  transform: rotate(-45deg);
    margin-top: 1em !important;
  left: 50%;
    padding: 1.5em !important;
  top: 50%;
  margin: -20px 0 0 -20px;
}
}
.pin:after {
 
  content: "";
.portlet, .pBody {
  width: 14px;
    border-radius: 6px !important;
  height: 14px;
  margin: 8px 0 0 8px;
  background: #e6e6e6;
  position: absolute;
  border-radius: 50%;
}
}


.bounce {
.pBody {
  animation-name: bounce;
    background-color: var(--content-bg) !important;
  animation-fill-mode: both;
    border: 1px solid var(--border-color) !important;
  animation-duration: 1s;
}
}


.pulse {
.wikitable {
  background: #d6d4d4;
    border-collapse: collapse !important;
  border-radius: 50%;
    border-radius: 8px !important;
  height: 14px;
    overflow: hidden !important;
  width: 14px;
    border: 1px solid var(--border-color) !important;
  position: absolute;
    width: 100% !important;
  left: 50%;
    margin: 1em 0 !important;
  top: 50%;
  margin: 11px 0px 0px -12px;
  transform: rotateX(55deg);
  z-index: -2;
}
}
.pulse:after {
 
  content: "";
.wikitable th {
  border-radius: 50%;
    background-color: var(--primary-color) !important;
  height: 40px;
    color: #ffffff !important;
  width: 40px;
    padding: 12px 8px !important;
  position: absolute;
    text-align: left !important;
  margin: -13px 0 0 -13px;
  animation: pulsate 1s ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
  box-shadow: 0 0 1px 2px #00cae9;
  animation-delay: 1.1s;
}
}


@keyframes pulsate {
.wikitable td {
  0% {
     padding: 10px 8px !important;
     transform: scale(0.1, 0.1);
     border: 1px solid var(--border-color) !important;
     opacity: 0;
}
  }


  50% {
.wikitable tr:nth-child(even) {
    opacity: 1;
     background-color: #f1f5f9 !important;
  }
 
  100% {
    transform: scale(1.2, 1.2);
     opacity: 0;
  }
}
}


@keyframes bounce {
a {
  0% {
     color: var(--primary-color) !important;
    opacity: 0;
    transform: translateY(-2000px) rotate(-45deg);
  }
 
  60% {
    opacity: 1;
    transform: translateY(30px) rotate(-45deg);
  }
 
  80% {
     transform: translateY(-10px) rotate(-45deg);
  }
 
  100% {
    transform: translateY(0) rotate(-45deg);
  }
}
}

Latest revision as of 16:13, 1 March 2026

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/***************************/
/* Define Infobox Style  */
/***************************/

.infobox {
    border: 1px solid #aaaaaa;
    background-color: #f9f9f9;
    color: black;
    margin-bottom: 0.5em;
    margin-left: 1em;
    padding: 0.2em;
    float: right;
    clear: right;
}

/* Modernize MediaWiki */

:root {
    --primary-color: #3b82f6;
    --text-color: #1e293b;
    --bg-color: #f8fafc;
    --border-color: #e2e8f0;
    --content-bg: #ffffff;
    --header-bg: #f1f5f9;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif !important;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

#content, .mw-body {
    font-family: 'Inter', sans-serif !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    background-color: var(--content-bg) !important;
    margin-top: 1em !important;
    padding: 1.5em !important;
}

.portlet, .pBody {
    border-radius: 6px !important;
}

.pBody {
    background-color: var(--content-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.wikitable {
    border-collapse: collapse !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
    width: 100% !important;
    margin: 1em 0 !important;
}

.wikitable th {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    padding: 12px 8px !important;
    text-align: left !important;
}

.wikitable td {
    padding: 10px 8px !important;
    border: 1px solid var(--border-color) !important;
}

.wikitable tr:nth-child(even) {
    background-color: #f1f5f9 !important;
}

a {
    color: var(--primary-color) !important;
}