Revision as of 13:28, 5 November 2021

/* ******************************* */
/* * Wiki layout changes (2021->)* */
/* ******************************* */


/* Roll20 navbar */

/* hide outdated links  */
div.topbar-tools.container div.menu > a:nth-child(3),
div.listing:nth-child(4),
div.listing:nth-child(5){
 display: none;
}
/* fix broken images in menu */
div.listing:nth-child(3) > div:nth-child(1) > a:nth-child(1) > img:nth-child(1),
div.listing:nth-child(2) > div:nth-child(1) > a:nth-child(1) > img:nth-child(1) {
  display: none;
}
/*
div.listing:nth-child(2) > div:nth-child(1) {
  background-image: url('https://app.roll20.net/images/banner-character-vault.jpg');
  height: 150px;
  background-size: 235px 180px;
}
div.listing:nth-child(3) > div:nth-child(1) {
  background-image: url('https://app.roll20.net/images/banner-compendium.jpg');
  height: 150px;
  background-size: 235px 180px;
}*/

/* wiki top navbar hover */
#nav li a:hover, #nav li a:focus {
  text-decoration: purple underline;
  text-decoration-thickness: 3px;
  color: purple;
}

/* Wiki Text Editor full width */
#wpTextbox1{
  width: 100%;
}


/* Wiki pages: condense top part */
h3#siteSub, div#jump-to-nav,div#contentSub{
  display:none;
}
/* remove padding at top of page */
div#main{
  padding: 0px 3%;
  margin-left: 5px;
}
div#main-content.with-menu h1#page-title{
  border-bottom: 3px solid purple;
  width: max-content;
}
@media screen and (max-width: 980px) {
div#main-content.with-menu  #header,
div#main-content.with-menu #footer,
div#main-content.with-menu #crumbs,
div#main-content.with-menu h1#page-title {
    margin-left: 0px;
  }
}
div#breadcrumbs {
  width: max-content;
}
div#main-content.with-menu{
  box-shadow: 1px 1px 4px rgba(128, 0, 128, 0.5);
}

/* Wiki sidebar */
div#wiki-tools{
  margin-right: 14px;
  padding: 63px 15px 8px 0px;
  min-width: 160px;
  border: 2px solid purple;
  border-radius: 10px;
  box-shadow: 1px 1px 4px rgba(128, 0, 128, 0.5);
  background-image: url(/images/2/25/Community-Wiki.png);
  background-position: top 3px center;
  background-size: auto 60px;
  background-repeat: no-repeat;
}
div#wiki-tools #p-navigation > h2:nth-child(1) {
 display: none;
}

div.portlet{
  min-width: 160px;
}
div#wiki-tools li{
  width: 90%;
}
div#wiki-tools a{
  width: 95%;
}

div#wiki-tools a:hover,
div#wiki-tools a:focus{
  color: black;
}
div#wiki-tools a:hover::after,
div#wiki-tools a:focus::after{
  content: " «";
  font-weight: bold;
  font-size: 1.3em;
  color: purple;
  line-height: 50%;
}

div#wiki-tools h2{
  padding: 0 0 0 5px;
}

/* ****************** */
/* wiki page element  */
/*   default style    */
#main-content pre{
  overflow:auto;
  white-space:pre-wrap;
}

#main-content code {
/*  background-color: #ddd; */
  border-radius: 3px;
  border: 1px solid #dadada;
  color: purple;
}

/* shrink margin from default */
#main-content p {
  margin-top: 0.6em;
  margin-bottom: 0em;
}
img.resize{
  width: 100% !important;
  height: auto !important;
}
/* categories: section at end of page */
div.catlinks#catlinks{
  margin-top: 1em;
  border: 2px solid purple;
  border-radius: 6px;
  padding-left: 1em;
}
/* External hyperlink symbol */
#main-content a.external {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) top right no-repeat;
  padding-right: 14px;
}

