mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
2624 lines
63 KiB
CSS
2624 lines
63 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Delicious+Handrawn&family=Freckle+Face&family=Jolly+Lodger&family=Loved+by+the+King&family=Manufacturing+Consent&family=New+Tegomin&family=Pirata+One&family=Candal&family=Yuji+Mai&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'Ghastly Panic';
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
src:
|
|
local('Ghastly Panic'),
|
|
url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff2') format('woff2'),
|
|
url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff') format('woff');
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-ghastly-panic {
|
|
font-family: 'Ghastly Panic', sans-serif;
|
|
font-size: 3rem;
|
|
font-style: normal;
|
|
font-synthesis: none;
|
|
font-weight: 400;
|
|
letter-spacing: 4px;
|
|
line-height: 3rem;
|
|
padding: 5px 3px 5px 8px;
|
|
text-shadow: 0 0 0 #000, 0 0 0 #000;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-jolly-lodger {
|
|
font-family: "Jolly Lodger", system-ui;
|
|
font-size: 2rem;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-manufacturing-consent {
|
|
font-family: "Manufacturing Consent", system-ui;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-new-tegomin {
|
|
font-family: "New Tegomin", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-pirata-one {
|
|
font-family: "Pirata One", system-ui;
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-special-elite {
|
|
font-family: "Special Elite", system-ui;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-yuji-mai {
|
|
font-family: "Yuji Mai", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-loved {
|
|
font-family: "Loved by the King", cursive;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-candal {
|
|
font-family: "Candal", sans-serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .font-freckle-face {
|
|
font-family: "Freckle Face", system-ui;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet *,
|
|
.ui-dialog .tab-content .charsheet *::before,
|
|
.ui-dialog .tab-content .charsheet *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.ui-dialog .characterviewer {
|
|
padding-inline: 4px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet {
|
|
padding: 0;
|
|
}
|
|
|
|
.sheet-darkmode .ui-dialog .tab-content .charsheet {
|
|
background-color: #222;
|
|
color: #c1c1c1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper {
|
|
container-type: inline-size;
|
|
max-width: 1280px;
|
|
overflow-x: clip;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .show-creature {
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature:checked ~ .show-creature {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
outline: 2px solid #000;
|
|
outline-offset: -2px;
|
|
padding-right: 1em;
|
|
width: fit-content;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature:checked ~ .show-pc {
|
|
display: none;
|
|
}
|
|
|
|
/* set min/max width for show-creature */
|
|
@media (max-width: 635px) {
|
|
.ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) {
|
|
min-width: 634px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 959px) {
|
|
.ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) {
|
|
max-width: 960px;
|
|
}
|
|
}
|
|
|
|
/* collapse sheet for smaller viewports */
|
|
@container (max-width: 858px) {
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .small-nav {
|
|
grid-template-rows: 2.25em;
|
|
}
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-pc {
|
|
grid-template-columns: minmax(442px, 56%) auto;
|
|
overflow-y: visible;
|
|
& .col1 {
|
|
& .col1-a {
|
|
background-color: #eb3143;
|
|
border-top: 3em solid #eb3143;
|
|
min-width: 160px;
|
|
}
|
|
& .col1-a > section {
|
|
z-index: 3;
|
|
}
|
|
& section.name,
|
|
section.nickname,
|
|
section.class {
|
|
max-width: clamp(90%, 19.875vw, 16em);
|
|
}
|
|
& .col1-footer {
|
|
margin-left: 1.5em;
|
|
}
|
|
& .header-left {left:-3em;}
|
|
& .swiftness, .spirit, .vigor, .resilience, .honour {margin-right: -8%;}
|
|
& .honour {left: -6em;}
|
|
}
|
|
& .col1-b {
|
|
min-width: 235px;
|
|
z-index: 1;
|
|
& .logo {transform: scale(.93);}
|
|
& .resilience::after {min-width: 17em;}
|
|
}
|
|
& .col2 {
|
|
background-color: #fff;
|
|
background-image: linear-gradient(to right, #efefef, #fff);
|
|
border-top-width: 3em;
|
|
min-width: 442px;
|
|
padding-top: 3em;
|
|
& .weapons {
|
|
margin-top: -3em;
|
|
& .weapons-grid {
|
|
max-width: 95%;
|
|
}
|
|
}
|
|
& .legal-gutter {
|
|
position: relative;
|
|
top: -3em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sheet-darkmode .ui-dialog .tab-content .charsheet .wrapper .page-view ~ .show-pc {
|
|
& .col1 {
|
|
& .col1-b {
|
|
background-color: #222;
|
|
color: #c1c1c1;
|
|
}
|
|
}
|
|
& .col2,
|
|
.legal-gutter {
|
|
background-color: #222;
|
|
background-image: none;
|
|
color: #c1c1c1;
|
|
}
|
|
}
|
|
|
|
/* sheet left */
|
|
.charsheet .wrapper .page-view[value="0"]:checked ~ .show-pc {
|
|
& .col1 {
|
|
z-index: 1;
|
|
& .col1-b {
|
|
background-color: #fff;
|
|
box-shadow: 2px 0 1px 1px #000;
|
|
}
|
|
}
|
|
& .col2 {
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
margin-left: calc(100% - 442px);
|
|
filter: brightness(0.25) blur(3px);
|
|
outline: 1px solid #333;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
}
|
|
|
|
/* sheet right */
|
|
.charsheet .wrapper .page-view[value="1"]:checked ~ .show-pc {
|
|
& .col1 {
|
|
filter: brightness(0.25) blur(3px);
|
|
outline: 1px solid #333;
|
|
pointer-events: none;
|
|
}
|
|
& .col2 {
|
|
box-shadow: -5px 2px 5px 0 #000;
|
|
margin-left: calc(100% - 442px);
|
|
z-index: 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@container (max-width: 456px) {
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-pc {
|
|
& .col1 {
|
|
& .col1-b {box-shadow: none;}
|
|
}
|
|
& .col2 {box-shadow: none;}
|
|
}
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-pc,
|
|
.ui-dialog .tab-content .charsheet .show-creature {
|
|
background-image: linear-gradient(to right, #efefef, #fff);
|
|
display: grid;
|
|
font-size: 1.2rem;
|
|
grid-template-areas: "col1 col2";
|
|
grid-template-columns: 49% auto;
|
|
overflow: clip;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-darkmode .ui-dialog .tab-content .charsheet .show-pc,
|
|
.sheet-darkmode .ui-dialog .tab-content .charsheet .show-creature {
|
|
background-color: #363636;
|
|
background-image: none;
|
|
color: #c1c1c1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-pc .col2::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_right.webp');
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
background-size: 250px 48px;
|
|
content: '';
|
|
height: 4em;
|
|
position: absolute;
|
|
top: -3em;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_right.webp');
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
background-size: 250px 78px;
|
|
content: '';
|
|
height: 7em;
|
|
position: absolute;
|
|
top: -3em;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature .col2::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_logo_small.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
content: '';
|
|
height: 5em;
|
|
left: 36%;
|
|
position: absolute;
|
|
top: -3em;
|
|
width: 11em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature::after {
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* shown at smaller viewport size */
|
|
.charsheet .small-nav {
|
|
background-color: #eb3143;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 0em;
|
|
overflow: clip;
|
|
place-items: center;
|
|
position: relative;
|
|
transform-origin: top;
|
|
transform: scale(1);
|
|
transition: grid-template-rows .4s ease-in-out, transform .3s ease-in-out;
|
|
z-index: 4;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .small-nav:hover,
|
|
.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus,
|
|
.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus-within {
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
.charsheet .small-nav label {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.charsheet .small-nav label span {
|
|
color: #000;
|
|
font-size: 2.5rem;
|
|
padding: 4px 0px 4px 4px;
|
|
}
|
|
|
|
.charsheet .page-view[value="0"]:checked ~ .small-nav label span::before {
|
|
content: "►";
|
|
}
|
|
|
|
.charsheet .page-view[value="1"]:checked ~ .small-nav label span::before {
|
|
content: "◄";
|
|
}
|
|
|
|
.charsheet .page-view[value="0"]:checked ~ .small-nav label:hover span {
|
|
text-shadow: 2px 0 0px #FFF !important;
|
|
}
|
|
|
|
.charsheet .page-view[value="1"]:checked ~ .small-nav label:hover span {
|
|
text-shadow: -2px 0px 0px #FFF !important;
|
|
}
|
|
|
|
.charsheet .page-view[value="0"] ~ .small-nav label,
|
|
.charsheet .page-view[value="1"] ~ .small-nav label {
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .page-view[value="0"]:checked ~ .small-nav label:has(input:checked),
|
|
.charsheet .page-view[value="1"]:checked ~ .small-nav label:has(input:checked) {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .col1,
|
|
.charsheet .col1-a,
|
|
.charsheet .col1-b,
|
|
.charsheet .col2 {
|
|
align-content: start;
|
|
display: grid;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .col1 {
|
|
align-items: self-start;
|
|
display: grid;
|
|
grid-area: col1;
|
|
grid-template-areas: "col1-a col1-b";
|
|
grid-template-rows: 100%;
|
|
filter: brightness(1) blur(0px);
|
|
transition: filter 0.5s ease-in-out;
|
|
z-index: 0;
|
|
}
|
|
|
|
.charsheet .show-creature .col1 {
|
|
z-index: 2;
|
|
}
|
|
|
|
.charsheet .col2 {
|
|
border-top: 3em solid #000;
|
|
filter: brightness(1) blur(0px);
|
|
grid-area: col2;
|
|
margin-inline: auto;
|
|
row-gap: 10px;
|
|
transition: filter 0.5s ease-in-out;
|
|
z-index: 0;
|
|
grid-template-areas:
|
|
"weapons weapons legal"
|
|
"battle battle legal"
|
|
"armour armour legal"
|
|
"equipment equipment legal"
|
|
"tenets hp-box legal"
|
|
"tenets hp-box2 legal";
|
|
}
|
|
|
|
.charsheet .show-creature .col2 {
|
|
grid-template-areas: "weapons weapons"
|
|
"battle battle"
|
|
"armour hp-box";
|
|
width: 100%;
|
|
z-index: 2;
|
|
}
|
|
|
|
.charsheet .col1-a {
|
|
align-items: self-start;
|
|
border-top: 3em solid #eb3143;
|
|
color: #fff;
|
|
grid-area: col1-a;
|
|
grid-template-rows: min-content min-content min-content min-content min-content min-content 1fr min-content;
|
|
padding: 0 0 0 2em;
|
|
min-width: 210px;
|
|
row-gap: 1em;
|
|
grid-template-areas: "header-left"
|
|
"name"
|
|
"nickname"
|
|
"class"
|
|
"description"
|
|
"features"
|
|
"texts"
|
|
"footer";
|
|
}
|
|
|
|
.charsheet .show-creature .col1-a {
|
|
border-top: 0;
|
|
grid-template-rows: auto;
|
|
padding-top: .75em;
|
|
grid-template-areas:
|
|
"name"
|
|
"description"
|
|
"features";
|
|
}
|
|
|
|
.charsheet .col1-a::before {
|
|
background-color: #eb3143;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_col_1.webp');
|
|
background-repeat: repeat-y;
|
|
background-size: 200px 600px;
|
|
content: '';
|
|
height: 100%;
|
|
position: absolute;
|
|
width: 100%;
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.charsheet .col1-a > section {
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .col1-b {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_trunk.webp');
|
|
background-position: 0 -110px;
|
|
background-repeat: repeat-y;
|
|
background-size: 104PX 600PX;
|
|
border-top: 3em solid #000;
|
|
grid-area: col1-b;
|
|
justify-items: center;
|
|
grid-template-areas:
|
|
"logo"
|
|
"swiftness"
|
|
"spirit"
|
|
"vigor"
|
|
"resilience"
|
|
"honour";
|
|
}
|
|
|
|
.charsheet .legal-gutter {
|
|
grid-area: legal;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.charsheet .legal-margin {
|
|
font-size: .9rem;
|
|
text-align: center;
|
|
text-orientation: upright;
|
|
white-space: nowrap;
|
|
writing-mode: sideways-lr;
|
|
}
|
|
|
|
.charsheet .header-left {
|
|
background-color: #eb3143;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_left.webp');
|
|
background-position: top right;
|
|
background-repeat: no-repeat;
|
|
grid-area: header-left;
|
|
height: 5em;
|
|
left: -9px;
|
|
max-width: 286px;
|
|
position: absolute;
|
|
top: -35.5px;
|
|
width: clamp(180px, 22vw, 100%);
|
|
/* z-index: 1; */
|
|
}
|
|
|
|
.charsheet .col1-a .section-header {
|
|
color: #fff;
|
|
text-shadow: 1px 1px 1px #111;
|
|
}
|
|
|
|
.charsheet .name {grid-area: name;}
|
|
.charsheet .nickname {grid-area: nickname;}
|
|
.charsheet .class {grid-area: class;}
|
|
|
|
.ui-dialog .tab-content .charsheet section.name,
|
|
.ui-dialog .tab-content .charsheet section.nickname,
|
|
.ui-dialog .tab-content .charsheet section.class {
|
|
align-items: baseline;
|
|
display: inline-grid;
|
|
grid-template-columns: 1.75em 1fr 1fr;
|
|
justify-content: left;
|
|
line-height: normal;
|
|
margin-inline: auto;
|
|
margin-left: 0;
|
|
max-width: 24em;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .charsheet .col1-a .name input[type="text"],
|
|
.ui-dialog .charsheet .col1-a .nickname input[type="text"],
|
|
.ui-dialog .charsheet .col1-a .name input[type="text"],
|
|
.ui-dialog .charsheet .col1-a .nickname input[type="text"],
|
|
.ui-dialog .charsheet .col1-a .class input[type="text"] {
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .name-style {
|
|
transform: scaleY(1.25);
|
|
color: #fff;
|
|
text-shadow: 1px 1px 1px #111;
|
|
}
|
|
|
|
.ui-dialog .charsheet .class-column-one {
|
|
grid-row: 1/3;
|
|
padding: 0;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
|
|
.charsheet .description {
|
|
grid-area: description;
|
|
width: calc(100% + 1em);
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .features {
|
|
grid-area: features;
|
|
width: calc(100% + 1em);
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature .name,
|
|
.ui-dialog .tab-content .charsheet .show-creature .description,
|
|
.ui-dialog .tab-content .charsheet .show-creature .features {
|
|
min-width: 95%;
|
|
width: calc(100% - 1em);
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .texts {
|
|
grid-area: texts;
|
|
margin: 1em -5em 0 -2em;
|
|
max-width: 360px;
|
|
min-width: 280px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.ui-dialog .charsheet .kamis-style {
|
|
font-family: "Pirata One";
|
|
font-size: 1.75rem;
|
|
font-weight: normal;
|
|
line-height: 1.75rem;
|
|
}
|
|
|
|
.charsheet .texts > div:first-child {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_top.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 9em;
|
|
margin: 0;
|
|
padding: 3em 1em 0 2em;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] .repitem {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_middle.webp');
|
|
background-repeat: round;
|
|
background-size: 100% 100%;
|
|
margin: 0;
|
|
padding: .25em 1.75em .25em 1.75em;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] + .repcontrol {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_bottom.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 5em;
|
|
height: 5em;
|
|
margin: 0;
|
|
padding: .5em 2em 0 2em;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .charsheet .texts-style {
|
|
color: revert;
|
|
display: block;
|
|
font-family: 'Loved by the King';
|
|
font-size: 2.5rem;
|
|
line-height: 4rem;
|
|
padding: 0 2px 0 2px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .texts .section-notes:not(:last-child) {
|
|
color: #111;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_texts"] .repitem .flex-row {
|
|
border-top: 1px solid #111;
|
|
}
|
|
|
|
.charsheet .col1-footer {
|
|
align-self: end;
|
|
display: grid;
|
|
grid-area: footer;
|
|
margin-bottom: 10px;
|
|
margin-inline: auto;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .col1-footer button[type="roll"]:hover {
|
|
background-color: #111;
|
|
color: #fff;
|
|
outline: 1px solid #111;
|
|
}
|
|
|
|
.charsheet .credits {
|
|
aspect-ratio: 3;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/mork_borg.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
height: 50px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.charsheet .virtues {
|
|
bottom: -4px;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
margin: auto;
|
|
position: relative;
|
|
right: -4em;
|
|
}
|
|
|
|
.ui-dialog .charsheet .virtues .virtues-box {
|
|
position: absolute;
|
|
top: -3em;
|
|
right: -2.5em;
|
|
}
|
|
|
|
.ui-dialog .charsheet .virtues .virtues-box button[type="roll"] {
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
position: relative;
|
|
transform: rotate(30deg);
|
|
z-index: 2;
|
|
}
|
|
|
|
.ui-dialog .charsheet .virtues-style {
|
|
color: #fff;
|
|
font-family: 'Freckle Face';
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
line-height: 3rem;
|
|
letter-spacing: 1px;
|
|
text-shadow: 1px 2px 1px #000;
|
|
transform: scaleY(1.75);
|
|
}
|
|
|
|
.ui-dialog .charsheet .die-style {
|
|
font-family: 'Manufacturing Consent';
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ui-dialog .charsheet .swiftness {
|
|
grid-area: swiftness;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .charsheet .swiftness > button {
|
|
transform: rotate(6deg);
|
|
}
|
|
|
|
.ui-dialog .charsheet .swiftness .ability-base-mod::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_swiftness.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: '';
|
|
height: 3.75em;
|
|
position: absolute;
|
|
top: -4px;
|
|
left: -15px;
|
|
width: 6em;
|
|
}
|
|
|
|
.charsheet .spirit {grid-area: spirit;}
|
|
|
|
.charsheet .spirit > button {
|
|
transform: rotate(4deg);
|
|
}
|
|
|
|
.ui-dialog .charsheet .spirit .ability-base-mod::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_spirit.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: '';
|
|
height: 4.2em;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: -8px;
|
|
width: 5em;
|
|
}
|
|
|
|
.charsheet .vigor {grid-area: vigor;}
|
|
|
|
.ui-dialog .charsheet .vigor .ability-base-mod::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_vigor.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: '';
|
|
height: 4.5em;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: -8px;
|
|
width: 5em;
|
|
}
|
|
|
|
.charsheet .resilience {grid-area: resilience;}
|
|
|
|
.charsheet .resilience > button {
|
|
transform: rotate(2deg);
|
|
}
|
|
|
|
.ui-dialog .charsheet .resilience .ability-base-mod::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_resilience.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
content: '';
|
|
height: 5em;
|
|
position: absolute;
|
|
top: -6px;
|
|
left: -8px;
|
|
width: 5em;
|
|
}
|
|
|
|
.charsheet .swiftness::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_swiftness.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: clamp(13.75em, 18vw, 19em) 3em;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 3em;
|
|
left: 0;
|
|
margin: 1.5em 0 0 4.7em;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .spirit::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_spirit.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: clamp(13.75em, 18vw, 19em) 3em;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 3em;
|
|
left: 0;
|
|
margin: -.5em 0 0 4em;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .vigor::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_vigor.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: clamp(13.75em, 18vw, 19em) 3em;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 3em;
|
|
left: 0;
|
|
margin: -.5em 0 0 3.25em;
|
|
position: absolute;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .resilience::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_dashed_line.webp');
|
|
background-size: cover;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 2em;
|
|
left: 0;
|
|
margin: 1em 0 0 4.5em;
|
|
min-width: clamp(14em, calc(100% - 6vw), 15.5em);
|
|
position: absolute;
|
|
}
|
|
|
|
.charsheet .honour {
|
|
display: inline-flex;
|
|
grid-area: honour;
|
|
left: -5em;
|
|
top: 3em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .honour-grid {
|
|
column-gap: clamp(2px, calc(2vw - 18px), 8px);
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
margin-inline: auto;
|
|
position: relative;
|
|
row-gap: clamp(16px, calc(2vw - 4px), 21px);
|
|
top: 1em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour .honour-grid label {
|
|
height: 18px;
|
|
margin: auto;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 20px;
|
|
margin-inline: 3px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour-style {
|
|
display: flex;
|
|
font-size: 2.25rem;
|
|
margin-inline: auto;
|
|
position: absolute;
|
|
right: -1.15em;
|
|
top: 8px;
|
|
transform: scaleY(1.75);
|
|
width: min-content;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_kanji.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
content: '';
|
|
display: inline-flex;
|
|
height: 34px;
|
|
left: 66%;
|
|
position: absolute;
|
|
top: 5px;
|
|
width: 25px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour-grid label:first-child,
|
|
.ui-dialog .charsheet .honour-grid label:nth-child(10) {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour .honour-grid label:last-child {
|
|
grid-column: span 2;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour-grid label:first-child::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_1_image.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
content: '';
|
|
height: 39px;
|
|
left: clamp(21px, calc(2.5vw), 30px);
|
|
position: absolute;
|
|
top: -15px;
|
|
width: 30px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour-grid label:nth-child(10)::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_10_image.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
content: '';
|
|
height: 38px;
|
|
left: clamp(21px, calc(2.5vw), 30px);
|
|
position: absolute;
|
|
top: -12px;
|
|
width: 32px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .honour-grid label:nth-child(20)::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_20_image.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
content: '';
|
|
height: 36px;
|
|
left: clamp(17px, calc(2vw), 26px);
|
|
position: absolute;
|
|
top: -7px;
|
|
width: 34px;
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .honour-grid label:first-child::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_1_image_darkmode.webp');
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .honour-grid label:nth-child(10)::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_10_image_darkmode.webp');
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .honour-grid label:nth-child(21)::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_20_image_darkmode.webp');
|
|
}
|
|
|
|
.charsheet .woes {
|
|
align-content: end;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_woes.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: 0 0;
|
|
bottom: -1px;
|
|
color: #fff;
|
|
grid-area: woes;
|
|
left: 0;
|
|
margin: 0 0 0 2em;
|
|
min-height: 10em;
|
|
padding: 0 0 .5em 1.2em;
|
|
position: absolute;
|
|
width: 20em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .weapons {
|
|
grid-area: weapons;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .weapons-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(9em, 2fr) minmax(4em, 1fr) minmax(5em, 1fr) 3em minmax(min-content, auto);
|
|
grid-template-rows: 4.5em 2em 2em auto;
|
|
margin-inline: auto;
|
|
max-width: 95%;
|
|
place-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .show-creature .weapons-grid {
|
|
column-gap: 4px;
|
|
grid-template-columns: minmax(12em, 3fr) minmax(4em, 1fr) minmax(5em, 1fr) minmax(4em, 1fr) minmax(7.5em, 1fr);
|
|
grid-template-rows: auto;
|
|
margin-inline: 1em;
|
|
margin-top: 3em;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.charsheet .weapons-grid .sword-image {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_sword.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 95% 100%;
|
|
background-position: center;
|
|
height: 2.85em;
|
|
left: 1em;
|
|
max-width: 38em;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .charsheet .dueling-style {
|
|
font-family: "Special Elite";
|
|
font-weight: normal;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.charsheet .weapons-grid .column-header {
|
|
display: inline-block;
|
|
font-size: 1.5rem;
|
|
font-variant-caps: all-petite-caps;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapon-type:not(:checked) + .show-ranged {
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapon-type:checked + .show-ranged {
|
|
display: grid;
|
|
grid-template-rows: 2rem;
|
|
left: -2em;
|
|
margin-top: -3px;
|
|
position: relative;
|
|
transform: scale(.85);
|
|
transform-origin: right;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-ranged label {
|
|
align-content: center;
|
|
display: inline-block;
|
|
margin-inline: auto;
|
|
padding-inline: 2px;
|
|
width: min-content;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer,
|
|
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem,
|
|
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapons-grid-row {
|
|
display: grid;
|
|
grid-column: 1/-1;
|
|
grid-template-columns: subgrid;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapons-grid .repcontrol {
|
|
grid-column: 1/-1;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapons-grid select {
|
|
font-size: 1.2rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.charsheet .weapons-grid button span {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.ui-dialog .charsheet .weapon-notes-style {
|
|
color: #c1c1c1;
|
|
column-gap: 2px;
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(6, min-content);
|
|
justify-content: center;
|
|
margin-inline: auto;
|
|
position: absolute;
|
|
top: -1.65em;
|
|
width: 102%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapon-notes-style label input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapon-notes-style label {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
height: 1.85rem;
|
|
justify-content: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapon-notes-style label span {
|
|
align-items: center;
|
|
color: #c1c1c1;
|
|
display: inline-flex;
|
|
font-size: 1.2rem;
|
|
font-weight: normal;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature-style {
|
|
position: absolute;
|
|
right: 4px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style input[type="checkbox"] {
|
|
display: block;
|
|
height: 1.2em;
|
|
left: -1em;
|
|
margin-inline: 2px;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 8em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature-style label {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .show-creature-style label span {
|
|
padding-inline: 1px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .pc-sheet,
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input) .pc-sheet + span,
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .creature-sheet {
|
|
background-color: transparent;
|
|
color: #c1c1c1;
|
|
font-size: 1rem;
|
|
opacity: .5;
|
|
transform: scale(1);
|
|
transition: transform .2s ease-in-out;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .pc-sheet,
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .creature-sheet {
|
|
background-color: transparent;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
opacity: 1;
|
|
padding-inline: 5px;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)):hover .creature-sheet,
|
|
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked):hover .pc-sheet {
|
|
background-color: transparent;
|
|
color: #eb3143;
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.ui-dialog .charsheet .weapon-style {
|
|
bottom: -1rem;
|
|
font-family: 'Jolly Lodger';
|
|
font-size: 3rem;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
letter-spacing: 2px;
|
|
margin-inline: auto;
|
|
position: relative;
|
|
top: 12%;
|
|
left: 18%;
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
.ui-dialog .charsheet .show-creature .weapon-style {
|
|
left: auto;
|
|
top: 0;
|
|
transform: none;
|
|
}
|
|
|
|
.charsheet .weapon-actions {
|
|
column-gap: 2px;
|
|
display: flex;
|
|
}
|
|
|
|
.charsheet .battle {
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
grid-area: battle;
|
|
line-height: 2;
|
|
margin-inline: auto;
|
|
max-width: 376px;
|
|
padding: 0 10px 5px 10px;
|
|
position: relative;
|
|
text-align: center;
|
|
top: -5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .charsheet .defence-style {
|
|
font-family: 'New Tegomin';
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
padding: 0 0 3px 0;
|
|
}
|
|
|
|
.charsheet .armour {
|
|
align-items: center;
|
|
column-gap: 5px;
|
|
display: grid;
|
|
grid-area: armour;
|
|
grid-template-columns: min-content minmax(15em, 20em) minmax(1em, 3em) 8em;
|
|
grid-template-rows: 4em 1.2em 1.2em;
|
|
padding-block: 1em;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .show-creature .armour {
|
|
grid-template-columns: minmax(10em, min-content) minmax(10em, auto);
|
|
grid-template-rows: 3em 2em 3em;
|
|
margin-inline: auto;
|
|
margin-left: 0;
|
|
padding: 0 2em 0 0;
|
|
width: 100%;
|
|
justify-items: end;
|
|
}
|
|
|
|
.charsheet .show-creature .armour .span-2 {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
margin-inline: auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.charsheet .show-creature .armour-tier-grid {
|
|
left: 0;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
width: 15em;
|
|
}
|
|
|
|
.charsheet .armour .section-notes {
|
|
padding-left: 3em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.charsheet .show-pc .armour::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_kusarigama.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 17em;
|
|
content: '';
|
|
display: block;
|
|
height: 17em;
|
|
left: 1em;
|
|
max-width: 49em;
|
|
position: absolute;
|
|
top: -7em;
|
|
width: 97%;
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .armour::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_kusarigama_darkmode.webp');
|
|
}
|
|
|
|
.ui-dialog .charsheet .armour-style {
|
|
font-family: 'Pirata One';
|
|
font-size: 3rem;
|
|
font-weight: normal;
|
|
left: 1em;
|
|
position: relative;
|
|
width: min-content;
|
|
}
|
|
|
|
.ui-dialog .charsheet .show-creature .armour-style {
|
|
left: 0;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet label:has(.damaged-style) {
|
|
display: inline-flex;
|
|
width: 5.5em;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .damaged-style {
|
|
font-family: 'Loved by the King';
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
line-height: 1.5rem;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.charsheet .equipment {
|
|
border: 12px solid transparent;
|
|
border-top: 12px;
|
|
display: grid;
|
|
grid-area: equipment;
|
|
grid-template-columns: minmax(5em, 1fr) minmax(10em, 3fr) min-content;
|
|
grid-template-rows: 1.25em;
|
|
margin: 4.5em 2% auto auto;
|
|
min-height: 19em;
|
|
outline: 7px solid #333;
|
|
outline-offset: -8px;
|
|
width: 90%;
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .equipment {
|
|
outline-color: #000;
|
|
}
|
|
|
|
.charsheet .equipment-notes {
|
|
left: -6em;
|
|
min-width: 15.75em;
|
|
position: relative;
|
|
text-align: right;
|
|
top: -3.5em;
|
|
}
|
|
|
|
.ui-dialog .charsheet .equipment-style {
|
|
-webkit-text-stroke-color: #000;
|
|
-webkit-text-stroke-width: 1px;
|
|
align-self: center;
|
|
color: #fff;
|
|
font-family: 'Candal';
|
|
font-size: 2.5rem;
|
|
letter-spacing: .4rem;
|
|
margin-left: -1rem;
|
|
position: relative;
|
|
right: -1rem;
|
|
text-shadow: 2px 3px 0 #000;
|
|
top: -1.5em;
|
|
transform: scaleY(1.5);
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .ryo {
|
|
background-color: #eb3143;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ryo_background.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
border-radius: 40%;
|
|
color: #fff;
|
|
height: 6.25em;
|
|
left: -1.4em;
|
|
outline: 1px solid #fff;
|
|
outline-offset: -4px;
|
|
position: relative;
|
|
top: -1.5em;
|
|
transform: rotateZ(7deg);
|
|
width: 4em;
|
|
}
|
|
|
|
.ui-dialog .charsheet .ryo span,
|
|
.ui-dialog .charsheet .ryo span.kanji-text {
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.charsheet .consumables {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: nowrap;
|
|
height: 100%;
|
|
justify-content: center;
|
|
margin: 2em auto auto 2px;
|
|
row-gap: 10px;
|
|
width: 4em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .consumables > label {
|
|
border-radius: 50%;
|
|
box-shadow: 2px 1px 2px #eb3143;
|
|
height: 3.5em;
|
|
min-width: 3.5em;
|
|
outline: 2px solid #eb3143;
|
|
outline-offset: 2px;
|
|
padding-top: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .consumables label input.input-width-small {
|
|
font-size: 1.85rem;
|
|
height: auto;
|
|
margin-block: -2px;
|
|
max-width: 32px;
|
|
min-width: auto;
|
|
width: 32px;
|
|
}
|
|
|
|
.charsheet .tenets {
|
|
grid-area: tenets;
|
|
left: .5em;
|
|
margin-inline: auto;
|
|
position: relative;
|
|
top: 2em;
|
|
width: calc(100% - 1vw);
|
|
}
|
|
|
|
|
|
|
|
.ui-dialog .charsheet .haiku-style {
|
|
font-family: 'Special Elite';
|
|
font-size: 2rem;
|
|
line-height: 2rem;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .chance-style {
|
|
font-family: 'Jolly Lodger';
|
|
font-size: 2rem;
|
|
font-weight: normal;
|
|
letter-spacing: 1px;
|
|
line-height: 2rem;
|
|
padding: 2px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .wrapper .tenets-grid input[type="text"] {
|
|
box-shadow: 0px 2px 2px -2px #000;
|
|
border: none;
|
|
max-width: 90%;
|
|
}
|
|
|
|
.charsheet .hp-box {
|
|
display: grid;
|
|
grid-area: hp-box;
|
|
grid-template-columns: min-content min-content 1fr;
|
|
grid-template-areas:
|
|
"resurrection meditation hpCurrMax"
|
|
"resurrection meditation hpCurrMax"
|
|
"resurrection meditation seppuku";
|
|
padding-inline: 2px;
|
|
}
|
|
|
|
.charsheet .show-creature .hp-box {
|
|
grid-template-areas: none;
|
|
margin: 0 0 .5em -1em;
|
|
position: relative;
|
|
}
|
|
|
|
.charsheet .resurrection {grid-area: resurrection;}
|
|
.charsheet .meditation {grid-area: meditation;}
|
|
|
|
.charsheet .hpCurrMax {
|
|
display: grid;
|
|
grid-area: hpCurrMax;
|
|
grid-template-columns: 1fr 2px 1fr;
|
|
grid-template-rows: 3.25rem 1.25rem 4.5rem auto;
|
|
justify-items: center;
|
|
margin: auto auto 5px auto;
|
|
outline: 4px solid #eb3143;
|
|
padding: 0 0 2px 0;
|
|
width: 12em;
|
|
}
|
|
|
|
.charsheet .hpCurrMax .column-header {
|
|
color: #eb3143;
|
|
margin-inline: -5px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .red-background,
|
|
.ui-dialog .charsheet .red-background span {
|
|
background-color: #eb3143;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
display: inline-flex;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.ui-dialog .charsheet .hit-points-style {
|
|
transform: scaleY(1.5);
|
|
display: inline-block;
|
|
font-size: 2.25rem;
|
|
font-weight: normal;
|
|
font-family: 'Special Elite';
|
|
max-height: 2.25rem;
|
|
overflow: hidden;
|
|
margin: 3px 0 0 0;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .infected-style {
|
|
display: block;
|
|
font-size: 1.65rem;
|
|
letter-spacing: 3px;
|
|
margin-block: 1px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .seppuku .infected-style {
|
|
transform: scaleY(1.5);
|
|
}
|
|
|
|
.charsheet .hpCurrMax .red-background ~ div {
|
|
margin-block: 1px;
|
|
}
|
|
|
|
.charsheet .seppuku {
|
|
display: grid;
|
|
grid-area: seppuku;
|
|
grid-template-rows: 3rem;
|
|
}
|
|
|
|
.charsheet .seppuku label:first-child::before {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_seppuku_image.webp');
|
|
background-position-y: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 12px;
|
|
content: '';
|
|
height: 21px;
|
|
margin-left: -22px;
|
|
position: absolute;
|
|
width: 12em;
|
|
z-index: 0;
|
|
}
|
|
|
|
.charsheet .seppuku-box {
|
|
margin: auto;
|
|
margin-top: 5px;
|
|
max-width: 12em;
|
|
outline: 1px solid #333;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input,
|
|
.ui-dialog .tab-content .charsheet select {
|
|
background-color: #e6e6e6ab;
|
|
color: #000;
|
|
height: 1.75em;
|
|
margin: 2px;
|
|
padding: 0 2px 0 2px;
|
|
vertical-align: middle;
|
|
width: auto;
|
|
z-index: 0;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet button:focus,
|
|
.ui-dialog .tab-content .charsheet input:hover,
|
|
.ui-dialog .tab-content .charsheet input:focus,
|
|
.ui-dialog .tab-content .charsheet input[type="checkbox"]:hover,
|
|
.ui-dialog .tab-content .charsheet input[type="checkbox"]:focus,
|
|
.ui-dialog .tab-content .charsheet textarea:hover,
|
|
.ui-dialog .tab-content .charsheet textarea:focus,
|
|
.ui-dialog .tab-content .charsheet select:hover,
|
|
.ui-dialog .tab-content .charsheet select:focus {
|
|
background-clip : border-box;
|
|
background-color: lightgoldenrodyellow;
|
|
box-shadow: 0px 0px 4px #fff;
|
|
color: #111;
|
|
outline: 2px solid #555;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type="text"] {
|
|
display: inline-flex;
|
|
margin-inline: auto;
|
|
min-width: 3em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet textarea {
|
|
background-color: #e6e6e6ab;
|
|
color: #000;
|
|
height: 9em;
|
|
margin: auto;
|
|
max-height: 32em;
|
|
min-height: 3em;
|
|
resize: vertical;
|
|
scrollbar-width: thin;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontainer .repitem {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .flex-row {
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .flex-row > * {
|
|
margin-inline: 2px;
|
|
margin-block: 2px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .flex-inline-row {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
gap: 2px;
|
|
margin: auto;
|
|
padding-bottom: 2px;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .flex-inline-row > * {
|
|
margin-inline: 2px;
|
|
margin-block: 2px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet label {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.charsheet label:has(input[type="checkbox"]) span {
|
|
font-family: 'Nunito', serif;
|
|
padding: 0 4px 0 4px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet label:has(button):hover,
|
|
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover,
|
|
.ui-dialog .tab-content .charsheet label:has(input[type="radio"]):hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input[type="radio"] {
|
|
padding: inherit;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repitem textarea {
|
|
height: 1.75em;
|
|
line-height: 1.25em;
|
|
max-height: 12em;
|
|
min-height: 1.75em;
|
|
padding: 2px 2px 0 2px;
|
|
resize: vertical;
|
|
}
|
|
|
|
|
|
.ui-dialog .tab-content .charsheet button[type="roll"] {
|
|
align-items: center;
|
|
display: inline-flex;
|
|
font-size: 1.2rem;
|
|
font-weight: normal;
|
|
justify-content: center;
|
|
margin: auto;
|
|
padding: 0 2px 0 2px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet button[type="roll"]:before {
|
|
content: "0";
|
|
display: inline-grid;
|
|
font-family: "dicefontd20";
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet button[type="roll"]:empty {
|
|
display: inline-grid;
|
|
font-size: 1em;
|
|
font-weight: normal;
|
|
margin: auto;
|
|
min-width: 2em;
|
|
outline: 1px solid #333;
|
|
padding: 1px;
|
|
}
|
|
|
|
/* hides the dice image */
|
|
.ui-dialog .tab-content .charsheet button[type="roll"]:not(:empty):before {
|
|
content: '';
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input[type="checkbox"] {
|
|
appearance: none;
|
|
background: white;
|
|
border-left: 1px solid #eb3143;
|
|
box-shadow: 1px -1px 2px 1px #eb3143;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
height: 15px;
|
|
width: 15px;
|
|
margin: auto;
|
|
outline: none;
|
|
vertical-align: middle;
|
|
|
|
&:checked::before {
|
|
align-items: center;
|
|
color: #000;
|
|
content: '*';
|
|
display: flex;
|
|
font-family: 'Pictos';
|
|
font-size: 20px;
|
|
inset: 0;
|
|
justify-content: center;
|
|
position: absolute;
|
|
transform: rotate(17deg);
|
|
}
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input[type="radio"] {
|
|
appearance: none;
|
|
background: white;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
height: 10px;
|
|
width: 10px;
|
|
outline: none;
|
|
|
|
&:checked::before {
|
|
align-items: center;
|
|
color: #000;
|
|
content: '*';
|
|
display: flex;
|
|
font-family: 'Pictos';
|
|
font-size: 12px;
|
|
inset: 0;
|
|
justify-content: center;
|
|
position: absolute;
|
|
transform: rotate(17deg);
|
|
}
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet select.input-width-small,
|
|
.ui-dialog .tab-content .charsheet input[type="text"].input-width-small,
|
|
.ui-dialog .tab-content .charsheet input[type="number"].input-width-small {
|
|
text-align: center;
|
|
min-width: 0;
|
|
width: 3em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet select.input-width-smallest,
|
|
.ui-dialog .tab-content .charsheet input[type="text"].input-width-smallest,
|
|
.ui-dialog .tab-content .charsheet input[type="number"].input-width-smallest {
|
|
text-align: center;
|
|
min-width: 0;
|
|
width: 2em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .ability-input {
|
|
background-clip: text;
|
|
border: none;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
max-width: 2em;
|
|
min-width: 2em;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .hpCurrMax .ability-input {
|
|
background-clip: inherit;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .ability-mod {
|
|
align-self: center;
|
|
font-size: 1.1rem;
|
|
height: 2.25em;
|
|
min-width: 2.25em;
|
|
padding-right: 4px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input[type="text"].input-width-medium {
|
|
max-width: 43%;
|
|
min-width: 7em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .input-width-medium-stretch {
|
|
max-width: 18em;
|
|
min-width: 11.5em;
|
|
width: 40%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input[type="text"].input-width-large {
|
|
max-width: 15em;
|
|
min-width: 10em;
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .width-full,
|
|
.ui-dialog .tab-content .charsheet .input-width-full,
|
|
.ui-dialog .tab-content .charsheet textarea.input-width-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .vertical-text {
|
|
display: flex;
|
|
margin: auto;
|
|
margin-top: 0;
|
|
padding-block: 4px;
|
|
padding-inline: 2px;
|
|
text-orientation: upright;
|
|
width: min-content;
|
|
writing-mode: vertical-lr;
|
|
}
|
|
|
|
.charsheet .two-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.charsheet .three-columns {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
.charsheet .span-all {
|
|
grid-column: 1/-1;
|
|
}
|
|
|
|
.charsheet .span-2 {
|
|
grid-column: span 2;
|
|
}
|
|
|
|
.charsheet .span-3 {
|
|
grid-column: span 3;
|
|
}
|
|
|
|
.charsheet .span-4 {
|
|
grid-column: span 4;
|
|
}
|
|
|
|
.charsheet .span-5 {
|
|
grid-column: span 5;
|
|
}
|
|
|
|
.charsheet .nowrap {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .left {
|
|
text-align: left;
|
|
margin-inline: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .center {
|
|
align-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .right {
|
|
text-align: right;
|
|
}
|
|
|
|
.charsheet .armour-tier-grid {
|
|
align-content: center;
|
|
column-gap: 5px;
|
|
display: grid;
|
|
font-size: 1rem;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
height: 3em;
|
|
left: -2.5em;
|
|
position: relative;
|
|
width: 12em;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .woes-grid {
|
|
display: grid;
|
|
font-size: 1rem;
|
|
gap: 3px;
|
|
grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
|
|
left: -3em;
|
|
top: -3em;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .woes-style {
|
|
font-family: 'Pirata One';
|
|
font-size: 3rem;
|
|
font-weight: normal;
|
|
left: -10px;
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
top: -24px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .woes-grid label {
|
|
margin: auto;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 20px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label span {
|
|
color: #333;
|
|
display: flex;
|
|
font-family: 'New Tegomin';
|
|
font-size: 1.2rem;
|
|
height: 23px;
|
|
padding: 1px 2px 0 0;
|
|
place-content: space-evenly;
|
|
position: relative;
|
|
width: 26px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label span,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label span {
|
|
color: #333;
|
|
display: flex;
|
|
font-family: 'New Tegomin';
|
|
font-size: 1.2rem;
|
|
height: 20px;
|
|
place-content: space-evenly;
|
|
position: relative;
|
|
width: 20px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label input,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label input {
|
|
-webkit-appearance: none;
|
|
border: 1px solid #8a8a8a;
|
|
border-radius: 50%;
|
|
height: 20px;
|
|
margin: 0;
|
|
outline: 1px solid #000;
|
|
outline-offset: 1px;
|
|
position: absolute;
|
|
width: 20px;
|
|
}
|
|
|
|
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label input {
|
|
-webkit-appearance: none;
|
|
border: 1px solid #8a8a8a;
|
|
border-radius: 50%;
|
|
height: 23px;
|
|
margin: 0;
|
|
outline: 1px solid #000;
|
|
outline-offset: 1px;
|
|
position: absolute;
|
|
width: 26px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label:last-child,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label:last-child {
|
|
transform: scale(1.5);
|
|
margin: 4px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .woes-grid label:last-child {
|
|
border-radius: 50%;
|
|
bottom: -20px;
|
|
left: -15px;
|
|
margin-inline: 6px 0;
|
|
outline: 1px solid #FFF;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]:checked) span,
|
|
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover span,
|
|
.ui-dialog .tab-content .charsheet button[type="roll"]:hover,
|
|
.ui-dialog .charsheet .virtues:hover .virtues-box button[type="roll"] {
|
|
background-color: #eb3143;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
color: #000;
|
|
outline: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapon-notes-style label:has(input[type="checkbox"]:checked) span {
|
|
background-color: #eb3143;
|
|
outline: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover {
|
|
background-color: #eb3143;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover + span,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover + span,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover + span {
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']::before,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']::before,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']::before {
|
|
border-radius: 50%;
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:checked + span,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:checked + span,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:checked + span {
|
|
background-color: #eb3143;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-weight: normal;
|
|
min-height: 21px;
|
|
min-width: 21px;
|
|
outline: 1px solid #fff;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span {
|
|
outline: 3px solid #000;
|
|
}
|
|
|
|
.sheet-darkmode .ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span {
|
|
outline: 2px solid #fff;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) input:before,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) input:before,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before {
|
|
background-color: #555;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before {
|
|
height: 23px;
|
|
margin-left: -2px;
|
|
margin-top: -1px;
|
|
outline: 2px solid #000;
|
|
width: 25px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) span,
|
|
.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) span,
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) span {
|
|
border-radius: 50%;
|
|
color: #cbcbcb;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(input[type="checkbox"]):hover span {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.charsheet .tenets-grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: 2rem 3rem;
|
|
margin: 5px 2px 15px 2px;
|
|
outline: 2px solid #333;
|
|
padding: 5px;
|
|
row-gap: 5px;
|
|
}
|
|
|
|
.sheet-darkmode .charsheet .tenets-grid {
|
|
outline-color: #000;
|
|
}
|
|
|
|
.ui-dialog .charsheet .tenets-style {
|
|
font-family: 'Proxima Nova';
|
|
letter-spacing: 10px;
|
|
font-weight: normal;
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.charsheet .tenets-grid input[type="text"] {
|
|
text-align: center;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input.lost-broken {
|
|
position: relative;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet label.lost-broken {
|
|
display: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken {
|
|
align-items: center;
|
|
background-color: #eb3143;
|
|
color: #fff;
|
|
display: inline-flex;
|
|
font-size: 1.5em;
|
|
height: 100%;
|
|
margin: auto;
|
|
opacity: .85;
|
|
padding-left: 4px;
|
|
place-content: center;
|
|
position: absolute;
|
|
text-align: left;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repitem:has(input.lost-broken:checked):hover input.lost-broken:checked {
|
|
z-index: 2;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet input.lost-broken:checked:hover + .lost-broken,
|
|
.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.charsheet .broken-pc:checked ~ .broken-pc {
|
|
align-content: center;
|
|
background-color: #555555;
|
|
display: block;
|
|
min-height: 2em;
|
|
min-width: 8em;
|
|
outline: 2px solid #000;
|
|
width: 100%;
|
|
}
|
|
|
|
.charsheet .warning:checked + input {
|
|
background-color: #eb3143;
|
|
border-radius: 0;
|
|
color: #fff;
|
|
outline: 3px solid #eb3143;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .weapons .normal-view,
|
|
.ui-dialog .tab-content .charsheet .weapons .dueling-view {
|
|
display: none;
|
|
}
|
|
|
|
.charsheet .show-duel:not(:checked) ~ div[data-groupname="repeating_weapons"] .normal-view,
|
|
.charsheet .show-duel:checked ~ div[data-groupname="repeating_weapons"] .dueling-view {
|
|
display: block;
|
|
max-width: 11em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Hide spinners in Firefox */
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.charsheet input:hover::-webkit-outer-spin-button,
|
|
.charsheet input:hover::-webkit-inner-spin-button,
|
|
.charsheet input:focus::-webkit-outer-spin-button,
|
|
.charsheet input:focus::-webkit-inner-spin-button {
|
|
appearance: textfield;
|
|
-moz-appearance: auto;
|
|
/* Restore default appearance on focus */
|
|
}
|
|
|
|
.charsheet select {
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
}
|
|
|
|
/* repeating row controls */
|
|
.ui-dialog .tab-content .charsheet .repcontainer .repitem,
|
|
.ui-dialog .tab-content .charsheet .repcontainer + .repcontrol {
|
|
background-color: transparent;
|
|
margin: auto;
|
|
min-height: 1em;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.ui-dialog .charsheet .repcontainer .repitem .itemcontrol {
|
|
max-width: -webkit-fill-available;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del,
|
|
.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move {
|
|
border: 2px solid #111;
|
|
border-radius: 3px;
|
|
bottom: -.5em;
|
|
display: block;
|
|
height: 1.5em;
|
|
padding: 0 0 1.5em 0;
|
|
position: relative;
|
|
width: 1.5em;
|
|
z-index: 3;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del {
|
|
background: red;
|
|
color: #fff;
|
|
outline: none;
|
|
right: 5px;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move {
|
|
background: #fff;
|
|
color: #000;
|
|
outline: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit {
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
font-size: 0;
|
|
line-height: 1;
|
|
outline: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before {
|
|
background: none;
|
|
background-color: #fff;
|
|
border: 2px solid #222222d4;
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
display: block;
|
|
height: 1.5em;
|
|
line-height: normal;
|
|
outline: none;
|
|
padding: 0;
|
|
width: 1.5em;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover {
|
|
color: #fff;
|
|
outline: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover:before,
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover:before {
|
|
background-color: #000;
|
|
font-weight: normal;
|
|
outline: none;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before {
|
|
content: "&";
|
|
display: block;
|
|
font-family: "Pictos";
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before {
|
|
content: "(";
|
|
display: block;
|
|
font-family: "Pictos";
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui-dialog .tab-content .charsheet .editmode + .repcontrol button.repcontrol_edit:before {
|
|
content: ")";
|
|
}
|
|
|
|
.charsheet .section-header,
|
|
.charsheet .section-header-inline {
|
|
font-family: 'Nunito', serif;
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
margin-inline: 2px;
|
|
}
|
|
|
|
.charsheet .column-header {
|
|
font-family: 'Nunito', serif;
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.charsheet .swiftness,
|
|
.charsheet .spirit,
|
|
.charsheet .vigor,
|
|
.charsheet .resilience {
|
|
display: inline-block;
|
|
margin-bottom: 2em;
|
|
position: static;
|
|
text-align: center;
|
|
width: 100%;
|
|
& span.section-header {
|
|
font-family: 'Ghastly Panic', sans-serif;
|
|
font-size: 3rem;
|
|
font-synthesis: none;
|
|
letter-spacing: 4px;
|
|
line-height: 3rem;
|
|
padding: 5px 3px 5px 8px;
|
|
text-shadow: 0 0 0 #000, 0 0 0 #000;
|
|
}
|
|
}
|
|
|
|
.charsheet .swiftness,
|
|
.charsheet .spirit,
|
|
.charsheet .vigor,
|
|
.charsheet .resilience,
|
|
.charsheet .honour {
|
|
margin-inline: auto;
|
|
/* inverts margin-right based on vw
|
|
888px up to 1280px
|
|
*/
|
|
margin-right: max(-36px, min(0px, calc(-0.0918 * 100vw + 81.55px)));
|
|
}
|
|
|
|
.charsheet .spirit,
|
|
.charsheet .vigor {
|
|
margin-left: -2em;
|
|
}
|
|
|
|
.charsheet .ability-base-mod {
|
|
display: flex;
|
|
margin: -6px auto 2px auto;
|
|
max-width: 5em;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
z-index: 1;
|
|
}
|
|
|
|
.charsheet .section-notes {
|
|
font-size: 1.2rem;
|
|
font-family: 'Times New Roman', Times, serif;
|
|
line-height: 1.25rem;
|
|
}
|
|
|
|
.charsheet .logo {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_logo.webp');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
display: grid;
|
|
grid-area: logo;
|
|
height: 218px;
|
|
left: -4em;
|
|
margin-bottom: -4em;
|
|
margin-right: -5em;
|
|
place-self: center;
|
|
position: relative;
|
|
top: -3em;
|
|
transform-origin: top left;
|
|
transform: scale(1);
|
|
transition: transform .5s ease-in-out;
|
|
width: 330px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet .kanji-text {
|
|
font-family: 'Yuji Mai';
|
|
font-size: 1.65rem;
|
|
font-weight: 400;
|
|
text-shadow: 1px 1px 1px #111;
|
|
}
|
|
|
|
/* roll template */
|
|
|
|
.sheet-rolltemplate-ronin {
|
|
align-content: center;
|
|
color: #111 !important;
|
|
margin-bottom: 5px;
|
|
margin-inline: auto;
|
|
max-inline-size: 360px;
|
|
min-height: 3em;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-heading-row {
|
|
background-color: #000;
|
|
display: grid; font-family: 'Special Elite';
|
|
grid-template-columns: 1fr 1fr;
|
|
min-height: 2em;
|
|
padding: 5px 2px 2px 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-template-body {
|
|
align-content: center;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background.webp');
|
|
background-position: 0 -6px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
padding-top: 2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-template-body::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background.webp');
|
|
background-position: bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
bottom: -7px;
|
|
content: '';
|
|
display: block;
|
|
padding-top: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body,
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body::after {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background_darkmode.webp');
|
|
color: #fff;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-row {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-span-all {
|
|
grid-column: 1/-1;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-key {
|
|
margin-inline: auto;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-value {
|
|
margin-inline: auto;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-heading {
|
|
font-family: 'Special Elite';
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-subheading {
|
|
font-family: 'Nunito';
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-heading,
|
|
.sheet-rolltemplate-ronin .sheet-subheading {
|
|
align-content: center;
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding-block: 2px;
|
|
padding-inline: 5px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-duel-label {
|
|
background-color: #eb3143;
|
|
border-radius: 5px;
|
|
box-shadow: 1px 3px 1px 1px #111;
|
|
font-family: serif;
|
|
font-size: 12px;
|
|
padding-inline: 6px;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
right: -1px;
|
|
text-orientation: upright;
|
|
top: 5px;
|
|
transform: rotate(7deg);
|
|
writing-mode: vertical-lr;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-block:empty {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-description {
|
|
background-color: #e6e6e6ab;
|
|
display: block;
|
|
margin: .25em 1em .5em 1em;
|
|
padding: 5px 5px 10px 5px;
|
|
text-align: left;
|
|
white-space: normal;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-description {
|
|
background-color: #000000b8;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin hr {
|
|
background-color: #111;
|
|
height: 2px;
|
|
margin-block: 2px;
|
|
width: 70%;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-footnote {
|
|
font-size: .85em;
|
|
padding-inline: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-success-roll,
|
|
.sheet-rolltemplate-ronin .sheet-crit-roll {
|
|
color: #3fb315 !important;
|
|
display: inline-block;
|
|
font-size: 1.25em;
|
|
font-weight: bold;
|
|
padding-block: 2px;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .inlinerollresult.fullcrit {
|
|
border: 2px solid #3fb315 !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-failed-roll,
|
|
.sheet-rolltemplate-ronin .sheet-fumble-roll {
|
|
color: #eb3143 !important;
|
|
display: inline-block;
|
|
font-size: 1.25em;
|
|
font-weight: bold;
|
|
padding-block: 2px;
|
|
vertical-align: top;
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .inlinerollresult.fullfail {
|
|
border: 2px solid #eb3143 !important;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin span.inlinerollresult {
|
|
background-color: transparent;
|
|
border: 1px solid #666;
|
|
cursor: help;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
margin: 1px;
|
|
min-width: 1em;
|
|
padding: 0 3px 0 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin span[data-i18n="versus-difficulty-rating"] + .inlinerollresult {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* d20 dice image */
|
|
.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult {
|
|
border-color: transparent;
|
|
display: inline-grid;
|
|
height: 24px;
|
|
line-height: normal;
|
|
margin-inline: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 24px;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before {
|
|
content: '0';
|
|
display: inline-grid;
|
|
font-family: 'dicefontd20';
|
|
font-size: 1.85em;
|
|
line-height: 1em;
|
|
opacity: .85;
|
|
position: absolute;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before {
|
|
opacity: .25;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-dice-roll span.inlinerollresult {
|
|
background-color: #000;
|
|
border: none !important;
|
|
border-radius: 2px;
|
|
color: #fff;
|
|
display: inline-grid;
|
|
font-weight: normal;
|
|
height: 24px;
|
|
line-height: normal;
|
|
margin-inline: 0;
|
|
outline: 1px solid #333;
|
|
outline-offset: -2px;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 24px;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin span.sheet-roll-detail {
|
|
cursor: help;
|
|
vertical-align: text-top;
|
|
opacity: .5;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin span.sheet-roll-detail:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin span.sheet-roll-detail .inlinerollresult {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
padding: 0 1px 0 1px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* hyperlinks */
|
|
.sheet-rolltemplate-ronin a {
|
|
background-color: #ffffffa6;
|
|
font-family: system-ui;
|
|
font-weight: bold;
|
|
padding: 0 4px 4px 4px;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin a {
|
|
background-color: #000000a6;
|
|
}
|
|
|
|
/* removes text and adds dice image */
|
|
.sheet-rolltemplate-ronin .sheet-roll-query a::before,
|
|
.sheet-rolltemplate-ronin .sheet-roll-query a::after {
|
|
bottom: -1px;
|
|
color: #000;
|
|
content: 'F';
|
|
font-family: 'dicefontd6';
|
|
font-size: 16px;
|
|
opacity: .75;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query {
|
|
display: contents;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query a::before {
|
|
margin-right: -10px;
|
|
top: -3px;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query:hover a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query:hover a::before {
|
|
color: #eb3143;
|
|
font-size: 17px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.sheet-rolltemplate-ronin .sheet-roll-query:hover a::after {
|
|
color: #eb3143;
|
|
font-size: 17px;
|
|
opacity: 1;
|
|
top: 1px;
|
|
} |