MediaWiki:Monobook.css: Difference between revisions

From DM Live - the Depeche Mode live encyclopedia for the masses
Jump to navigationJump to search
(Created page with "→‎CSS placed here will affect users of the MonoBook skin: .columnizeme ul { display: block; } .columnizeme-3 ul { column-count: 3; -moz-column-count: 3; -...")
 
m (Protected "MediaWiki:Monobook.css" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(32 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* CSS placed here will affect users of the MonoBook skin */
/* CSS placed here will be applied to users of the Monobook skin */


/* SITE-WIDE CSS */
/* Position site logo */
#p-logo {
    margin: 0 0 0 .2em;
}
#siteSub { display:block; }
html, body, #mw-head {background: none; background-color: #f1f1f1;}
#mw-body { border: 1px solid #c0c0c0;}
.mw-body-content {line-height: 1.45;}
.mw-body {
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
    border-bottom: 1px solid #d7d7d9;
}
/* Style search buttons */
#searchGoButton, input.searchButton {background: #07080d; border: none; color: #ffffff; border: 2px solid #07080d; margin-top: 5px;}
#searchGoButton:hover, input.searchButton:hover {background: #9d68d9; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}
/* Set body text size to 13px */
#bodyContent {font-size: 1em; color: #000000;}
.toc {
    border-radius: 1em;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}
/* DPL */
.columnizeme ul {
.columnizeme ul {
     display: block;
     display: block;
Line 11: Line 49:
}
}


/* Header Buttons */
/* Tabs */
.vectorTabs {
#p-cactions ul li, #p-cactions ul li a {
     background-image: none;
     border-radius: 1em 1em 0 0;
    height: 1em;
     border-top: 1px solid #d7d7d9;
     z-index: 3;
     border-left: 1px solid #d7d7d9;
     text-transform: lowercase;
     border-right: 1px solid #d7d7d9;
     padding: 1.9em .8em .3em;
     background: #f0f0f2;
    position: relative;
     color: #6a7480 !important;
    margin: 0;
    text-decoration: none;
     font-size: 95%;
     color: #002bb8;
}
}


.vectorTabs li.selected {
#p-cactions li.selected {
     background-image: none;
     background-image: none;
    background: #ffffff;
     color: #002bb8 !important;
    border-radius: 1em 1em 0 0;
     border-color: #d7d7d9 !important;
    border-color: #c0c0c0;
     color: #002bb8;
     border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-radius: 1em 1em 0 0;
}
}


.vectorTabs li.selected a,
#p-cactions ul {    
.vectorTabs li.selected a:visited {
     font-size: 102%;
     color: #002bb8;
     text-decoration: none;
     padding: .4em .8em .3em;
}
}


.vectorTabs li a {
#p-cactions li {
    padding: .4em .8em .3em;
}
 
.vectorTabs ul li {
    background-image: none;
    background: #f0f0f2;
    border-radius: 1em 1em 0 0;
    border-color: #393939;
     height: 140%;
     height: 140%;
     line-height: .8em;
     line-height: .8em;
     border-right: 1px solid #c0c0c0;
     border-bottom: none;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-radius: 1em 1em 0 0;
}
}


.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
.portlet ul { line-height: 1em; font-size: 95%; margin: 0.6em 0 0 1.6em !important;}
    padding-top: 1.6em;
 
.portlet h3 {color: #6a7480;}
 
/* MAIN PAGE DESIGN CSS */
body.page-Main_Page #t-cite,
body.page-Main_Page #footer-info-lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}
}


div.vectorTabs span {
/* Style the edit buttons */
     background-image: none;
#wpSave {
    -moz-border-radius: 15px;
    background-color: #fff !important;
     background-image: none !important;
    border: 2px solid #fff !important;
    text-shadow: none !important;
    color: #000;
}
}


/* Adjust position of header tabs */
#wpSave:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}


