Home
Games
Marketplace
Compendium Character Vault Roll20 for iPad and Android
Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "MediaWiki:Common.css"

From Roll20 Wiki

Jump to: navigation, search
m
 
(95 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
/* 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;}
+
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');
 +
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
 +
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  
−
#main-content a.external {    background: urldata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat; padding-right: 18px;}
+
@import url("https://p.typekit.net/p.css?s=1&k=zvt1yww&ht=tk&f=139.140.175.176&a=84346485&app=typekit&e=css");
 +
/* Above: fonts used on the main site */
  
−
#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;}
+
/* ******************************* */
 +
/* * Wiki layout changes (2021->)* */
 +
/* ******************************* */
 +
 
 +
* {
 +
/* roll20 brand */
 +
--pink:    #ff20a4;
 +
--purple:  #b90cea;
 +
--dark:    #273444;
 +
--lightblue:#3c95c6;
 +
--orange:  #ffab00;
 +
--whiteish: #e9e8e9;
 +
--red:      #da1c17;
 +
--green:    #00853c;
 +
/* buttons in-game */
 +
--red-btn:  #da4f49;
 +
--blue-btn: #0064cd;
 +
}
 +
 
 +
/* use pictos symbols */
 +
.pictos{
 +
  font-family:Pictos;
 +
}
 +
 
 +
/* ********************* */
 +
/*    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 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);
 +
  border: 2px solid #702c91;
 +
}
 +
 
 +
/* **************** */
 +
/*  Wiki sidebar  */
 +
/* **************** */
 +
div#wiki-tools{
 +
  margin-right: 14px;
 +
  padding: 63px 15px 8px 0px;
 +
  min-width: 160px;
 +
  max-width: 176px;
 +
  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),
 +
#pt-logout{
 +
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 Text Editor */
 +
/* **************** */
 +
 
 +
/* Editor full width */
 +
#wpTextbox1 {
 +
  width: 100%;
 +
  min-width: 400px;
 +
}
 +
 
 +
 
 +
/* ****************** */
 +
/* 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;
 +
}
 +
#main-content kbd{
 +
padding: 0 2px;
 +
}
 +
 
 +
/* shrink margin from default */
 +
#main-content p {
 +
  margin-top: 0.6em;
 +
  margin-bottom: 0em;
 +
}
 +
/* shrink margin from default */
 +
#main-content blockquote.quote {
 +
  white-space: pre-wrap;
 +
  background: #c6c3c3;
 +
  border: 2px dashed black;
 +
  border-radius:5px;
 +
  padding: 0.5rem;
 +
  font-style: italic;
 +
}
 +
 
 +
 
 +
/* ********************* */
 +
/*  IMG Image fixes    */
 +
/* ********************* */
 +
div.thumb div {
 +
  width: 100% !important;
 +
  background-color: transparent;
 +
}
 +
img.resize{
 +
  width: 100% !important;
 +
  height: auto !important;
 +
}
 +
img.w500{
 +
  min-width: 500px;
 +
}
 +
.magnify { /* remove redundant gallery icon */
 +
  display: none;
 +
}
 +
 
 +
/* Img Gallery */
 +
li.gallerybox div.thumb img {
 +
  margin: 0 !important;
 +
}
 +
li.gallerybox div div.thumb div{
 +
  margin: 10px;
 +
  min-width: 50px !important;
 +
  width: auto !important;
 +
}
 +
div.gallerytext {
 +
  border: 1px solid #ccc;
 +
}
 +
 
 +
 
 +
/* ********** */
 +
/* Misc fixes */
 +
/* ********** */
 +
 
 +
/* categories: section at end of page */
 +
div.catlinks#catlinks{
 +
  margin-top: 1em;
 +
  border: 2px solid purple;
 +
  border-radius: 6px;
 +
  padding-left: 1em;
 +
}
 +
/* fix Category pages if have extra sidebar */
 +
#mw-pages > div:nth-child(3) > table:nth-child(1),
 +
#mw-subcategories > div:nth-child(3) > table:nth-child(1){
 +
    width: auto !important;
 +
}
 +
 
 +
/* stop white border overlapping with content when image floated */
 +
.thumb.tright{
 +
  border-color: transparent;
 +
}
 +
 
 +
/* Column fixes */
 +
/* add "avoid-break-inside"-class to element where you don't wan't children to spit up on multiple columns, like when using "column-width". */
 +
.avoid-break-inside *{
 +
  break-inside: avoid;
 +
}
 +
 
 +
/* ********** */
 +
/*  FOOTER  */
 +
/* ********** */
 +
 
 +
#footer-wrap {
 +
  margin-top: 0.5em;
 +
}
 +
 
 +
/* ************************* */
 +