/* roll20 logo on any link to other part of roll20.net that's outside the wiki */
#main-content a[href ^="https://wiki.roll20.net"].external,
#main-content a[href ^="https://app.roll20.net"].external,
#main-content a[href ^="https://app.roll20.net"].external,
#main-content a[href ^="https://help.roll20.net"].external,
#main-content a[href ^="https://blog.roll20.net"].external,
#main-content a[href ^="https://marketplace.roll20.net"].external,
#main-content a[href ^="https://roll20.net"].external,
#main-content a[href ^="https://roll20.io"].external,
#main-content a[href ^="https://portal.productboard.com/roll20"].external{
  background: url(/images/e/e4/Roll20-logo.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}

/* links to help center same color-scheme as on help center */
#main-content a[href ^="https://help.roll20.net"].external{
  color: rgba(236, 0, 140, 1);
}
#main-content a[href ^="https://help.roll20.net"].external:hover,
#main-content a[href ^="https://help.roll20.net"].external:focus{
  color: #a0005f;
}

#main-content a[href ^="https://github.com"].external,
#main-content a[href ^="https://gist.github.com"].external,
#main-content a[href ^="https://raw.githubusercontent.com"].external,
#main-content a[href ^="https://docs.github.com"].external{
  background: url(/images/d/de/GitHubLogo.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}
#main-content a[href ^="https://developer.mozilla.org"].external{
  background: url(/images/b/b1/Mdn.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}
#main-content a[href ^="https://en.wikipedia.org"].external{
  background: url(/images/f/f3/Wikipedia-Black-W.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}

#main-content a[href ^="https://twitter.com/"].external{
  background: url(/images/3/3a/Twitter-logo-2021.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}
#main-content a[href ^="https://twitch.tv/"].external{
  background: url(/images/4/40/Twitch.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}
#main-content a[href ^="https://www.youtube.com"].external,
#main-content a[href ^="https://youtu.be"].external{
  background: url(/images/b/b6/Youtube-logo.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}

#main-content a[href ^="https://facebook.com"].external,
#main-content a[href ^="https://www.facebook.com"].external{
  background: url(/images/5/55/Facebook.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}


#main-content a[href ^="https://www.reddit.com"].external,
#main-content a[href ^="https://new.reddit.com"].external,
#main-content a[href ^="https://old.reddit.com"].external{
  background: url(images/b/b5/Reddit_logo.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}


/* old, made hyper-link logo a lock
#main-content a[href ^="https://"].external {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVQYV2P4//8/Awxv3LThf0dXKxyD+DA5DEUg+tWrV2AaWTFcIboJyJrhCtGtRMcgebhpL2/4/v//Lvn//x+7IRjIfn8v+P/t055gxZgKPzaC8Y/nMYQVLpnM8f/zo3AqKfzyOOL/h/sh/59c9sBUSIyvAeRdJWjk4E//AAAAAElFTkSuQmCC) center right no-repeat;
  padding-right: 18px;
} */



/* ************* */
/*   Darkmode    */
/* ************* */
@media (prefers-color-scheme: dark) {
  #main-content div.bg-yellow {
    background: #353535 !important;
    color: #fff !important;
  }
  #main-content is(div.bg-yellow div.darkmodefix) :is(b, i, div, span) {
    color: #fff !important;
  }
  #main-content code {
    color: #6aff0f;
    background: #0f2101;
  }
}




/* ******************************* */
/* original CSS from wiki creation */
/* ******************************* */

/* Cell sizes for ambox/tmbox/imbox/cmbox/ombox/fmbox/dmbox message boxes */

th.mbox-text,
td.mbox-text {
  /* The message body cell(s) */
  border: none;
  padding: 0.25em 0.9em;
  /* 0.9em left/right */
  width: 100%;
  /* Make all mboxes the same width regardless of text length */
}

td.mbox-image {
  /* The left image cell */
  border: none;
  padding: 2px 0 2px 0.9em;
  /* 0.9em left, 0px right */
  text-align: center;
}