/* #ca-talk { */
#wpPreview {
/*    margin: 0 0 0 .4em; */
    -moz-border-radius: 15px;
/*} */
    background-color: #07080d !important;
    background-image: none !important;
    border: 1px outset !important;
    text-shadow: none !important;
    border: 2px solid #000 !important;
    color: #ffffff;
}


/* #ca-edit { */
#wpPreview:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}
/*    margin: 0 0 0 -45.85em; */
/*      font-weight: bold; */
/*} */


/* #ca-history { */
#wpDiff {
/*    margin: 0 0 0 -42.7em; */
    -moz-border-radius: 15px;
/*} */
    background-color: #07080d !important;
 
    border: 1px outset !important;
/* #ca-watch, #ca-unwatch { */
    background-image: none !important;
/*    margin: 0 0 0 -36.58em; */
    text-shadow: none !important;
/*} */
    border: 2px solid #000 !important;
 
     color: #ffffff;
#ca-view {
     display: none;
}
}


#mw-head-base {
#wpDiff:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}
    margin-top: -4.3em;
}


/* Sidebar Navigation Menu */
/* SIDEBAR */
/* Force Navigation header to display */
    #mw-panel #p-logo + .portal h3 {
    display: block;
    margin: 0 0 0 1.3em;
}
 
#mw-panel .portal h3 {
    margin: 0 0 0 1.3em;
}


#mw-panel .portal .body {
#mw-panel .portal .body {
Line 119: Line 140:
}
}


#mw-panel .portal {
.pBody {
    margin: 0 1em 0 -1em;
     border-radius: 0 1em 1em 0;
}
     border-bottom: 1px solid #c0c0c0;
 
     border-right: 1px solid #c0c0c0;
#mw-panel .portal .body ul {
     border-top: 1px solid #c0c0c0;
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
    margin: 0;
    padding: 0.3em 0 0 1em;
    line-height: 1.3em;
}
 
.toc {
     border-radius: 1em;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}
 
.Round {
    -webkit-border-radius: 10px;
    background: #ffe;
    border: 2px solid #4E8234;
    margin: 0.10px;
    padding: 4px;
    vertical-align: top;
}
 
/* Set body text size to 13px */
#bodyContent {
  font-size: 0.813em;
  color: #000000;
}
 
.mw-body-content {
    line-height: 1.45;
}
 
.mw-body {
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
     border-bottom: 1px solid #d7d7d9;
}
 
table.wikitable {
     border-radius: 1em;
    border: 1px solid #d7d7d9;
    padding: 7px;
    font-size: 95%;
    background: #ffffff;
}
 
#firstHeading {
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 0.1em;
    line-height: 1.2em;
    padding-bottom: 0;
    font-size: 1.500em;
    font-weight: normal;
    border-bottom: 1px solid #a2a9b1;
    font-family: sans-serif;
}
 
.mw-body-content h1 {
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-bottom: 0.1em;
    line-height: 1.2em;
    padding-bottom: 0;
    font-size: 1.500em;
    font-weight: normal;
     border-bottom: 1px solid #a2a9b1;
    font-family: sans-serif;
}
 
h2 {
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    font-family: sans-serif;
    font-size: 1.5em;
}
 
.mw-body-content h2 {
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    padding-top: 0.5em;
    padding-bottom: 0.17em;
    font-family: sans-serif;
    font-size: 1.5em;
}
 
.mw-body-content h3 {
    line-height: 1.188em;
}
 
/* Miscellaneous formatting features */
 
.sc { font-variant: small-caps }
 
.l { text-align: left; }
.c { text-align: center; }
.r { text-align: right; }
 
div.listcol
{
  padding: 0.5em 1.0em 0.5em 0;
  margin: 0.25em;
  min-width: 21.5%;
  border: 1px solid #aaf;
  float: left;
  clear: right;
  line-height: 130%;
}
 
div.listcolend
{
  clear: both;
}
}


Line 334: Line 229:
}
}


