Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 19:52:29 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
fcd1def69752e4e94de164b3d14432b2c2ce0ae8
roll20-character-sheets/RolemasterUnified_Official/rolemasterunified.css
T
Brett Nash 95992ad3ca RolemasterUnified Official: Tracker updates 
Lots of tracker updates
- Fix delete in the new tracker
    - Set icon to safe default
    - Put it at the bottom
- Add a toggle to hide/show created characters
- Fetch the inuse items when adding ones
- Add item for hte inuse item
- Hide unused tracker templates
- Correct message when adding to tracker
- Add tracker to PC sheet
- Add toggle to hide PC trackers
- Initiative button rolls initiative; and sends to pc sheet
- Add 'next' button to advance initiative.
2026-02-04 22:52:46 -08:00

1957 lines
45 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**/
.choice {
display: none;
}
.choice-showing {
display: block;
}
span.choice-showing {
display: inline;
}
:root {
--pcfb-primary: #5C62F1;
--pcfb-secondary: #FF6B6B;
--pcfb-accent: #FFD166;
--pcfb-dark: #2E3057;
--pcfb-light: #F8F9FA;
--pcfb-success: #06D6A0;
--pcfb-border-radius: 12px;
--pcfb-shadow: 0 8px 20px rgba(46, 48, 87, 0.12);
--pcfb-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pcframebox {
background: var(--pcfb-white);
border-radius: var(--pcfb-border-radius);
padding: 8px 12px 6px 12px; /* top right bottom left */
box-shadow: 0 2px 15px var(--pcfb-shadow);
transition: var(--pcfb-transition);
position: relative;
overflow: visible;
cursor: pointer;
border: 1px solid rgb(226, 232, 240);
margin-bottom: 3px;
background: linear-gradient(33deg, #f0eff0, #faf8f9);
}
.pcframebox:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
overflow: visible;
}
/* Same as pc frame box, but no hover */
.simpleframebox {
background: var(--pcfb-white);
border-radius: var(--pcfb-border-radius);
padding: 8px 12px 6px 12px; /* top right bottom left */
box-shadow: 0 2px 15px var(--pcfb-shadow);
transition: var(--pcfb-transition);
position: relative;
overflow: visible;
cursor: pointer;
border: 1px solid rgb(226, 232, 240);
margin-bottom: 3px;
background: linear-gradient(33deg, #f0eff0, #faf8f9);
}
.rmusheet-column {
width: calc(33% - 10px);
margin-right: 10px;
display: inline-block;
vertical-align: top;
overflow: visible;
}
.diced10 {
font-family: 'dicefontd10';
font-size:150%;
display: inline-block;
}
@keyframes tilt-n-move-shaking {
0% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(3px, 3px) rotate(5deg); }
50% { transform: translate(0, 0) rotate(0deg); }
75% { transform: translate(-3px, 3px) rotate(-5deg); }
100% { transform: translate(0, 0) rotate(0deg); }
}
/* So 3 iterations, each taking 0.5s, of the tilt-n-move animations */
.diced10:hover {
animation: tilt-n-move-shaking 0.5s 3;
}
@font-face {
font-family: myPragRoman;
src: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/RolemasterUnified_Official/fonts/PragRoman.ttf) format('truetype'),
url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/RolemasterUnified_Official/fonts/PragRoman.woff) format('woff');
}
/* ma ual contents of
@import url('https://fonts.googleapis.com/css2?family=Material+Icons+Outlined&display=swap');
*/
/* fallback */
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v110/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
}
.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
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;
}
body {
--rmutextcolor: rgb(0,0,0);
--rmubgcolor: rgb(255,255,255);
--rmualtbgcolor: #eed;
--rmuheadingbg: #cce;
}
body.sheet-darkmode {
--rmutextcolor:rgb(230,230,230);
--rmubgcolor: rgb(31,31,31);
--rmualtbgcolor: #22053b;
--rmuheadingbg: #224;
}
.charsheet {
background: var(--rmubgcolor);
color: var(--rmutextcolor);
}
/*@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");
}
/* phttps://wiki.roll20.net/Character_Sheet_Development/Dark_Mode */
h2 {
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', serif;
color: var(--rmutextcolor);
}
h3 {
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', serif;
color: var(--rmutextcolor);
}
.inline {
display: inline !important;
}
.sheet-hangingindent, .hangingindent {
padding-left: 1em;
text-indent: -1em;
}
.ui-dialog .charsheet input[type='checkbox'] {
height: 1em;
}
.textnowrap {
white-space:nowrap;
}
/**/
.creaturesheet {
display: none;
}
.trackersheet {
display: none;
}
.sheetselect[value='creaturesheet'] + .creaturesheet {
display: block;
}
.sheetselect[value='creaturesheet'] + .playercharactersheet {
display: none;
}
.sheetselect[value='trackersheet'] + .trackersheet {
display: block;
}
.sheetselect[value='trackersheet'] + .playercharactersheet {
display: none;
}
.fancytext {
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', serif;
}
.editbutton {
border: none;
padding: 0;
background: none;
}
button[type=roll].sheet-d6-dice::before {
font-family: 'dicefontd10';
content: '0';
font-size: 150%;
}
/* 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; }
input:checked.toggle + .toggler + .toggleroff { display: none; }
.edittoggle {
appearance: none;
-webkit-tap-highlight-color: transparent;
border: none !important;
background: transparent;
order: 1000; /* */
}
.edittoggle:focus { outline: none !important; }
input:checked.edittoggle + .edittext { display: none; }
input:not(:checked).edittoggle + .edittext + .editactive { display: none; }
.edittoggle::before {
/*box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px inset;*/
content: "p";
font-family: "Pictos";
border-radius: 2px;
padding:1px;
margin: 1px;
margin-right: 2px;
color: rgb(200,200,200);
}
.edittoggle:checked::before {
content: "3";
color: green;
}
.edittogglegroup {
display:flex;
}
.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: var(--rmualtbgcolor);
}
.stat_value {
grid-column: 2;
}
.stat_attr {
grid-column: 3;
text-align: right;
margin-right: 0.3em;
}
/**
* Categories in the big list
*
* Category stats Cost
* Skill Ranks +Bonus
* Skill Ranks +Bonus
*/
.skilllist {
column-count: auto;
column-width: 18em;
column-gap: 1em;
padding-bottom: 10em;
overflow: visible;
}
.category, .cmcategory {
display: block;
width:100%;
}
.category_head {
background: var(--rmuheadingbg);
color: var(--rmutextcolor);
}
.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: var(--rmualtbgcolor);
}
.cmskill {
padding-left: 1em;
}
.cmskill:nth-child(even) {
background: var(--rmualtbgcolor);
}
.cmspecialization {
padding-left: 1em;
}
/* FIXME: This doesn;t do anything?? */
.cmspecialization:nth-child(even) {
background: #dee;
}
/* A text entry meant to blend in as text */
.cminputinline {
border: none;
display: inline;
font-family: inherit;
font-size: inherit;
padding: 0px;
width: 20em;
}
.skill_specialization {
padding-left: 1em;
}
.specialization_name {
font-style: italic;
}
.repitem:nth-of-type(even) .skill_specialization {
background: var(--rmualtbgcolor);
}
.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;
}
.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: repeat(2, minmax(0, 1fr));
}
.prop_pair_heading {
font-weight: bold;
grid-column: span 2;
margin-top: 0.5em;
}
.prop_prop {
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', serif;
grid-column: 1;
}
.prop_prop_plain {
grid-column: 1;
}
.prop_value{
grid-column: 2;
}
.prop_valuef{
grid-column: 2;
display: flex;
}
/**
* 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 {
display: none;
position: absolute;
z-index: 10000;
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;
left: 5em;
transform: translateX(1px);
background-image: linear-gradient(to bottom, var(--fancycomplimentlight), var(--fancycompliment));
/* 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 {
display: none;
position: absolute;
top:0;
z-index: 10000;
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-image: linear-gradient(to bottom, var(--fancycomplimentlight), var(--fancycompliment));
}
.icon:hover + .stat_info,
.icon:hover + .skill_info
{
display: block;
}
/* 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: var(--rmualtbgcolor);
}
.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.foe {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/**
* The big popup and overlay for dialogs
*/
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,20,0.7);
transition: opacity 100ms;
z-index:10000;
margin: 2px;
}
.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:10000;
}
.overlay-skillchange {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(20,0,20,0.7);
transition: opacity 100ms;
z-index:10000;
}
.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:10000;
}
.overlay-editbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(20,0,20,0.7);
transition: opacity 100ms;
z-index:10000;
}
.toggle-editbox[value="false"] ~ .overlay-editbox {
display: none;
}
.editbox {
position: relative;
width: 70%;
min-width: 500px;
margin: 70px auto;
border-radius: 5px;
border: solid 3px black;
padding: 8px 12px 6px 12px; /* top right bottom left */
border: 2px solid rgb(226, 232, 240);
background: var(--pcfb-white);
background: linear-gradient(33deg, #f0eff0, #faf8f9);
z-index:10000;
}
.editbox .subbox {
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
padding: 4px 6px 3px 6px; /* top right bottom left */
box-sizing: border-box;
border: 1px solid rgb(226, 232, 240);
}
.editbox .buttonbar {
text-align: right;
}
/* 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', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', 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 #ffe;
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_control_toggle[value='on'] ~ div.repcontrol {
display: block;
}
/*
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;
}
.cmbaselistcount:not([value="6"]) + button {
pointer-events: none;
background: grey;
}
/*
* 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 3px 10px 0 rgba(0,0,0,0.25),
0 3px 6px 0 rgba(0,0,0,0.17),
rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset;
background-image: linear-gradient(to right bottom, rgba(241,242,11,1) 20%, rgba(248,161,27,1) 80%);
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-darkmode .sheet-rolltemplate-rmurollbox {
background-image: linear-gradient(to right bottom, #8e2de2, #4a00e0);
box-shadow: 0 2px 5px 0 rgba(241,242,11,0.5), 0 4px 6px 0 rgba(248,161,27,0.17);
}
.sheet-rolltemplate-rmucritical,
.sheet-rolltemplate-rmucriticallookup,
.sheet-rolltemplate-rmufumble,
.sheet-rolltemplate-rmufumblelookup {
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: #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-rmucriticallookup,
.sheet-rolltemplate-rmufumblelookup {
background-color: rgb(255,192,203) !important;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-rmucritical {
background-image: linear-gradient(to right bottom, #000000, #923cb5);
box-shadow: 0 2px 5px 0 rgba(241,242,11,0.5), 0 4px 6px 0 rgba(248,161,27,0.17);
}
.sheet-rolltemplate-rmucritical:hover {
box-shadow: 0 4px 7px 0 rgba(241,242,11,0.8), 0 6px 8px 0 rgba(248,161,27,0.5);
}
.sheet-rolltemplate-rmurr {
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: #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-darkmode.sheet-rolltemplate-rmurr {
background-image: linear-gradient(to right bottom, #000000, #923cb5);
box-shadow: 0 2px 5px 0 rgba(241,242,11,0.5), 0 4px 6px 0 rgba(248,161,27,0.17);
}
.sheet-rolltemplate-rmurr:hover {
box-shadow: 0 4px 7px 0 rgba(241,242,11,0.8), 0 6px 8px 0 rgba(248,161,27,0.5);
}
.sheet-rolltemplate-rmustatroll .sheet-statroll {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
.sheet-rolltemplate-rmustatroll .sheet-statroll span:nth-child(4n) {
font-style: italic;
color: rgb(128, 128, 128);
}
/* 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-darkmode .sheet-rolltemplate-rmurollbox:hover {
box-shadow: 0 3px 7px 0 rgba(241,242,11,0.8), 0 6px 8px 0 rgba(248,161,27,0.6);
}
.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 !important;
border: none !important;
padding: 0;
font-weight: inherit;
cursor: help;
font-size: 1em;
}
/* Stylesheet for roll boxes */
.sheet-rolltemplate-rmumsg {
padding: 1rem;
width: 95%;
}
.repitem:nth-of-type(even) .specificinjury {
background: var(--rmualtbgcolor);
}
/* So hide the next element if this is 0 */
.hidenext[value='0'] + * {
display: none;
}
.hidenext:not([value]) + * {
display: none;
}
/* Small attributes: two columns of two items */
.smallattrs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.scrolldivvertical {
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
width: 90%;
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
body {
/* https://colorffy.com/color-scheme-generator?color=b4e84e */
--fancylightcolor: #d7f29e;
--fancymaincolor: #b4e84e;
--fancyhighlight: #8bb33d;
--fancycomplimentlight: #b1daf4;
--fancycompliment: #4eb5e8;
--fancycomplimentdark: #3e84a8;
--fancycomplimenttextshadow: #7ea4e8;
--fancywarning: #ff264a;
--fancywarninghighlight: #ff7879;
--fancywarninglight: #ff5761;
--fancywarningtextshadow:#d72740;
}
body.sheet-darkmode {
--fancylightcolor: #7d4795;
--fancymaincolor: rgb(80, 0, 115); /* #500073 */
--fancyhighlight: rgb(42, 0, 78); /* #2a004e */
--fancycomplimentlight: #007351;
--fancycomplimentdark: #10563d;
--fancycompliment: #10563d;
--fancywarning: #a13b4a;
--fancywarninglight: #5f272e;
}
.fancybutton, .fancyselect, .fancyselectnatural {
padding: 2px 3px;
border: 0;
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', serif;
font-size: 75%;
transition: all 150ms ease-in-out;
border-radius: 6px;
border: 1px solid var(--fancyhighlight);
box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
rgba(0, 0, 0, 0.07) 0 1px 1px,
rgba(0, 0, 0, 0.07) 0 2px 2px,
rgba(0, 0, 0, 0.07) 0 4px 4px;
color: var(--rmutextcolor);
background-image: linear-gradient(180deg, var(--fancymaincolor) 0%, var(--fancyhighlight) 100%);
text-shadow: -1px 0 1px var(--fancymaincolor),
0 1px 1px var(--fancymaincolor),
1px 0 1px var(--fancymaincolor),
0 -1px 1px var(--fancymaincolor);
}
.fancywarning {
background-image: linear-gradient(180deg, var(--fancywarning) 0%, var(--fancywarninglight) 100%);
text-shadow: -1px 0 1px var(--fancywarningtextshadow),
0 1px 1px var(--fancywarningtextshadow),
1px 0 1px var(--fancywarningtextshadow),
0 -1px 1px var(--fancywarningtextshadow);
border: 1px solid var(--fancywarninghighlight);
}
.fancycompliment {
background-image: linear-gradient(180deg, var(--fancycompliment) 0%, var(--fancycomplimentlight) 100%);
text-shadow: -1px 0 1px var(--fancycomplimenttextshadow),
0 1px 1px var(--fancycomplimenttextshadow),
1px 0 1px var(--fancycomplimenttextshadow),
0 -1px 1px var(--fancycomplimenttextshadow);
border: 1px solid var(--fancycomplimenthighlight);
}
.fancyselect {
width: 10em;
}
.fancybutton.fancybuttoninline {
padding: 0.2em;
line-height: 15px;
}
.fancybutton:hover, .fancyselect:hover {
filter: brightness(1.1);
}
.fancybutton:active, .fancyselect:hover {
transform: scale(.95);
}
.fancybox {
padding: 0.5em;
border-radius: 6px;
margin-bottom: 1em;
/* Light at the top, darker on the sides. */
box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
rgba(0, 0, 0, 0.07) 0 2px 2px,
rgba(0, 0, 0, 0.07) 0 4px 4px,
rgba(0, 0, 0, 0.07) 0 6px 6px;
background-image: linear-gradient(to bottom, var(--fancycomplimentlight), var(--fancycompliment));
}
/* */
.sheet-rolltemplate-rmurollbox a[href^="~"] {
border-radius: 0.5rem;
box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset,
rgba(0, 0, 0, 0.07) 0 1px 1px,
rgba(0, 0, 0, 0.07) 0 2px 2px,
rgba(0, 0, 0, 0.07) 0 4px 4px;
text-shadow: -1px 0 1px #9a1956,
0 1px 1px #9a1956,
1px 0 1px #9a1956,
0 -1px 1px #9a1956;
background: rgb(245,39,136);
background: linear-gradient(180deg, rgba(245,39,136,1) 0%, rgba(206,15,105,1) 65%);
padding: 2px;
}
body.sheet-darkmode button,
body.sheet-darkmode input,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode textarea {
color: var(--rmutextcolor);
background: var(--rmualtbgcolor);
}
/* vim: set sts=2 sw=2 syn=css : */
/**/
.actionblock {
}
.grid4 {
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;
padding: 0.4em;
}
div.attacks {
display: grid;
grid-template-columns: 1fr 5em 5em;
}
.repitem:nth-of-type(even) .attacks {
background: var(--rmualtbgcolor);
}
/* The delightful toggles for the various selectors in the roll table popup */
.attackrollfumbletoggle { display: none; }
.attackrollspellfailtoggle { display: none; }
.attackrollcriticaltoggle { display: none; }
.attackrollcriticallookuptoggle { display: none; }
.attackrollattacktabletoggle { display: none; }
.attackrollfumblelookuptoggle { display: none; }
.attackrollfumblenotlookuptoggle { display: none; }
.attackrollfumbleshow[value='on'] ~ .attackrollfumbletoggle { display: block; }
.attackrollspellfailshow[value='on'] ~ .attackrollspellfailtoggle { display: block; }
.attackrollcriticalshow[value='on'] ~ .attackrollcriticaltoggle { display: block; }
.attackrollcriticallookupshow[value='on'] ~ .attackrollcriticallookuptoggle { display: block; }
.attackrollattacktableshow[value='on'] ~ .attackrollattacktabletoggle { display: block; }
.attackrollfumblelookupshow[value='on'] ~ .attackrollfumblelookuptoggle { display: block; }
.attackrollfumblenotlookupshow[value='on'] ~ .attackrollfumblenotlookuptoggle { display: block; }
/* This uses the direct toggle to change the button */
.attackrollroll { display: none;}
.attackrolllookup { display: none; }
.attackrollrollshow[value='on'] ~ .attackrollroll { display: block; }
.attackrolllookupshow[value='on'] ~ .attackrolllookup { display: block; }
/* vim: set sts=2 sw=2 syn=css : */
/* A normal inventory item */
.inventory {
display: grid;
/*grid-template-columns: 5em 1fr 2em 2em;*/
/* 10em unitl I get icons */
grid-template-columns: 2em 5em 1fr 10em 10em 12em;
}
.inventorytitle {
font-weight: bold;
}
.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: var(--rmuheadingbg);
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: var(--rmualtbgcolor);
}
.spellinfo {
grid-template-columns: 1fr 4em 5em 10em;
display: grid;
}
.spelllisttype {
font-family: 'PragRoman', 'myPragRoman', 'IM Fell DW Pica', 'Kaushan Script', 'Chalkduster', 'Trattatello', 'Luminari', 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;
}
.creaturetitle {
font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}
.creatureheading {
font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
grid-column:1 / -1;
text-align: center;
font-size: larger;
}
.creaturestats {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
display: grid;
}
.creaturegrid5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.creaturedefenses {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creaturerrs {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creatureattacks {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creatureactions {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creaturestatus {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creaturemove {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creatureskills {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creatureskills div.repitem {
display: inline;
}
.creaturehacks {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
}
.creaturespells {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
grid-column: span 3;
}
.creaturenotes {
padding: 0.5em; border-radius: 6px; margin-bottom: 1em; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.07) 0 2px 2px, rgba(0, 0, 0, 0.07) 0 4px 4px, rgba(0, 0, 0, 0.07) 0 6px 6px; ;
grid-column: span 3;
}
.creaturebg {
}
.creature-multicolumn {
column-count: auto;
column-width: 18em;
column-gap: 1em;
}
.creature-multicolumn div {
break-inside: avoid;
}
/* vim: set sts=4 sw=4 syn=css : */
.accordian {
appearance: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
border: none !important;
width: 100%;
height: 100%;
color: rgba(0,0,0,0);
}
.accordian:focus {
outline: none !important;
}
.accordiantoggle {
display: none;
}
.accordian:checked ~ .accordiantoggle {
display: block;
}
.accordian::after {
content: '➕';
color: rgba(0,0,0,1);
}
.accordian:checked::after {
/*content: '❯';*/
content: '➖';
color: rgba(0,0,0,1);
}
/* ----- BAR TRACK ----- */
.bar-track {
background-color: lightgrey;/* #313031; /* Dark Grey */
width: 100px;
height: 7px;
margin: 2px;
border-radius: 5px;
overflow: hidden;
place-items:center start;
display:grid;
grid-template-areas:'content';
--tensSize:0%;
--onesSize:0%;
--decimalSize:0%;
--trackGoodColor:oklab(0.520 -0.140 0.108);
--trackBadColor:oklab(0.520 -0.140 0.108);
}
.bar-progress {
/* Note that this calculation is done in this element so that the changing values of the size variables cascade to it properly and
update the value as the sizes are updated */
--trackPercentage: calc(var(--tensSize) + var(--onesSize) + var(--decimalSize));
box-sizing: border-box;
grid-area:content;
background-color: color-mix(in oklab, var(--trackGoodColor) var(--trackPercentage), var(--trackBadColor)); /* Green fading to red as damage taken */
width: var(--trackPercentage);
height: 100%;
transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out;
}
/* ----- BAR PROGRESS STEPS ----- */
/* 10's steps */
.bar-value[value^="1"]:not([value^="1."]):not([value="1"]) + .bar-track{
--tensSize: 10%;
}
.bar-value[value^="2"]:not([value^="2."]):not([value="2"]) + .bar-track{
--tensSize: 20%;
}
.bar-value[value^="3"]:not([value^="3."]):not([value="3"]) + .bar-track{
--tensSize: 30%;
}
.bar-value[value^="4"]:not([value^="4."]):not([value="4"]) + .bar-track{
--tensSize: 40%;
}
.bar-value[value^="5"]:not([value^="5."]):not([value="5"]) + .bar-track{
--tensSize: 50%;
}
.bar-value[value^="6"]:not([value^="6."]):not([value="6"]) + .bar-track{
--tensSize: 60%;
}
.bar-value[value^="7"]:not([value^="7."]):not([value="7"]) + .bar-track{
--tensSize: 70%;
}
.bar-value[value^="8"]:not([value^="8."]):not([value="8"]) + .bar-track{
--tensSize: 80%;
}
.bar-value[value^="9"]:not([value^="9."]):not([value="9"]) + .bar-track{
--tensSize: 90%;
}
.bar-value[value^="10"]:not([value^="10."]):not([value="10"]) + .bar-track{
--tensSize: 100%;
}
/* Ones sizing */
.bar-value:is([value*="1."],[value$="1"]:not([value*="."])) + .bar-track{
--onesSize: 1%;
}
.bar-value:is([value*="2."],[value$="2"]:not([value*="."])) + .bar-track{
--onesSize: 2%;
}
.bar-value:is([value*="3."],[value$="3"]:not([value*="."])) + .bar-track{
--onesSize: 3%;
}
.bar-value:is([value*="4."],[value$="4"]:not([value*="."])) + .bar-track{
--onesSize: 4%;
}
.bar-value:is([value*="5."],[value$="5"]:not([value*="."])) + .bar-track{
--onesSize: 5%;
}
.bar-value:is([value*="6."],[value$="6"]:not([value*="."])) + .bar-track{
--onesSize: 6%;
}
.bar-value:is([value*="7."],[value$="7"]:not([value*="."])) + .bar-track{
--onesSize: 7%;
}
.bar-value:is([value*="8."],[value$="8"]:not([value*="."])) + .bar-track{
--onesSize: 8%;
}
.bar-value:is([value*="9."],[value$="9"]:not([value*="."])) + .bar-track{
--onesSize: 9%;
}
/* decimal sizing */
.bar-value:is([value*=".0"],[value*=".1"]) + .bar-track{
--decimalSize: 0.1%;
}
.bar-value[value*=".2"] + .bar-track{
--decimalSize: 0.2%;
}
.bar-value[value*=".3"] + .bar-track{
--decimalSize: 0.3%;
}
.bar-value[value*=".4"] + .bar-track{
--decimalSize: 0.4%;
}
.bar-value[value*=".5"] + .bar-track{
--decimalSize: 0.5%;
}
.bar-value[value*=".6"] + .bar-track{
--decimalSize: 0.6%;
}
.bar-value[value*=".7"] + .bar-track{
--decimalSize: 0.7%;
}
.bar-value[value*=".8"] + .bar-track{
--decimalSize: 0.8%;
}
.bar-value[value*=".9"] + .bar-track{
--decimalSize: 0.9%;
}
/* */
/* https://cssloaders.github.io */
.loader{
width: 100px;
height: 75px;
margin: 0 auto;
background: #fff;
position: relative;
border-radius: 100%;
}
.loader:before {
content: '';
position: absolute;
box-sizing: border-box;
border: 15px solid transparent;
border-top: 25px solid #fff;
transform: rotate(45deg);
top: 50px;
left: -15px;
}
@keyframes flash {
0% {
background-color: rgba(255, 255, 200, 0.25);
box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 #FF3D00;
}
50% {
background-color: #FF3D00;
box-shadow: 20px 0 rgba(255, 60, 0, 0.25), -20px 0 rgba(255, 255, 200, 0.25);
}
100% {
background-color: rgba(255, 60, 0, 0.25);
box-shadow: 20px 0 #FF3D00, -20px 0 rgba(255, 60, 0, 0.25);
}
}
/**/
div.tracked {
display: flex;
flex-direction: column-reverse;
}
div.gridordered:has(> .trackerorder[value='1']) { order: 1; }
div.gridordered:has(> .trackerorder[value='2']) { order: 2; }
div.gridordered:has(> .trackerorder[value='3']) { order: 3; }
div.gridordered:has(> .trackerorder[value='4']) { order: 4; }
div.gridordered:has(> .trackerorder[value='5']) { order: 5; }
div.gridordered:has(> .trackerorder[value='6']) { order: 6; }
div.gridordered:has(> .trackerorder[value='7']) { order: 7; }
div.gridordered:has(> .trackerorder[value='8']) { order: 8; }
div.gridordered:has(> .trackerorder[value='9']) { order: 9; }
div.gridordered:has(> .trackerorder[value='10']) { order: 10; }
div.gridordered:has(> .trackerorder[value='11']) { order: 11; }
div.gridordered:has(> .trackerorder[value='12']) { order: 12; }
div.gridordered:has(> .trackerorder[value='13']) { order: 13; }
div.gridordered:has(> .trackerorder[value='14']) { order: 14; }
div.gridordered:has(> .trackerorder[value='15']) { order: 15; }
div.gridordered:has(> .trackerorder[value='16']) { order: 16; }
div.gridordered:has(> .trackerorder[value='17']) { order: 17; }
div.gridordered:has(> .trackerorder[value='18']) { order: 18; }
div.gridordered:has(> .trackerorder[value='19']) { order: 19; }
div.gridordered:has(> .trackerorder[value='20']) { order: 20; }
div.gridordered:has(> .trackerorder[value='21']) { order: 21; }
div.gridordered:has(> .trackerorder[value='22']) { order: 22; }
div.gridordered:has(> .trackerorder[value='23']) { order: 23; }
div.gridordered:has(> .trackerorder[value='24']) { order: 24; }
div.gridordered:has(> .trackerorder[value='25']) { order: 25; }
div.gridordered:has(> .trackerorder[value='26']) { order: 26; }
div.gridordered:has(> .trackerorder[value='27']) { order: 27; }
div.gridordered:has(> .trackerorder[value='28']) { order: 28; }
div.gridordered:has(> .trackerorder[value='29']) { order: 29; }
div.gridordered:has(> .trackerorder[value='30']) { order: 30; }
div.gridordered:has(> .trackerorder[value='31']) { order: 31; }
div.gridordered:has(> .trackerorder[value='32']) { order: 32; }
div.gridordered:has(> .trackerorder[value='33']) { order: 33; }
div.gridordered:has(> .trackerorder[value='34']) { order: 34; }
div.gridordered:has(> .trackerorder[value='35']) { order: 35; }
div.gridordered:has(> .trackerorder[value='36']) { order: 36; }
div.gridordered:has(> .trackerorder[value='37']) { order: 37; }
div.gridordered:has(> .trackerorder[value='38']) { order: 38; }
div.gridordered:has(> .trackerorder[value='39']) { order: 39; }
div.gridordered:has(> .trackerorder[value='40']) { order: 40; }
div.gridordered:has(> .trackerorder[value='41']) { order: 41; }
div.gridordered:has(> .trackerorder[value='42']) { order: 42; }
div.gridordered:has(> .trackerorder[value='43']) { order: 43; }
div.gridordered:has(> .trackerorder[value='44']) { order: 44; }
div.gridordered:has(> .trackerorder[value='45']) { order: 45; }
div.gridordered:has(> .trackerorder[value='46']) { order: 46; }
div.gridordered:has(> .trackerorder[value='47']) { order: 47; }
div.gridordered:has(> .trackerorder[value='48']) { order: 48; }
div.gridordered:has(> .trackerorder[value='49']) { order: 49; }
div.gridordered:has(> .trackerorder[value='50']) { order: 50; }
/* Cleared items go to the bottom */
div.gridordered:has(> .trackerorder[value='-99']) { order: -99; }
/* the top level box (under the framebox) which has the token on hte left, the
the rest on the right */
div.trackericonbox {
display: grid;
grid-template-columns: 5em 1fr;
}
/* The main rendering box: A big local box, then lots of little toggle boxes
*/
div.trackermain {
display: grid;
/* If this changes, update the trackersubbox */
grid-template-columns: 1fr repeat(4, 2em);
}
img.avatar {
width: 4em;
height: 4em;
justify-self: center;
}
.trackerboxtoggle {
appearance: none;
-webkit-tap-highlight-color: transparent;
border: none !important;
background: transparent;
}
.trackerboxtoggle:focus { outline: none !important; }
input:not(:checked).trackerboxtoggle + .trackersubbox { display: none; }
/*input:checked.trackerboxtoggle + .edittext + .editactive { display: none; }*/
.trackerboxtoggle::before {
/* box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px inset;
border: 1px solid grey;
border-radius: 4px;*/
padding:3px;
margin: 1px;
margin-right: 2px;
color: rgb(100,100,100);
}
/* defense: Shield (empty & filled), RR: bubble ball, Attack: Crosshair
spells: star thing skills: tools */
.trackerboxtoggle.trackerboxattack::before { content: "e"; font-family: "Pictos Custom"; }
.trackerboxtoggle.trackerboxrr::before { content: "L"; font-family: "Pictos"; }
.trackerboxtoggle.trackerboxspells::before { content: "t"; font-family: "Pictos Custom"; }
.trackerboxtoggle.trackerboxskills::before { content: "x"; font-family: "Pictos"; }
.trackerboxtoggle.trackerboxmovement::before { content: "x"; font-family: "Pictos"; }
.edittoggle:checked::before {
content: "3";
color: green;
}
.trackersubbox {
border: solid 1px red;
grid-column: span 5;
background: #F7DA38;
/*background: linear-gradient(33deg, #f0eff0, #faf8f9);*/
background-image: linear-gradient(135deg, rgb(255, 242, 205) 0px, rgb(255, 248, 230) 100%);
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.15) 0px 1px 2px 0px;
order: 20;
padding: 4px 6px 4px 6px; /* top right bottom left */
border-radius: var(--pcfb-border-radius);
transition: var(--pcfb-transition);
border: 1px solid rgb(226, 232, 240);
margin-bottom: 3px;
}
.threecolumnsubbox {
display: grid;
grid-template-columns: 1fr 4em 4em;
}
.twocolumnssubbox {
display: grid;
grid-template-columns: 1fr 1fr;
}
.trackersubboxdefense {
display: grid;
grid-template-columns: 6em 1fr;
}
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.span4 { grid-column: span 4; }
.span5 { grid-column: span 5; }
.span6 { grid-column: span 6; }
.span7 { grid-column: span 7; }
.spanall { grid-column: 1 / -1; }
.trackedname {
font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
}
.textbutton {
background: transparent;
border: none;
}
.textbutton:hover {
font-style: italic;
}
/* These styles are used by the PC tracker */
.pcinittracker {
display: flex;
overflow: scroll;
flex-direction: row; /* Highest first */
}
/* */
/* vim: set sts=4 sw=4 syn=css : */
Reference in New Issue View Git Blame Copy Permalink