mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Brett Nash
9cf3f9c812
Still not really usuable, but it's at a stage people can see the basic stuff it can do. - Add tracker back - Add general "asCharacter" helpers - Tracker: - Can add data using new as character - Characters now remember their tracker - for All Characters methods to tracker - Tracker can set everyones AP/round message - Tracker can roll everyones initiative (not to turn tracker though) - Track base attributes - Add option for non-tracker initiative. - Clean up build so compiled/processed files go to build
1761 lines
38 KiB
CSS
1761 lines
38 KiB
CSS
/**/
|
||
|
||
.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');
|
||
}
|
||
|
||
|
||
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;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 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%;
|
||
}
|
||
|
||
|
||
|
||
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 {
|
||
cursor: pointer;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: rgba(0,0,0,0);
|
||
}
|
||
|
||
.accordiantoggle {
|
||
display: none;
|
||
}
|
||
|
||
.accordian:checked ~ .accordiantoggle {
|
||
display: block;
|
||
}
|
||
|
||
.accordian::after {
|
||
|
||
color: rgba(0,0,0,1);
|
||
content: '➕';
|
||
color: rgba(0,0,0,1);
|
||
}
|
||
|
||
.accordian:checked::after {
|
||
border: red 1px solid;
|
||
/*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);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
img.avatar {
|
||
width: 4em;
|
||
height: 4em;
|
||
}
|
||
|
||
.repitem:nth-of-type(even) .trackedcharacter {
|
||
background-color: var(--fancylightcolor);
|
||
}
|
||
|
||
.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; }
|
||
|
||
.trackedcharacter {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
|
||
}
|
||
|
||
.trackedcharacter div {
|
||
border: 1px solid red;
|
||
}
|
||
|
||
input.trackednotes {
|
||
width: 100%;
|
||
}
|
||
|
||
.trackedname {
|
||
font-family: 'PragRoman', 'IM Fell DW Pica', fantasy, serif;
|
||
}
|
||
|
||
.textbutton {
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
.textbutton:hover {
|
||
font-style: italic;
|
||
}
|
||
|
||
|
||
|
||
|
||
/* */
|
||
|
||
|
||
/* vim: set sts=4 sw=4 syn=css : */
|
||
|