.sitedir-ltr textarea, .sitedir-ltr input {
#footer {
    direction: ltr;
     background-color: #07080d;
}
     border-top: none !important;
 
     border-bottom: none !important;
ul {
     margin: 0.6em 0 1em 0;
    list-style-type: square;
     overflow: hidden;
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
     padding: 0.4em 0 0.3em 0;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}
 
#simpleSearch {
     border-radius: .3em .3em .3em .3em;
    border-color: #d7d7d9;
    height: 31px !important;
     border-radius: 8px !important;
    right: 5px !important;
    width: 181px !important;
    top: -10px !important;
     padding: 0 .8em .3em .5em;
}
 
#simpleSearch #searchInput {
    padding: 1em 0 0.2em 0.2em;
    font-size: 0.713em;
    title: "Search"
}
 
#content {
    margin-left: 160px;
    -moz-border-radius: 1em 0 0 1em;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
}
 
/* MAIN PAGE DESIGN CSS */
body.page-Main_Page #t-cite,
body.page-Main_Page #footer-info-lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}
 
body.page-Main_Page #black-plainlinks { color: black !important;
}
 
/* Link color override */
.blacklinks a, .blacklinks a:link, .blacklinks a:visited, .blacklinks a:hover, .blacklinks a:active, .blacklinks a span {
  color: black !important;
}
 
.whitelinks a, .whitelinks a:link, .whitelinks a:visited, .whitelinks a:hover, .whitelinks a:active, .whitelinks a span {
  color: white !important;
}
 
#siteSub { display:block; }
 
html, body, #mw-head {
background-color: #f1f1f1;
}
 
* style the edit buttons */
#wpSave {
    -moz-border-radius: 15px;
    background-color: #000000 !important;
    border: 1px outset !important;
}
#wpPreview {
    -moz-border-radius: 15px;
    background-color: #9d68d9 !important;
    border: 1px outset !important;
}
#wpDiff {
    -moz-border-radius: 15px;
    background-color: #9d68d9 !important;
    border: 1px outset !important;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
    -moz-border-radius: 15px;
    background-color: #000000 !important;
     border: 1px outset !important;
}
 
.noticebar {
  background: #efe url('https://dmlive.wiki/images/thumb/5/58/Noticebar_background_rev.png/800px-Noticebar_background_rev.png') no-repeat left center;
  background-color: #f1f1f1;
  border: 1px solid #9d68d9;
  margin-top: 0.2em;
  padding: 0.2em;
  text-align: center;
}
 
div.blackplainlinks span {
     font-size: 95%;
     color: #002bb8;
}
 
/* Infobox */
.infobox {
    background: #eee;
    border: 1px solid #aaa;
    float: right;
    margin: 0 0 1em 1em;
    padding: 1em;
    width: 400px;
}
.infobox-title {
    font-size: 2em;
     text-align: center;
     text-align: center;
}
     font-size: 90%;
.infobox-image {
    text-align: center;
}
.infobox th {
    text-align: right;
    vertical-align: top;
    width: 120px;
}
.infobox td {
     vertical-align: top;
}
 
.round {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
-o-border-radius: 10px;
}
 
#p-logo {
    margin: 0 0 0 -.5em;
}
 
body.page-Walking_In_My_Shoes table#InfoboxShell.round {
background: rgb(106,41,145) !important;
background: linear-gradient(155deg, rgba(106,41,145,1) 3%, rgba(111,127,187,1) 24%, rgba(137,175,220,1) 32%, rgba(103,91,165,1) 55%, rgba(101,41,139,1) 65%, rgba(100,43,140,1) 76%, rgba(90,57,78,1) 95%, rgba(65,34,39,1) 100%) !important;
}
 