/* 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://help.roll20.net"].external,
 +
#main-content a[href ^="https://roll20.zendesk.com"].external,
 +
#main-content a[href ^="https://roll20partners.zendesk.com"].external,
 +
#main-content a[href ^="https://blog.roll20.net"].external,
 +
#main-content a[href ^="https://marketplace.roll20.net"].external,
 +
#main-content a[href ^="https://pages.roll20.net"].external,
 +
#main-content a[href ^="https://gmhub.roll20.net"].external,
 +
#main-content a[href ^="https://con.roll20.net"].external,
 +
#main-content a[href ^="https://roll20.net"].external,
 +
#main-content a[href ^="https://app.roll20dev.net"].external,
 +
#main-content a[href ^="https://roll20con.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 */
 +
/* zendesk url is the older url that redirects to help.roll20.net */
 +
#main-content a[href ^="https://help.roll20.net"].external,
 +
#main-content a[href ^="https://roll20.zendesk.com"].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,
 +
#main-content a[href ^="https://roll20.zendesk.com"].external:hover,
 +
#main-content a[href ^="https://roll20.zendesk.com"].external:focus{
 +
  color: #a0005f;
 +
}
 +
 
 +
#main-content a[href ^="https://www.dmsguild.com"].external{
 +
  background: url(images/a/a3/Dmsguild.png) top right no-repeat;
 +
  padding-right: 14px;
 +
  background-size: 10px;
 +
}
 +
#main-content a[href ^="https://www.drivethrurpg"].external{
 +
  background: url(images/7/7b/Drivethrurpg.png) top right no-repeat;
 +
  padding-right: 14px;
 +
  background-size: 10px;
 +
}
 +
 
 +
#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/dd/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,
 +
#main-content a[href ^="https://simple.wikipedia.org"].external,
 +
#main-content a[href ^="https://fr.wikipedia.org"].external,
 +
#main-content a[href ^="https://es.wikipedia.org"].external,
 +
#main-content a[href ^="https://pt.wikipedia.org"].external,
 +
#main-content a[href ^="https://de.wikipedia.org"].external,
 +
#main-content a[href ^="https://fi.wikipedia.org"].external,
 +
#main-content a[href ^="https://se.wikipedia.org"].external,
 +
#main-content a[href ^="https://ja.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://www.mediawiki.org"].external{
 +
  background: url(images/0/05/Mediawiki.png) top right no-repeat;
 +
  padding-right: 14px;
 +
  background-size: 10px;
 +
}
 +
 
 +
#main-content a[href ^="https://twitter.com/"].external,
 +
#main-content a[href ^="https://x.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    */
 +
/* ************* */
 +
 
 +
/*
 +
  TODO: get colorcodes for Roll20's upcoming darkmode color pallette
 +
 
 +
  If you want to use Wiki in Dark Mode, try https://userstyles.world/style/3108/roll20-dark-mode
 +
 
 +
@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;
 +
  }
 +
*/
 +
/* hide partial darkmode until wiki gets css for complete darkmode
 +
  #main-content :is(code),
 +
  #main-content :is(code) * {
 +
    color: #6aff0f;
 +
    background: #0f2101;
 +
  }
 +
*/
 +
}
 +
 
 +
 
 +
 
 +
/* ******************************* */
 +
/* original CSS from wiki creation */
 +
/* ******************************* */
 +
 
 +
/* If you change any from this section, move the CSS to the above section. */
 +
 
 +
/* 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 {
 
img.thumbborder {
−
  border: 1px solid #ddd;
+
  border: 1px solid #ddd;
 +
}
 +
 
 +
/* *************************** */
 +
/* inline diceroller (broken?) */
 +
/* *************************** */
 +
 
 +
.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;
 
}
 
}
  
−
code {
+
.dicegrouping .diceroll.critfail .didroll {
−
background-color: #ddd;
+
  color: #730505;
 +
  font-weight: bold;
 
}
 
}

Latest revision as of 09:54, 9 June 2024

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

@import url("https://p.typekit.net/p.css?s=1&k=zvt1yww&ht=tk&f=139.140.175.176&a=84346485&app=typekit&e=css");
/* Above: fonts used on the main site */

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

* {
 /* roll20 brand */
 --pink:     #ff20a4;
 --purple:   #b90cea;
 --dark:     #273444;
 --lightblue:#3c95c6;
 --orange:   #ffab00;
 --whiteish: #e9e8e9;
 --red:      #da1c17;
 --green:    #00853c;
 /* buttons in-game */
 --red-btn:  #da4f49;
 --blue-btn: #0064cd;
}

/* use pictos symbols */
.pictos{
  font-family:Pictos;
}

/* ********************* */
/*     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 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);
  border: 2px solid #702c91;
}

/* **************** */
/*   Wiki sidebar   */
/* **************** */
div#wiki-tools{
  margin-right: 14px;
  padding: 63px 15px 8px 0px;
  min-width: 160px;
  max-width: 176px;
  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),
#pt-logout{
 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 Text Editor */
/* **************** */