td.mbox-imageright {
  /* The right image cell */
  border: none;
  padding: 2px 0.9em 2px 0;
  /* 0px left, 0.9em right */
  text-align: center;
}

td.mbox-empty-cell {
  /* An empty narrow cell */
  border: none;
  padding: 0px;
  width: 1px;
}


/* Article message box styles */

table.ambox {
  margin: 0px 10%;
  /* 10% = Will not overlap with other elements */
  border: 1px solid #aaa;
  border-left: 10px solid #1e90ff;
  /* Default "notice" blue */
  background: #fbfbfb;
}

table.ambox+table.ambox {
  /* Single border between stacked boxes. */
  margin-top: -1px;
}

.ambox th.mbox-text,
.ambox td.mbox-text {
  /* The message body cell(s) */
  padding: 0.25em 0.5em;
  /* 0.5em left/right */
}

.ambox td.mbox-image {
  /* The left image cell */
  padding: 2px 0 2px 0.5em;
  /* 0.5em left, 0px right */
}

.ambox td.mbox-imageright {
  /* The right image cell */
  padding: 2px 0.5em 2px 0;
  /* 0px left, 0.5em right */
}

table.ambox-notice {
  border-left: 10px solid #1e90ff;
  /* Blue */
}

table.ambox-speedy {
  border-left: 10px solid #b22222;
  /* Red */
  background: #fee;
  /* Pink */
}

table.ambox-delete {
  border-left: 10px solid #b22222;
  /* Red */
}

table.ambox-content {
  border-left: 10px solid #f28500;
  /* Orange */
}

table.ambox-style {
  border-left: 10px solid #f4c430;
  /* Yellow */
}

table.ambox-move {
  border-left: 10px solid #9932cc;
  /* Purple */
}

table.ambox-protection {
  border-left: 10px solid #bba;
  /* Gray-gold */
}


/* Image message box styles */

table.imbox {
  margin: 4px 10%;
  border-collapse: collapse;
  border: 3px solid #1e90ff;
  /* Default "notice" blue */
  background: #fbfbfb;
}

.imbox .mbox-text .imbox {
  /* For imboxes inside imbox-text cells. */
  margin: 0 -0.5em;
  /* 0.9 - 0.5 = 0.4em left/right.        */
  display: block;
  /* Fix for webkit to force 100% width.  */
}

.mbox-inside .imbox {
  /* For imboxes inside other templates.  */
  margin: 4px;
}

table.imbox-notice {
  border: 3px solid #1e90ff;
  /* Blue */
}

table.imbox-speedy {
  border: 3px solid #b22222;
  /* Red */
  background: #fee;
  /* Pink */
}

table.imbox-delete {
  border: 3px solid #b22222;
  /* Red */
}

table.imbox-content {
  border: 3px solid #f28500;
  /* Orange */
}

table.imbox-style {
  border: 3px solid #f4c430;
  /* Yellow */
}

table.imbox-move {
  border: 3px solid #9932cc;
  /* Purple */
}

table.imbox-protection {
  border: 3px solid #bba;
  /* Gray-gold */
}

table.imbox-license {
  border: 3px solid #88a;
  /* Dark gray */
  background: #f7f8ff;
  /* Light gray */
}

table.imbox-featured {
  border: 3px solid #cba135;
  /* Brown-gold */
}


/* Category message box styles */

table.cmbox {
  margin: 3px 10%;
  border-collapse: collapse;
  border: 1px solid #aaa;
  background: #DFE8FF;
  /* Default "notice" blue */
}

table.cmbox-notice {
  background: #D8E8FF;
  /* Blue */
}

table.cmbox-speedy {
  margin-top: 4px;
  margin-bottom: 4px;
  border: 4px solid #b22222;
  /* Red */
  background: #FFDBDB;
  /* Pink */
}

table.cmbox-delete {
  background: #FFDBDB;
  /* Red */
}