body.page-In_Your_Room table#InfoboxShell.round {
background: rgb(234,155,112) !important;
background: linear-gradient(180deg, rgba(234,155,112,1) 0%, rgba(235,124,107,1) 10%, rgba(201,79,90,1) 26%, rgba(184,77,87,1) 32%, rgba(137,74,85,1) 47%, rgba(99,76,86,1) 60%, rgba(215,98,89,1) 63%, rgba(242,191,110,1) 65%, rgba(215,98,89,1) 67%, rgba(99,76,86,1) 69%, rgba(99,76,86,1) 74%, rgba(197,209,101,1) 77%, rgba(99,76,86,1) 80%, rgba(99,76,86,1) 87%, rgba(79,141,118,1) 90%, rgba(62,62,70,1) 94%) !important;
}
 
body.page-Condemnation table#InfoboxShell.round {
background: rgb(243,243,235) !important;
background: linear-gradient(231deg, rgba(243,243,235,1) 4%, rgba(232,215,208,1) 8%, rgba(210,183,172,1) 11%, rgba(198,168,157,1) 13%, rgba(138,124,113,1) 34%, rgba(62,62,70,1) 66%, rgba(60,62,61,1) 100%) !important;
}
 
body.page-Never_Let_Me_Down_Again table#InfoboxShell.round {
background: rgb(143,186,202) !important;
background: linear-gradient(148deg, rgba(143,186,202,1) 0%, rgba(163,202,217,1) 14%, rgba(120,149,165,1) 38%, rgba(100,113,132,1) 53%, rgba(96,93,110,1) 66%, rgba(87,82,88,1) 74%, rgba(88,77,81,1) 80%, rgba(59,59,59,1) 100%) !important;
}
 
body.page-Shake_The_Disease table#InfoboxShell.round {
background: rgb(139,188,218) !important;
background: linear-gradient(148deg, rgba(139,188,218,1) 0%, rgba(195,213,215,1) 16%, rgba(246,240,224,1) 30%, rgba(214,205,210,1) 44%, rgba(238,195,202,1) 51%, rgba(215,169,145,1) 59%, rgba(210,122,120,1) 69%, rgba(203,112,81,1) 80%, rgba(110,75,79,1) 90%) !important;
}
 
body.page-Home table#InfoboxShell.round {
background: rgb(44,204,239) !important;
background: linear-gradient(181deg, rgba(44,204,239,1) 0%, rgba(39,106,139,1) 44%, rgba(130,85,65,1) 48%, rgba(105,214,226,1) 51%, rgba(254,251,246,1) 54%, rgba(254,251,246,1) 66%, rgba(233,77,33,1) 72%, rgba(227,99,45,1) 77%, rgba(204,89,58,1) 83%, rgba(221,114,78,1) 100%) !important;
}
 
body.page-I_Feel_Loved table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}
 
body.page-Dirt table#InfoboxShell.round {
background: rgb(177,174,167) !important;
background: linear-gradient(181deg, rgba(177,174,167,1) 0%, rgba(186,171,133,1) 21%, rgba(174,135,56,1) 30%, rgba(182,173,154,1) 68%, rgba(164,170,204,1) 89%, rgba(140,152,190,1) 99%) !important;
}
 
body.page-Only_When_I_Lose_Myself table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}
 
body.page-Surrender table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}
 
body.page-Headstar table#InfoboxShell.round {
background: rgb(172,110,33) !important;
background: linear-gradient(91deg, rgba(172,110,33,1) 0%, rgba(198,121,43,1) 12%, rgba(182,78,27,1) 48%, rgba(238,159,40,1) 74%, rgba(240,193,89,1) 83%, rgba(243,218,164,1) 99%) !important;
}
 
.featured {
background: rgb(255,249,212) !important;
background: linear-gradient(148deg, rgba(255,249,212,1) 0%, rgba(255,252,245,1) 58%, rgba(255,244,230,1) 83%, rgba(237,239,240,1) 100%) !important;
}
 
.avoid-clicks {
  display: block;
  pointer-events: none;
}
 
