roll20-character-sheets/RolemasterUnified_Official/rolemasterunified.css

/**/

.choice {
    display: none;
}

.choice-showing {
    display: block;
}





/*@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap&options=tnum');
@import
url('https://fonts.googleapis.com/css2?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');
*/
@font-face {
    font-family: "PragRoman";
    src: url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.eot");
    src: url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/311c85b74d202c797a636fe182cde796.svg#PragRoman")format("svg");
}

h2 {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}

h3 {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}

.fancybutton {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}


.fancybutton {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.fancybutton.fancybuttoninline {
    padding: 0.2em;
    line-height: 15px;
    border-bottom-left-radius: 8px 125px;
    border-bottom-right-radius: 125px 8px;
    border-top-left-radius: 125px 8px;
    border-top-right-radius: 11px 115px;
}

.fancybutton:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

.fancybutton:focus {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

.fancytext {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}

.editbutton {
  border: none;
  padding: 0;
  background: none;
}

button[type=roll].sheet-d6-dice::before {
    font-family: 'dicefontd10';
    content: 't';
}


/* Icons */
.zmaterial-icons-round {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: smaller;
  vertical-align: middle;
  font-weight: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*
 { span class="material-symbols-rounded"}
visibility // Eye
visibility_off // Eye with slsh through it
info
 {/span }
*/


.two-even-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
}


.toggle { display: none }
input:not(:checked).toggle + .toggler { display: none; }



.stat {
    display: grid;
    grid-template-columns: 1fr 2em 2em;
}

/* Same as stat, but for create
    The cms_small_number class is 3em wide; so these columns are that ana bit */
.create_stat {
    display: grid;
    grid-template-columns: 1fr 3.2em 3.2em 3.2em;
}

.stat_names {
    grid-column: 1;
}

.stat_abbr::before {
    content: '(';
}
.stat_abbr::after {
    content: ')';
}
.stat_abbr {
    font-style: italic;
    padding-left: 0.5em;
    color: rgb(100,100,100);
}

.stat_value_potential {
    grid-column: 2;
}

.stat_value_create {
    grid-column: 3;
}

.stat_value_spare {
    grid-column: 4;
}


.stat:nth-child(even) {
    background: #eed;
}

.stat_value {
    grid-column: 2;
}
.stat_attr {
    grid-column: 3;
}



/**
 * Categories in the big list
 *
 * Category  stats   Cost
 *   Skill       Ranks  +Bonus
 *   Skill       Ranks  +Bonus
 */


.skilllist {
    column-count: 3;
}


.category, .cmcategory {
    display: block;
    width:100%;
}

.category_head {
    background: #cce;
}

.category_cost {
    padding-left: 1em;
}

.skill_stat {
    font-size: smaller;
    font-style: italic;
    padding-left: 1em;
    color: rgb(100,100,100);
}
.skill_stat::before {
    content: '{';
}
.skill_stat::after {
    content: '}';
}

.skill, .skill_specialization, .skill_subskill {
    display: grid;
    
    grid-template-columns: 1fr 2em 3em 2em;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.skill:nth-of-type(even) {
    background: #eed;
}

.cmskill {
    padding-left: 1em;
}

.cmskill:nth-child(even) {
    background: #eed;
}

.cmspecialization {
    padding-left: 1em;
}

.cmspecialization:nth-child(even) {
    background: #dee;
}


.skill_specialization {
    font-style: italic;
    padding-left: 1em;
}


.repitem:nth-of-type(even) .skill_specialization {
    background: #eed;
}

.skill_ranks {
    text-align: right;
    grid-column: 2 / 3;
}
.skill_bonus {
    text-align: right;
    grid-column: 3 / 3;
}
.skill_bonus_specialization {
    font-style: italic !important;
    color: rgb(124,136,123) !important;
}

.skill_roll {
    text-align: right;
    grid-column: 4 / 4;
}

.subskill_name {
    padding-left: 3px;
    font-family: cursive;
}

.skill_subskill {
    padding-left: 2em;
}


/*
 * Generic 2 column prop value
 */
.prop_pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.prop_prop {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
    grid-column: 1;
}

.prop_prop_plain {
    grid-column: 1;
}

.prop_value{
    grid-column: 2;
}



/**
 * Icon font things
 */
/* Info about the curernt item thing (eg the description of hot to derive the stat)*/
.icon {
  display: inline-block;
  position: relative;
  color: rgba(100,100,100,0.8);
}

.iconwrap {
  position: relative;
}

/**
 * Popup for the stat info
 */
.stat_info {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    font-family: 'Caveat', 'Shadows Into Light', 'Caveat', cursive;
    font-variant-numeric: tabular-nums;
    border: 3px solid rgb(20,21,22);
    padding: 1ex;
    white-space: pre;
    width: fit-content;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    text-align: left;

    background-size: 20px 20px;
    background-image: linear-gradient(to right, rgba(137,207,240,1.0) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(137,207,240,1.0) 1px, white 1px);
}

/*Popup on the right */
.skill_info {
    visibility: hidden;
    position: absolute;
    z-index: 100;
    top: 2em;
    font-family: 'Caveat', 'Shadows Into Light', 'Caveat', cursive;
    font-variant-numeric: tabular-nums;
    border: 3px solid rgb(20,21,22);
    padding: 1ex;
    white-space: pre;
    width: fit-content;
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;

    background-size: 20px 20px;
    background-image: linear-gradient(to right, rgba(137,207,240,1.0) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(137,207,240,1.0) 1px, white 1px);
}

.icon:hover + .stat_info,
.icon:hover + .skill_info
{
    visibility: visible;
}

/* Only show the edit specialisation when you hover over the line */
.edit_specialization {
    line-height: inherit; /* override button */
    visibility: hidden;
    border: none; /* kill default */
}

.skill_specialization:hover .edit_specialization {
    visibility: visible;
}

/**
 * RRs
 */
.rr {
    display: grid;
    grid-template-columns: 2fr 3em;
}

.rr:nth-child(even) {
    background: #eed; /* FIXME: same as the other skill one */
}

.rr .rr_name {
    grid-column: 1 / 2;
 }

.rr .rr_bonus {
    text-align: right;
    grid-column: 2 / 2;
}

/* FIXME: Same as realm stat, should use same class */
.rr .rr_stat {
    font-size: smaller;
    font-style: italic;
    padding-left: 1em;
    color: rgb(100,100,100);
}
.rr .rr_stat::before {
    content: '{';
}
.rr .rr_stat::after {
    content: '}';
}

.rr .rr_info {
    visibility: hidden;
    position: absolute;
}

.xp {
    width: 8em !important;
}


div.attacks {
    display: grid;
    grid-template-columns: 1fr 3em 3em;
}

.repitem:nth-of-type(even) .attacks {
    background: #eed;
}


div.foe {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: rgb(217,222,244);
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
}


/**
 * The big popup and overlay for dialogs
 */
.overlay {
    /* FIXME: The charactermancer kills this */
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,20,0.7);
    transition: opacity 100ms;
    z-index:100;
}

.sheet-toggle[value="true"] ~ .overlay {
    display: none;
}

.popup {
    position: relative;
    width: 70%;
    min-width: 500px;
    max-height: 80vh;
    background: white;
    margin: 70px auto;
    border-radius: 5px;
    border: solid 3px black;
    overflow-y: scroll;

    z-index:200;
}

.overlay-skillchange {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20,0,20,0.7);
    transition: opacity 100ms;
    z-index:300;
}

.sheet-toggle-skillchange[value="false"] ~ .overlay-skillchange {
    display: none;
}

.skillchange {
    position: relative;
    width: 70%;
    min-width: 500px;
    background: white;
    margin: 70px auto;
    border-radius: 5px;
    border: solid 3px black;

    z-index:400;
}


.overlay-editbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20,0,20,0.7);
    transition: opacity 100ms;
    z-index:300;
}