table.cmbox-content {
  background: #FFE7CE;
  /* Orange */
}

table.cmbox-style {
  background: #FFF9DB;
  /* Yellow */
}

table.cmbox-move {
  background: #E4D8FF;
  /* Purple */
}

table.cmbox-protection {
  background: #EFEFE1;
  /* Gray-gold */
}


/* Other pages message box styles */

table.ombox {
  margin: 4px 10%;
  border-collapse: collapse;
  border: 1px solid #aaa;
  /* Default "notice" gray */
  background: #f9f9f9;
}

table.ombox-notice {
  border: 1px solid #aaa;
  /* Gray */
}

table.ombox-speedy {
  border: 2px solid #b22222;
  /* Red */
  background: #fee;
  /* Pink */
}

table.ombox-delete {
  border: 2px solid #b22222;
  /* Red */
}

table.ombox-content {
  border: 1px solid #f28500;
  /* Orange */
}

table.ombox-style {
  border: 1px solid #f4c430;
  /* Yellow */
}

table.ombox-move {
  border: 1px solid #9932cc;
  /* Purple */
}

table.ombox-protection {
  border: 2px solid #bba;
  /* Gray-gold */
}


/* Talk page message box styles */

table.tmbox {
  margin: 4px 10%;
  border-collapse: collapse;
  border: 1px solid #c0c090;
  /* Default "notice" gray-brown */
  background: #f8eaba;
}

.mediawiki .mbox-inside .tmbox {
  /* For tmboxes inside other templates. The "mediawiki" class ensures that */
  margin: 2px 0;
  /* this declaration overrides other styles (including mbox-small above)   */
  width: 100%;
  /* For Safari and Opera */
}

.mbox-inside .tmbox.mbox-small {
  /* "small" tmboxes should not be small when  */
  line-height: 1.5em;
  /* also "nested", so reset styles that are   */
  font-size: 100%;
  /* set in "mbox-small" above.                */
}

table.tmbox-speedy {
  border: 2px solid #b22222;
  /* Red */
  background: #fee;
  /* Pink */
}

table.tmbox-delete {
  border: 2px solid #b22222;
  /* Red */
}

table.tmbox-content {
  border: 2px solid #f28500;
  /* Orange */
}

table.tmbox-style {
  border: 2px solid #f4c430;
  /* Yellow */
}

table.tmbox-move {
  border: 2px solid #9932cc;
  /* Purple */
}

table.tmbox-protection,
table.tmbox-notice {
  border: 1px solid #c0c090;
  /* Gray-brown */
}


/* Disambig and set index box styles */

table.dmbox {
  clear: both;
  margin: 0.9em 1em;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: transparent;
}


/* Footer and header message box styles */

table.fmbox {
  clear: both;
  margin: 0.2em 0;
  width: 100%;
  border: 1px solid #aaa;
  background: #f9f9f9;
  /* Default "system" gray */
}

table.fmbox-system {
  background: #f9f9f9;
}

table.fmbox-warning {
  border: 1px solid #bb7070;
  /* Dark pink */
  background: #ffdbdb;
  /* Pink */
}

table.fmbox-editnotice {
  background: transparent;
}


/* Div based "warning" style fmbox messages. */

div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
  clear: both;
  margin: 0.2em 0;
  border: 1px solid #bb7070;
  background: #ffdbdb;
  padding: 0.25em 0.9em;
}


/* Div based "system" style fmbox messages.    Used in [[MediaWiki:Readonly lag]]. */

div.mw-lag-warn-normal,
div.fmbox-system {
  clear: both;
  margin: 0.2em 0;
  border: 1px solid #aaa;
  background: #f9f9f9;
  padding: 0.25em 0.9em;
}


/* These mbox-small classes must be placed after all other    ambox/tmbox/ombox etc classes. "body.mediawiki" is so    they override "table.ambox + table.ambox" above. */