code {
background: rgb(252,228,237) !important;
background: linear-gradient(148deg, rgba(252,228,237,1) 0%, rgba(255,232,204,1) 100%) !important;
}
}


body.page-Shake_The_Disease table#InfoboxShell.round:hover {
#footer a:visited, #footer a {color: #fff !important;}
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
#footer img {padding-top: 4px;}
  transform: translate3d(0, 0, 0);
#footer li {color: #fff !important;}
  backface-visibility: hidden;
  perspective: 1000px;
}


@keyframes shake {
a, a:visited, #p-personal li a {color: #0067e0;}
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
 
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }


  30%, 50%, 70% {
::selection {
    transform: translate3d(-4px, 0, 0);
   background-color: #07080d;
  }
 
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
 
/* Tooltip container */
 
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
 
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
   background-color: black;
   color: #fff;
   color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
 
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}
.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}
.parallax::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://dmlive.wiki/images/2/2e/Single-ETS.jpg');
}
.content {
  height: 200vh;
  justify-content: center;
  background: white;
}
.parallax {
  perspective-origin-x: 100%;
}
.parallax__layer {
  transform-origin-x: 100%;
}
*{
  margin:0;
  padding:0;
  text-decoration:none
}
html{
    height: 100%;
    width: 100%;
}
nav {
    background: #07080d;
    position: relative;
    margin: 0 auto;
}
#flexmenu{
  display: flex;
  flex-flow: row wrap;
}
.logo {
    z-index: 123;
    padding: 10px;
    font: 18px 'helvetica';
    color: #FFF;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 6px;
}
.logo a {
    color: #9d68d9;
    text-decoration:none
}
#main-menu{
  align-self: flex-end;
}
/* keep the drop-downs from being hidden by content wrappers etc */
.sub-menu {
  z-index: 1234;
}
/* General Menu Styling */
#flexmenu li,
#flexmenu li a{
    border: 0;
    list-style: none;
    line-height: 1;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    transition: all ease-in-out .3s;
}
#flexmenu ul li a {
    padding: 17px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}