.toggle-editbox[value="false"] ~ .overlay-editbox {
    display: none;
}

.editbox {
    position: relative;
    width: 70%;
    min-width: 500px;
    background: white;
    margin: 70px auto;
    border-radius: 5px;
    border: solid 3px black;

    z-index:400;
}

/* Title of the edit box toggle to edit */
.editbox .doedit, .editbox .noedit {
    display: none;
}

.edit-name-toggle[value="true"] ~ .doedit {
    display: inline;
}
.edit-name-toggle[value="false"] ~ .noedit {
    display: inline;
}


/* Tabs for Our creation */
/** Source: https://codepen.io/markcaron/pen/MvGRYV */
.tabset > input[type='radio'] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

/*
 Styling
*/

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
  font-weight: 600;
  width: 5em;
  font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}

.tabset > label::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 10px;
  width: 22px;
  height: 4px;
  background: #8d8d8d;
}

.tabset > label:hover,
.tabset > input:focus + label {
  color: #06c;
}

.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  background: #06c;
}

.tabset > input:checked + label {
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.tab-panel {
  padding: 30px 0;
  border-top: 1px solid #ccc;
}

/* The profession select tab */
.realm_select_enable[value='true'] ~ span.attr_realm {
    display: none;
    border: solid 1px red;
}

.realm_select_enable[value='false'] ~ select {
    display: none;
    border: solid 1px red;
}

label.plainlabel {
    font-size: 1em;
    font-weight: normal;
    display: inline;
}

.sheet-hilite {
    border: solid 1px red;
}

/* Hide repeating on most places; then turn it specidically below */
div.repcontrol {
    display: none;
}

.favorite_group div.repcontrol {
    display: block;
}

.editbox div.repcontrol {
    display: block;
}

.small_number {
    width: 4em;
}

.edit_spell_toggle[value='on'] ~ div.repcontrol {
    display: block;
}


/* Should style selects at some point */
.fancyselect {
    width: 10em;
}

/*
    Charactermancer stuff 
*/
.cm_small_number {
    width: 3em;
}

.smallselect {
    width: 10em;
}

.cm_info {
    border: 3px solid rgb(20,21,22);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}


/*
 * Levelup DP box.  Starts in the usual spot but sticks to the top so we can see costs all
 * the time.
 */
.sticktop {
    position: sticky;
    position: -webkit-sticky;
    top: 0; 
    background: white;/* FIXME: should be styled based on color */
}


button.nodie::before {
    content: "" !important;
}
button.nodie {
    font-size: 1em !important;
    padding: 0 !important;
}

/* Stylesheet for roll boxes */
.sheet-rolltemplate-rmurollbox {
  padding: 1rem;
  width: 95%;
  box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25),
    0 5px 10px 0 rgba(0,0,0,0.17);
  background-color: rgb(255, 216, 131);
  border-radius: 0.5rem;
  line-height: 1.5em;
  
  border-left: 0 solid #fca80f;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
}