body.mediawiki table.mbox-small {
  /* For the "small=yes" option. */
  clear: right;
  float: right;
  margin: 4px 0 4px 1em;
  width: 238px;
  font-size: 88%;
  line-height: 1.25em;
}

body.mediawiki table.mbox-small-left {
  /* For the "small=left" option. */
  margin: 4px 1em 4px 0;
  width: 238px;
  border-collapse: collapse;
  font-size: 88%;
  line-height: 1.25em;
}



img.thumbborder {
  border: 1px solid #ddd;
}

.formula,
.rolled {
  display: inline;
  padding: 3px;
  background: white;
  border-radius: 3px;
  border: 1px solid #D1D1D1;
  font-size: 1.1em;
  line-height: 2.0em;
  word-wrap: break-word;
}

.rolled {
  font-weight: bold;
}

.dropped {
  opacity: 0.55;
}

.critsuccess {
  color: #508C4D;
  font-weight: bold;
}

.critfail {
  color: #D61A1A;
  font-weight: bold;
}

.diceroller {
  background-color: #D3E5F5;
  padding: 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  font-size: 1.1em;
}

.diceroller input {
  font-size: 1.2em;
  padding: 5px;
  width: 300px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.diceroller small {
  display: block;
  margin-top: 0px;
  font-size: 0.9em;
}

.formula,
.rolled {
  display: inline;
  padding: 4px;
  background: white;
  border-radius: 3px;
  border: 1px solid #D1D1D1;
  font-size: 1.1em;
  line-height: 2.0em;
  word-wrap: break-word;
}

.formula .parsegroup {
  display: inline;
}

.formula .parsegroup .parsegroupitem {
  display: inline;
}

.withouticons .dicegrouping .diceroll .backing {
  display: none !important;
}

.dicegrouping {
  display: inline;
}

.dicegrouping .diceroll {
  display: inline-block;
  font-size: 1.2em;
}

.dicegrouping .diceroll .dicon {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  position: relative;
}

.dicegrouping .diceroll .didroll {
  text-shadow: -1px -1px 1px #FFFFFF, 1px -1px 1px #FFFFFF, -1px 1px 1px #FFFFFF, 1px 1px 1px #FFFFFF;
  z-index: 2;
  position: relative;
  color: black;
  height: 29px;
  margin-top: -3px;
  top: 0px;
  text-align: center;
}

.dicegrouping .diceroll .backing {
  position: absolute;
  top: -2px;
  left: 0px;
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: #8FB1D9;
  text-shadow: 0px 0px 3px #8FB1D9;
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

.dicegrouping .diceroll.d20 .backing {
  font-family: "dicefontd20";
}

.dicegrouping .diceroll.d4 .backing {
  font-family: "dicefontd4";
}

.dicegrouping .diceroll.d6 .backing {
  font-family: "dicefontd6";
}

.dicegrouping .diceroll.d8 .backing {
  font-family: "dicefontd8";
}

.dicegrouping .diceroll.d10 .backing {
  font-family: "dicefontd10";
}

.dicegrouping .diceroll.d12 .backing {
  font-family: "dicefontd12";
}

.dicegrouping .diceroll.d20 .backing:after,
.dicegrouping .diceroll.d12 .backing:after,
.dicegrouping .diceroll.d10 .backing:after,
.dicegrouping .diceroll.d8 .backing:after,
.dicegrouping .diceroll.d6 .backing:after,
.dicegrouping .diceroll.d4 .backing:after {
  content: "0";
}

.rolled {
  font-weight: bold;
  color: black;
  font-size: 1.2em;
}

.parsegroup .parsegroupitem.dropped .diceroll {
  opacity: 0.40;
}

.dicegrouping .diceroll.dropped {
  opacity: 0.40;
}

.dicegrouping .diceroll.critsuccess .didroll {
  color: #247305;
  font-weight: bold;
}

.dicegrouping .diceroll.critfail .didroll {
  color: #730505;
  font-weight: bold;
}