#flexmenu ul li.has-sub > a {
    padding-right: 30px;
}
/* Drop icon */
#flexmenu ul li.has-sub > a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #fff;
    content: '';
}
#flexmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #FFF;
    content: '';
}
#flexmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #fff;
    transition: all .25s ease;
}
#flexmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0;
}
#flexmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #FFF;
    content: '';
    transition: all .3s ease;
}
#flexmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0;
}
#flexmenu ul ul li.has-sub:hover,
#flexmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #fff;
}
/* Submenu default states, removed by hover gives the animation */
#flexmenu ul ul {
    position: absolute;
    left: -9999px;
}
#flexmenu li:hover > ul {
    left: auto;
}
#flexmenu ul ul li {
    height: 0;
    background: #262629;
    transition: all .25s ease
}
#flexmenu li:hover > ul > li {
    height: 35px;
}
/* tertiary menu */
#flexmenu ul ul ul {
    margin-left: 100%;
    top: 0;
}
#flexmenu ul ul li a {
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #FFF;
    font-weight: 400;
}
/* Content */
#main{
  color: #FFF;
  height: 100vh;
  width: 100vw;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.note {
  width: 80vw;
  max-width: 320px;
  max-height: 200px;
  text-align: center;
  background: #F14F80;
  font-size: 1vw;
  padding: 10px;
  background-clip: padding-box;
}
.note h2 {
  font-weight: 300;
  font-size: 1.5em;
  margin: 10px 0 0;
}
.note p{
  margin: 5px;
}
@media screen and (max-width: 768px) {
  /* Center the logo and remove the bar */
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        text-align: center;
        padding: 10px 0 0 0;
        color: #fff;
    }
 
  /* Hamburger */
    .button {
        background: #9d68d9;
        width: 60px;
        height: 48px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 10000;
    }
    .button:after {
        position: absolute;
        top: 22px;
        right: 20px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: '';
    }
    .button:before {
        transition: all .3s ease;
        position: absolute;
        top: 16px;
        right: 20px;
        display: block;
        height: 2px;
        width: 20px;
        background: #ddd;
        content: '';
    }
  /* Turn it into an X when open */
    .button.menu-opened{
      background: #2e1f62;
    }
    .button.menu-opened:after {
        transition: all .3s ease;   
        top: 23px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #fff;
        transform: rotate(45deg);
    }
    .button.menu-opened:before {
        top: 23px;
        background: #fff;
        width: 19px;
        transform: rotate(-45deg);
    }
  /* reset horizontal styles */
    #flexmenu ul {
        display: none;
    }
    #flexmenu ul li,
    #flexmenu ul li a,
    #flexmenu ul ul li a{
        width: 100%;
    }
    #flexmenu ul ul li,
    #flexmenu li:hover > ul > li {
        height: auto; 
    }
    #flexmenu ul ul li a {
        padding-left: 25px;
    }
    #flexmenu ul ul ul li a {
        padding-left: 35px;
    }
    #flexmenu ul ul,
    #flexmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    #flexmenu ul ul ul li.active a {
        border-left: none;
    }
    #flexmenu > ul > li.has-sub > ul > li.focus > a,
    #flexmenu > ul ul > li.has-sub > ul > li.focus > a {
        background: #262626;
        transition: all .3s ease;
    }
  /* remove cross when menu item is toggled */
    #flexmenu > ul > li.has-sub > a:after,
    #flexmenu > ul > li.has-sub > a:before,
    #flexmenu ul ul > li.has-sub > a:after,
    #flexmenu ul ul > li.has-sub > a:before {
        display: none;
    }
  /* submenu toggles */
    #flexmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        height: 46px;
        width: 46px;
        cursor: pointer;
    }
    #flexmenu ul ul .submenu-button {
        height: 34px;
        width: 34px;
    }
    #flexmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #1b130f;
        content: '';
    }
    #flexmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px;
    }
    #flexmenu .submenu-button.submenu-opened:after {
        background: #fff;
    }
    #flexmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #ddd;
        content: ''
    }
    #flexmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px;
    }
    #flexmenu .submenu-button.submenu-opened:before {
        display: none;
    } 
 
  .note{
    font-size: 3vw;
  }
}
}

Latest revision as of 18:59, 29 March 2020

/* CSS placed here will be applied to users of the Monobook skin */

/* SITE-WIDE CSS */

/* Position site logo */
#p-logo {
    margin: 0 0 0 .2em;
}

#siteSub { display:block; }

html, body, #mw-head {background: none; background-color: #f1f1f1;}
#mw-body { border: 1px solid #c0c0c0;}
.mw-body-content {line-height: 1.45;}

.mw-body {
    border-radius: 1em 0 0 1em;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
    border-bottom: 1px solid #d7d7d9;
}

/* Style search buttons */
#searchGoButton, input.searchButton {background: #07080d; border: none; color: #ffffff; border: 2px solid #07080d; margin-top: 5px;}
#searchGoButton:hover, input.searchButton:hover {background: #9d68d9; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}

/* Set body text size to 13px */
#bodyContent {font-size: 1em; color: #000000;}

.toc {
    border-radius: 1em;
    border: 1px solid #d7d7d9;
    background: #f0f0f2;
    display: table;
    zoom: 1;
    padding: 7px;
    font-size: 95%;
}

/* DPL */
.columnizeme ul {
    display: block;
}

.columnizeme-3 ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
}

/* Tabs */
#p-cactions ul li, #p-cactions ul li a {
    border-radius: 1em 1em 0 0;
    border-top: 1px solid #d7d7d9;
    border-left: 1px solid #d7d7d9;
    border-right: 1px solid #d7d7d9;
    background: #f0f0f2;
    color: #6a7480 !important;
}

#p-cactions li.selected {
    background-image: none;
    color: #002bb8 !important;
    border-color: #d7d7d9 !important;
}