.sheet-rolltemplate-rmucritical {
  padding: 1rem;
  width: 95%;
  box-shadow: 0 5px 20px 0 rgba(0,0,0,0.25),
    0 5px 10px 0 rgba(0,0,0,0.17);
    /* Dark version:  0A4F50 */
  background-color: #ADF4F5;
  border-radius: 0.5rem;
  line-height: 1.5em;
  border-left: 0 solid #F5ADC4;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
}

.sheet-rolltemplate-rmucritical:hover {
  box-shadow: 0 5px 20px 0 rgba(0,0,0,0.35),
    0 5px 10px 0 rgba(0,0,0,0.35);
}


/* Stylesheet for roll boxes */
.sheet-rolltemplate-rmuinitbox {
  background-color: rgb(216, 255, 131);
}

.sheet-rolltemplate-rmurollbox:hover {
  padding-left: 0.5rem;
  border-left: 0.5rem solid #fca80f;
  box-shadow: 0 10px 25px 0 rgba(0,0,0,0.7),
    0 10px 20px 0 rgba(0,0,0,0.8);
}

.sheet-rolltemplate-rmurollbox > :first-child {
  margin-top: 0;
}

.sheet-rolltemplate-rmurollbox > :last-child {
  margin-bottom: 0;
}

.sheet-rolltemplate.rmurollbox > span {
    border-radius: 3px !important;
}