/* Editor full width */
#wpTextbox1 {
  width: 100%;
  min-width: 400px;
}


/* ****************** */
/* 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;
}
#main-content kbd{
 padding: 0 2px;
}

/* shrink margin from default */
#main-content p {
  margin-top: 0.6em;
  margin-bottom: 0em;
}
/* shrink margin from default */
#main-content blockquote.quote {
  white-space: pre-wrap;
  background: #c6c3c3;
  border: 2px dashed black;
  border-radius:5px;
  padding: 0.5rem;
  font-style: italic;
}


/* ********************* */
/*   IMG Image fixes     */
/* ********************* */
div.thumb div {
  width: 100% !important;
  background-color: transparent;
}
img.resize{
  width: 100% !important;
  height: auto !important;
}
img.w500{
  min-width: 500px;
}
.magnify { /* remove redundant gallery icon */
  display: none;
}

/* Img Gallery */
li.gallerybox div.thumb img {
  margin: 0 !important;
}
li.gallerybox div div.thumb div{
  margin: 10px;
  min-width: 50px !important;
  width: auto !important;
}
div.gallerytext {
  border: 1px solid #ccc;
}


/* ********** */
/* Misc fixes */
/* ********** */

/* categories: section at end of page */
div.catlinks#catlinks{
  margin-top: 1em;
  border: 2px solid purple;
  border-radius: 6px;
  padding-left: 1em;
}
/* fix Category pages if have extra sidebar */
#mw-pages > div:nth-child(3) > table:nth-child(1),
#mw-subcategories > div:nth-child(3) > table:nth-child(1){
    width: auto !important;
}

/* stop white border overlapping with content when image floated */
.thumb.tright{
  border-color: transparent;
}

/* Column fixes */
/* add "avoid-break-inside"-class to element where you don't wan't children to spit up on multiple columns, like when using "column-width". */
.avoid-break-inside *{
  break-inside: avoid;
}

/* ********** */
/*   FOOTER   */
/* ********** */

#footer-wrap {
  margin-top: 0.5em;
}

/* ************************* */
/* 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://help.roll20.net"].external,
#main-content a[href ^="https://roll20.zendesk.com"].external,
#main-content a[href ^="https://roll20partners.zendesk.com"].external,
#main-content a[href ^="https://blog.roll20.net"].external,
#main-content a[href ^="https://marketplace.roll20.net"].external,
#main-content a[href ^="https://pages.roll20.net"].external,
#main-content a[href ^="https://gmhub.roll20.net"].external,
#main-content a[href ^="https://con.roll20.net"].external,
#main-content a[href ^="https://roll20.net"].external,
#main-content a[href ^="https://app.roll20dev.net"].external,
#main-content a[href ^="https://roll20con.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 */
/* zendesk url is the older url that redirects to help.roll20.net */
#main-content a[href ^="https://help.roll20.net"].external,
#main-content a[href ^="https://roll20.zendesk.com"].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,
#main-content a[href ^="https://roll20.zendesk.com"].external:hover,
#main-content a[href ^="https://roll20.zendesk.com"].external:focus{
  color: #a0005f;
}

#main-content a[href ^="https://www.dmsguild.com"].external{
  background: url(images/a/a3/Dmsguild.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}
#main-content a[href ^="https://www.drivethrurpg"].external{
  background: url(images/7/7b/Drivethrurpg.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}

#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/dd/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,
#main-content a[href ^="https://simple.wikipedia.org"].external,
#main-content a[href ^="https://fr.wikipedia.org"].external,
#main-content a[href ^="https://es.wikipedia.org"].external,
#main-content a[href ^="https://pt.wikipedia.org"].external,
#main-content a[href ^="https://de.wikipedia.org"].external,
#main-content a[href ^="https://fi.wikipedia.org"].external,
#main-content a[href ^="https://se.wikipedia.org"].external,
#main-content a[href ^="https://ja.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://www.mediawiki.org"].external{
  background: url(images/0/05/Mediawiki.png) top right no-repeat;
  padding-right: 14px;
  background-size: 10px;
}

#main-content a[href ^="https://twitter.com/"].external,
#main-content a[href ^="https://x.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    */
/* ************* */

/* 
   TODO: get colorcodes for Roll20's upcoming darkmode color pallette
   
   If you want to use Wiki in Dark Mode, try https://userstyles.world/style/3108/roll20-dark-mode

@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;
  }
*/
/* hide partial darkmode until wiki gets css for complete darkmode
  #main-content :is(code),
  #main-content :is(code) * {
    color: #6aff0f;
    background: #0f2101;
  }
*/
} 



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

/* If you change any from this section, move the CSS to the above section. */

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

/* *************************** */
/* inline diceroller (broken?) */
/* *************************** */

.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;
}
Retrieved from "https://wiki.roll20.net/index.php?title=MediaWiki:Common.css&oldid=34034"