#p-cactions ul {     
    font-size: 102%;
    text-decoration: none;
}

#p-cactions li {
    height: 140%;
    line-height: .8em;
    border-bottom: none;
}

.portlet ul { line-height: 1em; font-size: 95%; margin: 0.6em 0 0 1.6em !important;}

.portlet h3 {color: #6a7480;}

/* MAIN PAGE DESIGN CSS */
body.page-Main_Page #t-cite,
body.page-Main_Page #footer-info-lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page #contentSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}

/* Style the edit buttons */
#wpSave {
    -moz-border-radius: 15px;
    background-color: #fff !important;
    background-image: none !important;
    border: 2px solid #fff !important;
    text-shadow: none !important;
    color: #000;
}

#wpSave:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}

#wpPreview {
    -moz-border-radius: 15px;
    background-color: #07080d !important;
    background-image: none !important;
    border: 1px outset !important;
    text-shadow: none !important;
    border: 2px solid #000 !important;
    color: #ffffff;
}

#wpPreview:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}

#wpDiff {
    -moz-border-radius: 15px;
    background-color: #07080d !important;
    border: 1px outset !important;
    background-image: none !important;
    text-shadow: none !important; 
    border: 2px solid #000 !important;
    color: #ffffff;
}

#wpDiff:hover {background: #9d68d9 !important; border: 2px solid #9d68d9 !important; color: #fff; transition: all .25s ease;}

/* SIDEBAR */

#mw-panel .portal .body {
    border-radius: 0 1em 1em 0;
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
    font-size: 95%;
    background-color: white;
    color: black;
    border-collapse: collapse;
    padding: 0 .8em .3em .5em;
    background-image: none;
}

.pBody {
    border-radius: 0 1em 1em 0;
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-top: 1px solid #c0c0c0;
}

/*Gallery*/
li.gallerybox {
    border: 1px solid #d7d7d9;
    display: inline-block;
    vertical-align: top;
    background: #f0f0f2;
    height: 205px;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

li.gallerybox div.thumb {
    background-color: #e3e3e5;
    border: 1px solid #d7d7d9;
    margin: 2px 2px 0px 2px;
    text-align: center;
    border-radius: 10px;
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -icab-border-radius: 10px; 
    -o-border-radius: 10px;
}

div.gallerytext {
    font-size: 85%;
    line-height: 12px;
    overflow: hidden;
    padding: 0px 4px;
    word-wrap: break-word;
    height: 50px;
}

div.thumbinner {
    text-align: left;
    border: 1px solid #d7d7d9;
    line-height: 1.4em;
    padding: 3px;
    font-size: 94%;
    padding: 3px;
    background-color: #f0f0f2;
    overflow: hidden;
}

/* Make the list of references smaller */
ol.references,
div.reflist,
div.refbegin {
    font-size: 90%;
}

/* Restore category box to pre-MediaWiki 1.18.0 margins */
#catlinks li {
    margin: 0 0;
    padding: 0 0.4em;
}

.mw-plusminus-pos {
    border-bottom: 1px dotted;
    cursor: help;
}

.mw-plusminus-neg {
    border-bottom: 1px dotted;
    cursor: help;
}

.mw-plusminus-null {
    border-bottom: 1px dotted;
    cursor: help;
}

#searchInput {
    width: 10.9em;
    margin: 0;
    font-size: 95%;
}

#footer {
    background-color: #07080d;
    border-top: none !important;
    border-bottom: none !important;
    margin: 0.6em 0 1em 0;
    overflow: hidden;
    padding: 0.4em 0 0.3em 0;
    text-align: center;
    font-size: 90%;
}

#footer a:visited, #footer a {color: #fff !important;}
#footer img {padding-top: 4px;}
#footer li {color: #fff !important;}

a, a:visited, #p-personal li a {color: #0067e0;}

::selection {
  background-color: #07080d;
  color: #fff;
}