.rollbutton.jq {
    border: 1px solid red;
}


.sheet-rolltemplate-rmurollbox .inlinerollresult,
.sheet-rolltemplate-rmuattacktarget .inlinerollresult,
.sheet-rolltemplate-noboxes .inlinerollresult
{
    background-color: transparent;
    border: none !important;
    padding: none;
    font-weight: inherit;
    cursor: help;
    font-size: 1em;
}

/* Stylesheet for roll boxes */
.sheet-rolltemplate-rmumsg {
  padding: 1rem;
  width: 95%;
}

/**/

.actionblock {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}


.aptrackerbox {
  display: flex;
  margin: 1px;
  gap: 2px;
}

.aptrack {
  order: 1;
  border: 1px solid black;
  border-radius: 6px !important;
  background: grey;
  height: 12px !important;
  width: 12px !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  z-index: 1;
}

.aptrack:checked {
  opacity: 0;
  z-index: 0;
  position: absolute;
}

.aptrack:checked ~ .aptrack {
  order: 3;
  background-color: transparent;
}

.aptrack.reset {
  order: 2;
  background-color: black;
}

/* vim: set sts=2 sw=2 syn=css : */


.attackadd {
  display:none;
}

.attackaddshow[value='on'] ~ .attackadd {
  display: block;
}

.attackaddcontent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* vim: set sts=2 sw=2 syn=css : */


/* A normal inventory item */
.inventory {
    display: grid;
    /*grid-template-columns: 5em 1fr 2em 2em;*/
    grid-template-columns: 5em 1fr 10em 10em 3em;
}

.inventoryadd {
  border: red 1px solid;
  display:none;
}

.inventoryaddshow[value='on'] ~ .inventoryadd {
  display: block;
}

.inventoryaddcontent {
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* */
.inventoryarmorshow[value='on'] ~ .inventoryarmortoggle {
  display: block;
}
.inventoryarmortoggle {
  display: none;
}

.inventoryshieldshow[value='on'] ~ .inventoryshieldtoggle {
  display: block;
}
.inventoryshieldtoggle {
  display: none;
}

.inventoryweaponshow[value='on'] ~ .inventoryweapontoggle {
  display: block;
}
.inventoryweapontoggle {
  display: none;
}

/* all repcontrol items hidden by default */




/* Spells:
    Spells have the list name,  Followed by Ranks,  SCR then Mastery 
    On a new line, we have the spells.
*/
.spellgroup {
    display: block;
    width: 100%;
    /* Name, Ranks, SCR, Mastery */
}

/* The row with the title of the group 'Base' or 'Closed' */
.spellgroupheading {
    background: #cce;
    
    grid-template-columns: 1fr 4em 5em 8em 2em;
    display: grid;
    border-bottom: 2px;
    margin-bottom: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);
}

.spellname {
    grid-column: 1 / 1;
}
.spellranks {
    grid-column: 2 / 2;
}
.spellscr {
    grid-column: 3 / 3;
}
.spellmastery {
    grid-column: 4 / 4;
}
.knownspells {
    grid-column: 1 / 4;
    font-size: smaller;
    margin-left: 2em;
}


.repitem:nth-of-type(even) .spelllist {
    background: #eed;
}

.spellinfo {
    grid-template-columns: 1fr 4em 5em 10em;
    display: grid;
}

.spelllisttype {
    font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}


.castspell {
    background: transparent;
    border: none;
}

.castspell:hover {
    font-style: italic;
}
/* vim: set sts=4 sw=4 syn=css : */





.cmtalent {
    background-color: #ACC3F5;
    margin: 1em;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,0.4);
    padding: 3px;
}


.choice-showing.talent_inline {
    display: inline !important;
}


.talent:nth-of-type(even) .cmtalent {
    background-color: #ADF4F5;
}

@media (prefers-color-scheme: dark) {

}




/* The talents on the main page */
.talent_name {
    font-weight: bold;
}




/* vim: set sts=4 sw=4 syn=css : */