mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-09-06 07:02:28 +00:00
1772 lines
38 KiB
SCSS
1772 lines
38 KiB
SCSS
@import url('https://fonts.googleapis.com/css?family=Baumans|Roboto+Mono&display=swap');
|
|
$grid-locations:
|
|
attributes,
|
|
character_details,
|
|
experience,
|
|
player_name,
|
|
purchase_guide,
|
|
credits,
|
|
knowledges,
|
|
skills,
|
|
abilities,
|
|
exertion,
|
|
security_level,
|
|
defenses,
|
|
attacks,
|
|
actions,
|
|
section-tabs,
|
|
reverence,
|
|
equipment;
|
|
$dieSizes:8,10,12,20;
|
|
$d20Values:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20;
|
|
$dieLetter:(1:A,2:B,3:C,4:D,5:E,6:F,7:G,8:H,9:I,10:J,11:K,12:L,13:M,14:N,15:O,16:P,17:Q,18:R,19:S,20:T);
|
|
@function type($read){
|
|
$result: 'label';
|
|
@if $read{
|
|
$result:'span';
|
|
}
|
|
@return $result;
|
|
}
|
|
@mixin inputHighlight{
|
|
border-width:1px 3px;
|
|
border-style:solid;
|
|
border-color:black;
|
|
border-radius:5px;
|
|
box-sizing:border-box;
|
|
transition:var(--focusTrans);
|
|
}
|
|
@mixin stackedGrid{
|
|
&.stacked{
|
|
grid-template-columns:auto;
|
|
grid-template-areas:
|
|
"over"
|
|
"under";
|
|
&.under{
|
|
grid-template-rows:1fr auto;
|
|
> span:last-of-type{
|
|
grid-area:under;
|
|
}
|
|
}
|
|
&.over{
|
|
grid-template-rows:auto 1fr;
|
|
> span:last-of-type{
|
|
grid-area:over;
|
|
}
|
|
}
|
|
&.center > *{
|
|
text-align:center;
|
|
}
|
|
&:not(.center) > :not(input){
|
|
text-align:left;
|
|
}
|
|
}
|
|
}
|
|
@mixin leftInputLabel{
|
|
&:not(:is(.stacked,.right)){
|
|
grid-template-columns:auto 1fr;
|
|
grid-template-rows:auto;
|
|
grid-template-areas:
|
|
"left right";
|
|
> span{
|
|
grid-area:left;
|
|
}
|
|
}
|
|
}
|
|
@mixin rightInputLabel{
|
|
&.right{
|
|
grid-template-columns:1fr auto;
|
|
grid-template-rows:auto;
|
|
grid-template-areas:
|
|
"left right";
|
|
> span{
|
|
grid-area:right;
|
|
}
|
|
}
|
|
}
|
|
@mixin borderedLabel($color:black,$borderColor:black){
|
|
color:$color;
|
|
padding:5px;
|
|
border-radius:5px;
|
|
border:1px solid $borderColor;
|
|
}
|
|
@mixin selectedLabel($backColor:black,$color:white){
|
|
background-color:$backColor;
|
|
color:$color;
|
|
}
|
|
@mixin pseudoRadio($backColor:black,$color:white){
|
|
input:checked + label,
|
|
label:hover{
|
|
@include selectedLabel($backColor,$color);
|
|
}
|
|
}
|
|
@mixin reverence{
|
|
> h3{
|
|
grid-area:header;
|
|
line-height:normal;
|
|
place-self:center;
|
|
}
|
|
> .fillTrack{
|
|
place-self:center;
|
|
}
|
|
.help{
|
|
background-color: grey
|
|
}
|
|
}
|
|
@mixin exertion{
|
|
--fillTrackRadioHeight:1rem;
|
|
> .fillTrack{
|
|
place-self:center;
|
|
}
|
|
.help{
|
|
background-color: grey
|
|
}
|
|
}
|
|
@mixin securityStyle{
|
|
&.level-1,
|
|
&.sheet-level-1{
|
|
--backColor:#6abd47;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
}
|
|
&.level-2,
|
|
&.sheet-level-2{
|
|
--backColor:#4f72b7;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
}
|
|
&.level-3,
|
|
&.sheet-level-3{
|
|
--backColor:#ef6024;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
}
|
|
&.level-4,
|
|
&.sheet-level-4{
|
|
--backColor:#ed2025;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
}
|
|
&.level-5,
|
|
&.sheet-level-5{
|
|
--backColor:#7d52a1;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
}
|
|
&.level-6,
|
|
&.sheet-level-6{
|
|
--backColor:#000000;
|
|
--borderColor:white;
|
|
--fontColor:#ededed;
|
|
}
|
|
}
|
|
html{
|
|
font-size:13px;
|
|
}
|
|
//Placeholders
|
|
%sticky-sub{
|
|
top:70.5px;
|
|
position:sticky;
|
|
z-index:100;
|
|
}
|
|
%roboto-mono{
|
|
font-family:Roboto Mono;
|
|
}
|
|
%baumans{
|
|
font-family:Baumans;
|
|
}
|
|
%tahoma{
|
|
font-family:Tahoma;
|
|
}
|
|
%box-header{
|
|
border:solid black;
|
|
border-width:2px 1px;
|
|
}
|
|
%header{
|
|
text-transform:capitalize;
|
|
font-weight:bold;
|
|
line-height:normal;
|
|
display:block;
|
|
white-space:nowrap;
|
|
margin{
|
|
top:0px;
|
|
bottom:0px;
|
|
}
|
|
}
|
|
%h1{
|
|
@extend %header;
|
|
font-size:3rem;
|
|
display:block;
|
|
font-family:Baumans;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
%h2{
|
|
@extend %header;
|
|
font-size:2.5rem;
|
|
display:block;
|
|
@extend %roboto-mono;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
%h3{
|
|
@extend %header;
|
|
font-size:2rem;
|
|
display:block;
|
|
@extend %roboto-mono;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
%h4{
|
|
@extend %header;
|
|
font-size:1.5rem;
|
|
font-weight:bold;
|
|
display:block;
|
|
@extend %roboto-mono;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
%h5{
|
|
@extend %header;
|
|
font-size:1rem;
|
|
display:block;
|
|
@extend %roboto-mono;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
%h6{
|
|
font-size:1rem;
|
|
display:block;
|
|
font-style:italic;
|
|
@extend %roboto-mono;
|
|
&:not(input){
|
|
text-align:center;
|
|
}
|
|
}
|
|
//End Placeholders
|
|
.characterviewer > ul.nav-tabs{
|
|
> li.active{
|
|
z-index:100;
|
|
}
|
|
a[data-tab="charsheet"]{
|
|
display:flex;
|
|
align-items:center;
|
|
line-height: 1rem;
|
|
padding:{
|
|
top:0;
|
|
bottom:1px;
|
|
left:6px;
|
|
}
|
|
&:before {
|
|
content: "X";
|
|
background-image: url(https://s3.amazonaws.com/files.d20.io/images/237119632/ALMH-rWYBVVqwtIQI970xw/original.png);
|
|
width: 3rem;
|
|
color: transparent;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
font-size: 2rem;
|
|
line-height:normal;
|
|
}
|
|
}
|
|
}
|
|
#main,
|
|
.sheet-rolltemplate-scp{
|
|
--grid-gap:1rem;
|
|
--half-gap:calc(var(--grid-gap) / 2);
|
|
--tiny-gap:calc(var(--half-gap) / 2);
|
|
position:relative;
|
|
gap:var(--grid-gap);
|
|
--revealTime:500ms;
|
|
--delayTime:200ms;
|
|
--inputSwap:opacity var(--revealTime) ease var(--delayTime);
|
|
--focusTrans:all 500ms ease var(--delayTime);
|
|
--borderColor:black;
|
|
--fontColor:black;
|
|
--backColor:#636363;
|
|
--selectColor:var(--backColor);
|
|
--selectShadow:none;
|
|
.transparent-logo{
|
|
aspect-ratio:1/1;
|
|
background-image:url('https://s3.amazonaws.com/files.d20.io/images/237119631/qha_0dNwFDUbYjLIGp2SCg/original.png');
|
|
background-repeat:no-repeat;
|
|
background-size:contain;
|
|
}
|
|
.black-logo,
|
|
.sheet-black-logo{
|
|
aspect-ratio:1/1;
|
|
display:grid;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "content";
|
|
> .logo,
|
|
.sheet-logo{
|
|
grid-area:content;
|
|
background-image:url('https://s3.amazonaws.com/files.d20.io/images/237119632/ALMH-rWYBVVqwtIQI970xw/original.png');
|
|
background-repeat:no-repeat;
|
|
background-size:contain;
|
|
z-index:10;
|
|
}
|
|
> .black-diamond,
|
|
.sheet-black-diamond{
|
|
grid-area:content;
|
|
background-color:var(--fontColor);
|
|
width:100%;
|
|
height:100%;
|
|
transform:scale(0.75) rotate(45deg);
|
|
}
|
|
}
|
|
*{
|
|
color:black;
|
|
transition:var(--focusTrans);
|
|
@extend %tahoma;
|
|
}
|
|
select,textarea,input,.uneditable-input,label,button{
|
|
all:unset;
|
|
}
|
|
[hidden]{
|
|
display:none;
|
|
}
|
|
button{
|
|
font-weight:bold;
|
|
cursor:pointer;
|
|
}
|
|
textarea{
|
|
resize:vertical;
|
|
min-height:3.5rem;
|
|
white-space:pre-wrap;
|
|
}
|
|
select,input,.uneditable-input{
|
|
padding:initial;
|
|
}
|
|
select,input,.uneditable-input,textarea{
|
|
border-width:1px 3px;
|
|
border-style:solid;
|
|
border-radius:5px;
|
|
border-color:transparent;
|
|
box-sizing:border-box;
|
|
&:not(:is([readonly],.boxed,.separated-span,.separated-label)):is(:hover,:focus){
|
|
@include inputHighlight;
|
|
}
|
|
&:not(:is([readonly])):focus{
|
|
background-color:#DCDCDC;
|
|
transition:var(--focusTrans);
|
|
}
|
|
}
|
|
select{
|
|
appearance:none;
|
|
text-transform: capitalize;
|
|
overflow:hidden!important;
|
|
white-space:nowrap;
|
|
text-overflow:ellipsis;
|
|
}
|
|
.circle{
|
|
border-radius:50%;
|
|
}
|
|
label{
|
|
width:unset;
|
|
margin:unset;
|
|
}
|
|
label[for]{
|
|
cursor: pointer;
|
|
}
|
|
input{
|
|
width:100%;
|
|
&:placeholder{
|
|
color:#ededed80;
|
|
}
|
|
&.plus-control:not([value*="-"]) + span:before{
|
|
content:'+';
|
|
}
|
|
}
|
|
.right{
|
|
align-text:right;
|
|
}
|
|
span,input,textarea{
|
|
font-size:1rem;
|
|
}
|
|
label[for*="-0"]{
|
|
display:none;
|
|
}
|
|
.hidden{
|
|
display:none!important;
|
|
}
|
|
.italics{
|
|
font-style:italic;
|
|
}
|
|
:is(span,label){
|
|
line-height:normal;
|
|
text-transform:capitalize;
|
|
}
|
|
.roller{
|
|
cursor:pointer;
|
|
display:inline-grid;
|
|
}
|
|
.roll-label{
|
|
cursor:pointer;
|
|
--beforeColor:grey;
|
|
display:grid;
|
|
grid-template-columns:auto auto;
|
|
grid-template-rows:auto;
|
|
place-items:center start;
|
|
place-content:center;
|
|
.dice-icon{
|
|
justify-self:center;
|
|
display:inline-grid;
|
|
grid-template-columns:[d8-start] 0.5rem [d10-start] 0.5rem [d8-end d12-start] 0.5rem [d10-end] 0.5rem [d12-end];
|
|
grid-template-rows:[d10-start content-start] 0.5rem [d8-start d12-start] 0.5rem [d10-start] 0.5rem [d8-end d12-end content-end];
|
|
> .d8-font{
|
|
display:contents;
|
|
&:before{
|
|
content:'H';
|
|
font-family:dicefontd8;
|
|
grid-area:d8;
|
|
place-self:center;
|
|
color:var(--beforeColor);
|
|
text-shadow:var(--selectShadow);
|
|
transition:var(--focusTrans);
|
|
}
|
|
}
|
|
> .d10-font{
|
|
display:contents;
|
|
&:before{
|
|
content:'K';
|
|
font-family:dicefontd10;
|
|
grid-area:d10;
|
|
place-self:start center;
|
|
color:var(--beforeColor);
|
|
text-shadow:var(--selectShadow);
|
|
transition:var(--focusTrans);
|
|
}
|
|
}
|
|
> .d12-font{
|
|
display:contents;
|
|
&:before{
|
|
content:'L';
|
|
font-family:dicefontd12;
|
|
grid-area:d12;
|
|
place-self:center;
|
|
color:var(--beforeColor);
|
|
text-shadow:var(--selectShadow);
|
|
transition:var(--focusTrans);
|
|
}
|
|
}
|
|
button{
|
|
grid-area:content;
|
|
}
|
|
}
|
|
&:is(:hover,:focus,:focus-within){
|
|
--beforeColor:var(--selectColor);
|
|
> button{
|
|
color:var(--beforeColor);
|
|
text-shadow:var(--selectShadow);
|
|
}
|
|
}
|
|
}
|
|
h1,.h1,button[type='roll'].h1,button[type='action'].h1{
|
|
@extend %h1;
|
|
}
|
|
h2,.h2,button[type='roll'].h2,button[type='action'].h2{
|
|
@extend %h2;
|
|
}
|
|
h3,.h3,button[type='roll'].h3,button[type='action'].h3{
|
|
@extend %h3;
|
|
}
|
|
h4,.h4,button[type='roll'].h4,button[type='action'].h4{
|
|
@extend %h4;
|
|
}
|
|
h5,.h5,button[type='roll'].h5,button[type='action'].h5{
|
|
@extend %h5;
|
|
}
|
|
h6,.h6,button[type='roll'].h6,button[type='action'].h6{
|
|
@extend %h6;
|
|
}
|
|
.pictos{
|
|
font-family:pictos;
|
|
text-transform:initial;
|
|
}
|
|
.pictos3{
|
|
font-family:pictos three;
|
|
text-transform:initial;
|
|
}
|
|
.pictoscustom{
|
|
font-family:pictos custom;
|
|
text-transform:initial;
|
|
}
|
|
input[type="checkbox"]{
|
|
-webkit-appearance: checkbox;
|
|
-moz-appearance: checkbox;
|
|
appearance: checkbox;
|
|
width:auto;
|
|
}
|
|
input.number{
|
|
-moz-appearance: textfield !important;
|
|
text-align:center;
|
|
}
|
|
textarea.fixed{
|
|
resize:none;
|
|
overflow:auto;
|
|
}
|
|
section{
|
|
&.page{
|
|
display:none;
|
|
}
|
|
}
|
|
.pseudo-button{
|
|
display:inline;
|
|
cursor:pointer;
|
|
border-radius:5px;
|
|
text-transform: uppercase;
|
|
border:1px solid black;
|
|
text-align:center;
|
|
padding:0 5px;
|
|
}
|
|
.input-label{
|
|
display:inline-grid;
|
|
grid-gap:var(--half-gap);
|
|
place-items:center stretch;
|
|
@include stackedGrid;
|
|
@include leftInputLabel;
|
|
@include rightInputLabel;
|
|
> *{
|
|
margin:0;
|
|
}
|
|
> input:is([type="text"],[type="number"]){
|
|
width:100%;
|
|
}
|
|
&.large > input{
|
|
@extend %h2;
|
|
}
|
|
}
|
|
.dual.input-label{
|
|
grid-template-columns:1fr auto 1fr;
|
|
grid-template-areas:
|
|
'over over over'
|
|
'under under under';
|
|
> span:last-of-type{
|
|
grid-column:1 / -1;
|
|
}
|
|
> input{
|
|
width:100%;
|
|
}
|
|
> .slash{
|
|
line-height: 0rem;
|
|
font-weight:normal;
|
|
}
|
|
}
|
|
.headed-textarea{
|
|
display:grid;
|
|
grid-template-rows:auto 1fr;
|
|
grid-template-columns:auto;
|
|
}
|
|
.boxed{
|
|
border:1px solid black;
|
|
&.thick-left {
|
|
border-left-width:5px;
|
|
}
|
|
&.thick-bottom {
|
|
border-bottom-width:5px;
|
|
}
|
|
&.thick-right {
|
|
border-right-width:5px;
|
|
}
|
|
&.thick-top{
|
|
border-top-width:5px;
|
|
}
|
|
}
|
|
.underlined{
|
|
border-radius:5px 5px 0 0;
|
|
border-bottom:1px solid black;
|
|
transition:var(--focusTrans);
|
|
&.thick{
|
|
border-bottom-width:5px;
|
|
}
|
|
}
|
|
.ratio1-1{
|
|
aspect-ratio:1/1;
|
|
}
|
|
.repeat-columns{
|
|
display:grid;
|
|
grid-gap:var(--half-gap);
|
|
place-items:center;
|
|
}
|
|
.repcontainer{
|
|
display:grid;
|
|
grid-gap:var(--half-gap);
|
|
> .repitem{
|
|
display:grid;
|
|
grid-gap:var(--half-gap);
|
|
.itemcontrol{
|
|
grid-column: 1 / -1;
|
|
place-self:start stretch;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#main{
|
|
--selectedRadio:grey;
|
|
--fillTrackRadioHeight:2rem;
|
|
--fillTrackRadioWidth:1rem;
|
|
--fillTrackSpanWidth:1rem;
|
|
--fillTrackSpanHeight:0.5rem;
|
|
--fillItemFlex:0 0 auto;
|
|
--track-gap:var(--tiny-gap);
|
|
display:grid;
|
|
@include securityStyle;
|
|
&.all{
|
|
grid-template-columns: 2rem auto [sticky-background-start] 10rem auto auto auto auto auto auto 10rem [sticky-background-end];
|
|
grid-template-rows: auto auto [sticky-background-start] auto [sticky-background-end] auto auto auto 1fr;
|
|
grid-template-areas:
|
|
"section-tabs summary summary summary summary summary summary summary summary summary"
|
|
"section-tabs attributes experience experience purchase_guide purchase_guide purchase_guide purchase_guide player_name player_name"
|
|
"section-tabs attributes reverence defenses defenses defenses defenses defenses defenses exertion "
|
|
"section-tabs attributes character_details character_details character_details character_details character_details character_details character_details character_details"
|
|
"section-tabs attributes actions actions actions actions actions actions actions actions"
|
|
"section-tabs attacks attacks attacks attacks attacks attacks attacks attacks attacks"
|
|
"section-tabs equipment equipment equipment equipment equipment equipment equipment equipment equipment"
|
|
;
|
|
}
|
|
&:not(.all){
|
|
grid-template-columns: 2rem [sticky-background-start character_details-start attributes-start attacks-start actions-start equipment-start] 10rem auto auto auto 10rem [sticky-background-end character_details-end attributes-end attacks-end actions-end equipment-end];
|
|
grid-template-rows: auto auto [sticky-background-start] auto [sticky-background-end character_details-start attributes-start attacks-start actions-start equipment-start] 1fr [character_details-end attributes-end attacks-end actions-end equipment-end];
|
|
grid-template-areas:
|
|
"section-tabs summary summary summary summary summary"
|
|
"section-tabs experience experience purchase_guide player_name player_name"
|
|
"section-tabs reverence defenses defenses defenses exertion"
|
|
"section-tabs content content content content content"
|
|
;
|
|
}
|
|
@each $location in $grid-locations{
|
|
##{$location}{
|
|
grid-area:$location;
|
|
}
|
|
}
|
|
.help{
|
|
grid-area: help;
|
|
white-space: pre-wrap;
|
|
text-transform: normal;
|
|
font-size: 0.5rem;
|
|
}
|
|
.accented{
|
|
accent-color:var(--backColor);
|
|
}
|
|
.fillTrack{
|
|
position: relative;
|
|
display: inline-flex;
|
|
gap: var(--track-gap);
|
|
align-items: center;
|
|
.separated-label{
|
|
width:var(--fillTrackRadioWidth);
|
|
height:var(--fillTrackRadioHeight);
|
|
}
|
|
.separated-span{
|
|
width:var(--fillTrackSpanWidth);
|
|
height:var(--fillTrackSpanHeight);
|
|
box-sizing:border-box;
|
|
}
|
|
.separated-label,
|
|
.separated-span{
|
|
-webkit-apperance: none;
|
|
appearance: none;
|
|
border: 1px solid black;
|
|
background-color: var(--selectedRadio);
|
|
order: 1;
|
|
border-radius:0;
|
|
flex:var(--fillItemFlex);
|
|
box-sizing:content-box;
|
|
&:before{
|
|
background-color:var(--selectedRadio);
|
|
}
|
|
&:checked{
|
|
display: none;
|
|
}
|
|
&.clearer{
|
|
order: 2;
|
|
&:checked{
|
|
display: none;
|
|
}
|
|
}
|
|
&:checked ~ .separated-label{
|
|
order: 3;
|
|
background-color: white;
|
|
&:before{
|
|
background-color:white;
|
|
}
|
|
}
|
|
}
|
|
.hidden + .separated-span ~ .separated-span{
|
|
background-color:white;
|
|
}
|
|
.separated-label{
|
|
cursor: pointer;
|
|
&[value="0"] + .readonly-dot{
|
|
display:none;
|
|
}
|
|
}
|
|
&:is(:hover,:focus-within,:focus){
|
|
.clearer,
|
|
.clearer:before{
|
|
background-color: var(--selectedRadio);
|
|
background-image: linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 2px), transparent calc(48% + 2px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 2px), transparent calc(48% + 2px));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
main#main:not(.all) > section:not(.active-section){
|
|
display:none;
|
|
}
|
|
#summary{
|
|
position:sticky;
|
|
top:0px;
|
|
z-index:110;
|
|
grid-area:summary;
|
|
background-color:var(--backColor);
|
|
border-radius:10px 10px 0 0;
|
|
border:{
|
|
width:2px 5px;
|
|
style:solid;
|
|
color:var(--borderColor);
|
|
}
|
|
filter:drop-shadow(0px -10px white);
|
|
padding:5px;
|
|
display:grid;
|
|
grid-template-columns: 1fr [strength-start fate-start] auto [strength-end fate-end health-start charisma-start] auto [health-end charisma-end perception-start intelligence-start] auto [perception-end intelligence-end dexterity-start willpower-start] auto [dexterity-end willpower-end];
|
|
grid-template-rows: [strength-start health-start perception-start dexterity-start] 1rem [fate-start charisma-start intelligence-start willpower-start] 1rem [strength-end health-end perception-end dexterity-end] 1rem [fate-end charisma-end intelligence-end willpower-end];
|
|
grid-gap:var(--half-gap);
|
|
grid-template-areas:
|
|
"character_name . . . ."
|
|
"character_name . . . ."
|
|
"alias . . . ."
|
|
;
|
|
@each $area in character_name,alias,strength,health,perception,dexterity,fate,charisma,intelligence,willpower{
|
|
> .#{$area}{
|
|
grid-area:$area;
|
|
}
|
|
}
|
|
.h4,.h5{
|
|
line-height:0;
|
|
place-self:center;
|
|
}
|
|
h6{
|
|
text-transform:uppercase;
|
|
}
|
|
*{
|
|
color:var(--fontColor);
|
|
}
|
|
> .ability-summary{
|
|
align-self:center;
|
|
display:grid;
|
|
grid-template-columns: 2.5rem repeat(3,1rem auto);
|
|
> .die-num{
|
|
justify-self:end;
|
|
}
|
|
> .die-size{
|
|
justify-self:start;
|
|
text-transform:initial;
|
|
}
|
|
}
|
|
}
|
|
.sticky-sub{
|
|
@extend %sticky-sub;
|
|
&.background{
|
|
background-color:white;
|
|
grid-area:sticky-background;
|
|
box-shadow:0 0 0 10px white;
|
|
}
|
|
}
|
|
#reverence{
|
|
display:grid;
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 2rem 2rem 1fr;
|
|
grid-row-gap:var(--half-gap);
|
|
grid-template-areas:
|
|
"header"
|
|
"."
|
|
"help"
|
|
;
|
|
background-color:teal;
|
|
background:
|
|
radial-gradient(transparent,80%,grey),
|
|
linear-gradient(90deg,teal,white,teal)
|
|
;
|
|
border:2px solid black;
|
|
@include reverence;
|
|
}
|
|
#defenses{
|
|
display:grid;
|
|
grid:
|
|
repeat(2,auto)
|
|
/
|
|
repeat(3,1fr)
|
|
;
|
|
grid-template-areas:
|
|
"hp hp_max damage_reduction damage_reduction"
|
|
"reaction_defense move_speed melee_multiplier ranged_multiplier"
|
|
;
|
|
align-items:start;
|
|
@each $field in hp,hp_max,damage_reduction,reaction_defense,move_speed,melee_multiplier,ranged_multiplier{
|
|
.#{$field}{
|
|
grid-area:$field;
|
|
}
|
|
}
|
|
|
|
}
|
|
#exertion{
|
|
display:grid;
|
|
grid-template-rows: 2rem 1rem 0.25rem 1fr;
|
|
grid-row-gap:5px;
|
|
grid-template-areas:
|
|
"header"
|
|
"."
|
|
"."
|
|
"help"
|
|
;
|
|
border:2px solid black;
|
|
background-color:teal;
|
|
background:
|
|
radial-gradient(transparent,80%,grey),
|
|
linear-gradient(90deg,#ca6866,white,#ca6866)
|
|
;
|
|
@include exertion;
|
|
}
|
|
#section-tabs{
|
|
position:sticky;
|
|
top:-1px;
|
|
border-radius:5px;
|
|
background-color:#adadad;
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-self:start;
|
|
@include pseudoRadio($backColor: var(--backColor),$color: var(--fontColor));
|
|
> .section-control{
|
|
@include borderedLabel($color:black,$borderColor:transparent);
|
|
transform:rotate(-180deg);
|
|
writing-mode:vertical-rl;
|
|
}
|
|
input:checked + label,label:hover{
|
|
box-shadow:inset 0 0 5px var(--fontColor);
|
|
}
|
|
}
|
|
#character_details{
|
|
$detailFields:character_name, gender, appearance, body_type, reasoning, alias, weight, height, age, character_description, hair, eyes, personnel_class;
|
|
display:grid;
|
|
grid-template-columns: 2fr repeat(2,1fr) 2fr;
|
|
grid-template-rows: auto auto auto auto auto auto auto;
|
|
grid-gap:var(--half-gap);
|
|
grid-template-areas:
|
|
"character_name character_name alias alias"
|
|
"character_name character_name alias alias"
|
|
"gender weight weight height"
|
|
"age hair hair eyes"
|
|
"appearance body_type body_type reasoning"
|
|
"personnel_class personnel_class . credits"
|
|
"security_level security_level character_description character_description"
|
|
;
|
|
@each $field in $detailFields{
|
|
> .#{$field}{
|
|
grid-area:$field;
|
|
}
|
|
}
|
|
.body_type{
|
|
place-self:center;
|
|
}
|
|
.personnel_class{
|
|
place-self:start center;
|
|
display:grid;
|
|
grid-template-columns: repeat(5,auto);
|
|
grid-template-rows: repeat(2,auto);
|
|
grid-column-gap:var(--half-gap);
|
|
h5{
|
|
grid-column: span 5;
|
|
}
|
|
@include pseudoRadio;
|
|
> label{
|
|
font-family:Baumans;
|
|
display:grid;
|
|
place-items:center;
|
|
place-self:center;
|
|
height:1rem;
|
|
display: inline-block;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
#security_level{
|
|
place-self:start center;
|
|
display:grid;
|
|
grid-template-columns:8rem auto;
|
|
grid-template-rows: auto auto auto;
|
|
grid-template-areas:
|
|
"head head"
|
|
"qr-code merit"
|
|
"qr-code id"
|
|
;
|
|
border-radius:10px;
|
|
border-width: 2px 3px 3px 2px;
|
|
border: solid black;
|
|
overflow:hidden;
|
|
> .head{
|
|
--scpSize:6rem;
|
|
background-color: var(--backColor);
|
|
transition: var(--focusTrans);
|
|
grid-area:head;
|
|
display:grid;
|
|
grid-template-columns: 10rem 5rem 1fr;
|
|
grid-template-rows: calc(var(--scpSize) - 1rem) 2rem;
|
|
grid-template-areas:
|
|
"header logo level"
|
|
"sub . level"
|
|
;
|
|
border-bottom:2px solid var(--borderColor);
|
|
*:not(input){
|
|
color:var(--fontColor);
|
|
}
|
|
> .header{
|
|
grid-area:header;
|
|
font-size:var(--scpSize);
|
|
text-transform:uppercase;
|
|
place-self:start center;
|
|
line-height:calc(var(--scpSize) - 1rem);
|
|
}
|
|
.sub-header{
|
|
font-family:Baumans;
|
|
grid-area:sub;
|
|
font-size:calc(var(--scpSize) * 0.16);
|
|
}
|
|
.transparent-logo{
|
|
grid-area:logo;
|
|
width:100%;
|
|
place-self:center;
|
|
}
|
|
.security_level{
|
|
grid-area:level;
|
|
place-items:center;
|
|
gap:0px;
|
|
place-self:center;
|
|
>input{
|
|
@extend %h1;
|
|
width:5rem;
|
|
place-self:start center;
|
|
background-color:white;
|
|
height: unset;
|
|
color:black;
|
|
}
|
|
> span{
|
|
font-size:0.75rem;
|
|
font-family:baumans;
|
|
margin:0;
|
|
}
|
|
}
|
|
}
|
|
> .qr-code{
|
|
grid-area:qr-code;
|
|
background-image:url('https://s3.amazonaws.com/files.d20.io/images/237721889/dzJg1nel3HT7J2OhxtWBJg/thumb.png');
|
|
background-repeat:no-repeat;
|
|
background-size:contain;
|
|
place-self:center;
|
|
width:100%;
|
|
aspect-ratio:1/1;
|
|
}
|
|
> .merit{
|
|
--selectedRadio:var(--backColor);
|
|
--track-gap:calc(var(--tiny-gap) / 2);
|
|
$meritNum:1,2,3,4,5,6,7,8,9,10;
|
|
grid-area:merit;
|
|
display:grid;
|
|
grid-template-columns: 3rem 1fr;
|
|
grid-template-rows: auto;
|
|
grid-template-areas:
|
|
"header tracker"
|
|
;
|
|
grid-gap:var(--half-gap);
|
|
padding-right:var(--half-gap);
|
|
> h5{
|
|
place-self:center;
|
|
white-space:pre-wrap;
|
|
place-self:center;
|
|
}
|
|
> .fillTrack{
|
|
place-self:center;
|
|
grid-auto-columns:.9rem;
|
|
> .separated-label{
|
|
$chevron:polygon(45% 0, 100% 50%, 45% 100%, 0% 100%, 55% 50%, 0% 0%);
|
|
filter:drop-shadow(-1px 0px 0 black) drop-shadow(1px 0px 0 black) drop-shadow(0px -1px 0 black) drop-shadow(0px 1px 0 black);
|
|
background-color:transparent !important;
|
|
border:0px solid transparent;
|
|
&:before{
|
|
clip-path:$chevron;
|
|
grid-area:b;
|
|
position:absolute;
|
|
content:'';
|
|
place-self:center;
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .id{
|
|
padding:5px 0 0 5px;
|
|
display:grid;
|
|
--arrowsize:1.5rem;
|
|
grid-template-columns: 3rem 1fr;
|
|
grid-template-rows: 3.5rem;
|
|
grid-column-gap: var(--half-gap);
|
|
grid-template-areas:
|
|
"logo id"
|
|
;
|
|
> .black-logo{
|
|
grid-area:logo;
|
|
}
|
|
> *{
|
|
color:var(--fontColor);
|
|
}
|
|
> span[name*="attr"]{
|
|
place-self:start center;
|
|
font-size: .65rem;
|
|
place-self:center;
|
|
}
|
|
> :not([name*="attr"]){
|
|
font-size:0.5rem;
|
|
}
|
|
background-color: var(--backColor);
|
|
transition: var(--focusTrans);
|
|
grid-area:id;
|
|
border: solid var(--borderColor);
|
|
border-width: 2px 0 0 2px;
|
|
}
|
|
}
|
|
#credits.input-label{
|
|
align-self:start;
|
|
height:2rem;
|
|
}
|
|
#attributes{
|
|
$detailSize:0.75rem;
|
|
$detailColor:red;
|
|
$d8Num:1,2,3,4,5,6,7,8,9,10,11,12;
|
|
$d10Num:1,2,3,4,5,6;
|
|
$d12Num:1,2,3;
|
|
--fillTrackRadioHeight:2.5rem;
|
|
--track-gap:0;
|
|
--fillItemFlex:1 1 0;
|
|
&.active-section{
|
|
display:grid;
|
|
grid-template-columns: repeat(6,auto);
|
|
grid-gap:var(--grid-gap);
|
|
place-content:center;
|
|
> .ability_score{
|
|
grid-column:span 2;
|
|
&:nth-last-child(2){
|
|
grid-column:2 / span 2;
|
|
}
|
|
}
|
|
.available-dice{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
}
|
|
}
|
|
&:not(.active-section){
|
|
> .available-dice{
|
|
display:grid;
|
|
grid-template-columns:repeat(3,1fr);
|
|
gap:var(--half-gap);
|
|
margin-bottom:var(--grid-gap);
|
|
box-shadow:0 0 0 10px white;
|
|
z-index:100;
|
|
@extend %sticky-sub;
|
|
h4{
|
|
grid-column:1 / -1;
|
|
}
|
|
}
|
|
}
|
|
> .available-dice{
|
|
grid-column:1/-1;
|
|
background-color:white;
|
|
>button[type="action"]{
|
|
background-color:#ededed;
|
|
box-shadow:inset 0 0 5px black;
|
|
color:black;
|
|
border-radius:5px;
|
|
padding:3px 5px;
|
|
display:flex;
|
|
justify-content: center;
|
|
transition:var(--focusTrans);
|
|
> span{
|
|
text-transform:initial;
|
|
}
|
|
&:hover{
|
|
background-color:var(--backColor);
|
|
transition:var(--focusTrans);
|
|
box-shadow:inset 0 0 5px var(--fontColor);
|
|
*{
|
|
color:var(--fontColor);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover,
|
|
&:focus-within{
|
|
> .ability_score{
|
|
:is(label,span):not(.roll-label){
|
|
color:$detailColor;
|
|
transition: var(--focusTrans);
|
|
}
|
|
}
|
|
}
|
|
> .ability_score{
|
|
position:relative;
|
|
display:grid;
|
|
grid-template-columns: 4rem 13rem;
|
|
grid-template-rows: repeat(4,auto);
|
|
grid-template-areas:
|
|
"header header "
|
|
"d8 ."
|
|
"d10 ."
|
|
"d12 ."
|
|
;
|
|
place-self:center;
|
|
margin-bottom:var(--grid-gap);
|
|
background-color:black;
|
|
border:1px solid black;
|
|
.attribute,
|
|
h5{
|
|
border:1px solid black;
|
|
line-height:var(--fillTrackRadioHeight);
|
|
text-align:center;
|
|
background-color: white;
|
|
&[data-i18n*="d8"]{
|
|
grid-area:d8;
|
|
}
|
|
&[data-i18n*="d10"]{
|
|
grid-area:d10;
|
|
}
|
|
&[data-i18n*="d12"]{
|
|
grid-area:d12;
|
|
}
|
|
}
|
|
.attribute{
|
|
grid-area:header;
|
|
text-align:center;
|
|
}
|
|
}
|
|
.fill-label{
|
|
color:transparent;
|
|
font-size: $detailSize;
|
|
overflow:hidden;
|
|
transition: var(--focusTrans);
|
|
}
|
|
}
|
|
#actions{
|
|
column-width:255px;
|
|
column-gap:var(--grid-gap);
|
|
column-rule:1px solid black;
|
|
.thick{
|
|
padding-bottom:var(--half-gap);
|
|
}
|
|
}
|
|
:is(#knowledges,#skills,#abilities){
|
|
display:contents;
|
|
>.header{
|
|
@extend %box-header;
|
|
|
|
}
|
|
&:not(:first-child){
|
|
> .header{
|
|
margin-top:var(--half-gap);
|
|
}
|
|
}
|
|
> div{
|
|
position:relative;
|
|
display:inline-grid;
|
|
width:100%;
|
|
grid-template-columns:1fr 2rem 2rem;
|
|
grid-gap:var(--half-gap);
|
|
margin-bottom:var(--half-gap);
|
|
> label{
|
|
place-self:center start;
|
|
white-space: pre-wrap;
|
|
text-transform: capitalize;
|
|
}
|
|
> input[name*="base_mod"]{
|
|
opacity:0;
|
|
z-index:10;
|
|
transition: var(--inputSwap);
|
|
position:absolute;
|
|
grid-column:3/4;
|
|
+ input{
|
|
opacity:1;
|
|
transition: var(--inputSwap);
|
|
}
|
|
&:is(:hover,:focus){
|
|
opacity:1;
|
|
transition: var(--inputSwap);
|
|
+ input{
|
|
opacity:0;
|
|
transition: var(--inputSwap);
|
|
}
|
|
}
|
|
}
|
|
>.underlined{
|
|
align-self:center;
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
#attacks{
|
|
$attackHeader: weapon,skill,recoil,melee,hip,ready,aim,clip,clip_max,base,x,element,range,special,to-hit,damage,melee-mult,ranged-mult;
|
|
--gridColumns:
|
|
[header-start] 2rem 1fr [weapon] 9rem [skill] 4rem [recoil] repeat(4, 3rem) [to-hits] repeat(2,2.5rem) [clip] repeat(2, 4rem) [damages] 4rem [element] 3rem [range] 1fr [special header-end]
|
|
;
|
|
--attackColumns:". weapon skill recoil melee hip ready aim clip clip_max base x element range special";
|
|
display:grid;
|
|
grid:
|
|
[header-start] auto [header-end] 2rem 2rem auto 1rem
|
|
/ /*Row above column below*/
|
|
var(--gridColumns)
|
|
;
|
|
grid-auto-flow:row dense;
|
|
grid-gap:var(--half-gap);
|
|
grid-template-areas:
|
|
". . . . melee-mult melee-mult melee-mult melee-mult melee-mult . ranged-mult ranged-mult ranged-mult ranged-mult . "
|
|
". . . . to-hit to-hit to-hit to-hit . . damage damage . . . "
|
|
var(--attackColumns)
|
|
"content content content content content content content content content content content content content content content"
|
|
"control control control control control control control control control control control control control control control"
|
|
;
|
|
place-content:start stretch;
|
|
>h4:not(input){
|
|
grid-area:header;
|
|
text-align:left;
|
|
padding-left:1rem;
|
|
@extend %box-header;
|
|
}
|
|
@each $head in $attackHeader{
|
|
.#{$head}{
|
|
grid-area:$head;
|
|
}
|
|
}
|
|
> .input-label:is(.melee-mult,.ranged-mult){
|
|
grid-template-columns: auto 3rem;
|
|
justify-content: center;
|
|
}
|
|
> .repeat-columns{
|
|
display:contents;
|
|
> h5,h6{
|
|
border-bottom:1px solid black;
|
|
}
|
|
h6{
|
|
text-transform: capitalize;
|
|
}
|
|
.clip{
|
|
grid-column:clip-start / clip_max-end;
|
|
grid-row:clip-start / clip-end;
|
|
}
|
|
}
|
|
>.repcontainer{
|
|
grid-area:content;
|
|
>.repitem{
|
|
position:relative;
|
|
grid:
|
|
auto
|
|
/
|
|
var(--gridColumns)
|
|
;
|
|
grid-template-areas: var(--attackColumns);
|
|
> :is(.base,.x){
|
|
text-align:center;
|
|
}
|
|
> .roll-label{
|
|
opacity:0;
|
|
transition:var(--focusTrans);
|
|
}
|
|
&:is(:hover,:focus-within) > .roll-label{
|
|
opacity:100;
|
|
transition:var(--focusTrans);
|
|
}
|
|
> input[name="attr_recoil"]{
|
|
opacity:1;
|
|
transition: var(--inputSwap);
|
|
}
|
|
> input[name="attr_recoil_base"]{
|
|
opacity:0;
|
|
z-index:10;
|
|
transition: var(--inputSwap);
|
|
&:is(:hover,:focus){
|
|
opacity:1;
|
|
transition: var(--inputSwap);
|
|
+input{
|
|
opacity:0;
|
|
transition: var(--inputSwap);
|
|
}
|
|
}
|
|
}
|
|
> .hover-button-container{
|
|
position:relative;
|
|
display:grid;
|
|
> *{
|
|
grid-column:1/2;
|
|
grid-row:1/2;
|
|
}
|
|
label{
|
|
position:relative;
|
|
opacity:0;
|
|
top:0;
|
|
background-color:transparent;
|
|
transition:var(--focusTrans);
|
|
display:grid;
|
|
grid-template-columns:1fr;
|
|
place-content:center;
|
|
}
|
|
input[type="radio"]{
|
|
appearance:checkbox;
|
|
accent-color:var(--backColor);
|
|
}
|
|
&:is(:hover) label{
|
|
z-index:10;
|
|
opacity:1;
|
|
top:100%;
|
|
background-color:white;
|
|
transition:var(--focusTrans);
|
|
height:150%;
|
|
}
|
|
input[type='hidden'] + input{
|
|
transition:var(--focusTrans);
|
|
place-self:center;
|
|
}
|
|
@each $stance,$value in ("hip":1,"ready":2,"aim":3){
|
|
&.#{$stance}{
|
|
input[type='hidden'][value="#{$value}"]+input{
|
|
@include inputHighlight;
|
|
background-color:var(--backColor);
|
|
color:var(--fontColor);
|
|
font-weight:bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.editmode > .repitem > .itemcontrol{
|
|
grid-column:1/-1;
|
|
position:absolute;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
}
|
|
}
|
|
> .repcontrol{
|
|
grid-area:control;
|
|
order:10;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
}
|
|
}
|
|
#equipment{
|
|
&.repeating-equipment h4{
|
|
text-align:left;
|
|
@extend %box-header;
|
|
}
|
|
.repcontainer{
|
|
display:block;
|
|
column-width:200px;
|
|
> .repitem{
|
|
display:inline-grid;
|
|
}
|
|
.item-container{
|
|
display:flex;
|
|
gap:var(--half-gap);
|
|
}
|
|
}
|
|
> .repcontrol{
|
|
grid-area:control;
|
|
order:10;
|
|
display:flex;
|
|
justify-content:space-between;
|
|
}
|
|
.carry-check:not(:checked) + .item-container *{
|
|
color:#00000080;
|
|
border-bottom-color:currentColor;
|
|
}
|
|
}
|
|
/*
|
|
|
|
Roll Template
|
|
|
|
*/
|
|
.sheet-rolltemplate-scp{
|
|
--templateRadius:1rem;
|
|
--dieSize:50px;
|
|
--templateBorderW:2px 5px 2px 5px;
|
|
--fumbleColor:red;
|
|
--critColor:green;
|
|
--innerBorderRadius:5px;
|
|
position:relative;
|
|
margin-left:-40px;
|
|
h3{
|
|
line-height:20px;
|
|
text-transform:capitalize;
|
|
}
|
|
&:first-child{
|
|
& > .sheet-scp.sheet-continuation{
|
|
margin-top:-9px;
|
|
border-top-width:0;
|
|
}
|
|
}
|
|
&:not(:first-child){
|
|
margin-top:10px;
|
|
}
|
|
> .sheet-scp{
|
|
border: solid black;
|
|
overflow:hidden;
|
|
border-width:var(--templateBorderW);
|
|
border-color:var(--borderColor);
|
|
background-color:var(--backColor);
|
|
color:var(--fontColor);
|
|
@include securityStyle;
|
|
h4{
|
|
text-transform:capitalize;
|
|
}
|
|
.sheet-color-cond,
|
|
.sheet-color-cond *{
|
|
color:var(--fontColor);
|
|
}
|
|
&:not(.sheet-continuation){
|
|
border-radius:var(--templateRadius) var(--templateRadius) 0 0;
|
|
.sheet-roll-content{
|
|
border-top-left-radius:var(--innerBorderRadius);
|
|
border-top-right-radius:var(--innerBorderRadius);
|
|
}
|
|
}
|
|
&.sheet-continuation{
|
|
.sheet-roll-content{
|
|
padding:0;
|
|
}
|
|
&.sheet-first{
|
|
.sheet-results{
|
|
background-color:var(--backColor);
|
|
border-radius:var(--innerBorderRadius);
|
|
}
|
|
.sheet-result-values{
|
|
background-color:white;
|
|
border-radius:var(--innerBorderRadius);
|
|
width:calc(100% + 5px);
|
|
margin-left:-5px;
|
|
}
|
|
}
|
|
.sheet-result-values{
|
|
width:100%;
|
|
}
|
|
}
|
|
.sheet-template-head{
|
|
color:var(--fontColor);
|
|
display:grid;
|
|
grid-template-rows:auto auto;
|
|
grid-gap:5px;
|
|
padding:5px;
|
|
&:not(.sheet-element){
|
|
grid-template-columns:39px 1fr;
|
|
grid-template-areas:
|
|
"black-logo roll_name"
|
|
"black-logo character_name"
|
|
;
|
|
}
|
|
&.sheet-element{
|
|
grid-template-columns:39px 1fr 2fr;
|
|
grid-template-areas:
|
|
"black-logo roll_name roll_name"
|
|
"black-logo element character_name"
|
|
;
|
|
}
|
|
> *{
|
|
white-space:pre-wrap;
|
|
text-align:left;
|
|
}
|
|
.sheet-black-logo{
|
|
grid-area:black-logo;
|
|
place-self:start stretch;
|
|
}
|
|
.sheet-roll_name{
|
|
grid-area:roll_name;
|
|
place-self:center end;
|
|
}
|
|
.sheet-character_name{
|
|
grid-area:character_name;
|
|
place-self:start end;
|
|
}
|
|
.sheet-element{
|
|
grid-area:element;
|
|
border-width:2px 5px;
|
|
border-style:solid;
|
|
border-color:var(--fontColor);
|
|
border-radius:var(--templateRadius);
|
|
background-color:white;
|
|
padding:0.5rem;
|
|
}
|
|
}
|
|
.sheet-modifier{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: space-between;
|
|
align-items:center;
|
|
> :not(span){
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
.sheet-roll-content{
|
|
background-color: white;
|
|
padding:2px;
|
|
}
|
|
.sheet-results{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: space-between;
|
|
align-items:center;
|
|
padding-left:5px;
|
|
}
|
|
.sheet-result-values{
|
|
display:inline-flex;
|
|
flex-wrap:wrap;
|
|
justify-content: space-evenly;
|
|
align-items:center;
|
|
}
|
|
> .sheet-total{
|
|
position:relative;
|
|
display:grid;
|
|
place-items:center;
|
|
color:var(--fontColor);
|
|
grid-template-columns:106px 50px 10px 70px;
|
|
grid-template-rows:auto 1fr 1fr;
|
|
grid-template-areas:
|
|
"high-label . . total-label"
|
|
"high modifier . total "
|
|
"high ones . total ";
|
|
place-content:stretch center;
|
|
padding:5px;
|
|
@each $label in high,total{
|
|
> .sheet-#{$label}-label{
|
|
grid-area:#{$label}-label;
|
|
}
|
|
}
|
|
.sheet-modifier{
|
|
grid-area:modifier;
|
|
border-radius:0 var(--templateRadius) 0 0;
|
|
}
|
|
.sheet-ones{
|
|
grid-area:ones;
|
|
border-radius:0 0 var(--templateRadius);
|
|
> span{
|
|
color:var(--fumbleColor);
|
|
}
|
|
}
|
|
> .sheet-modifier,
|
|
> .sheet-ones{
|
|
background-color:white;
|
|
border-width:var(--templateBorderW);
|
|
border-color:var(--borderColor);
|
|
border-style:solid;
|
|
display:grid;
|
|
place-self:stretch;
|
|
place-content:center;
|
|
position:relative;
|
|
left:-5px;
|
|
}
|
|
> .sheet-high-dice{
|
|
border-radius:var(--templateRadius) 0 0 var(--templateRadius);
|
|
grid-area:high;
|
|
justify-self:end;
|
|
place-self: stretch;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.sheet-val-1{
|
|
color:var(--fumbleColor);
|
|
}
|
|
.sheet-d8.sheet-val-8 > .sheet-die-icon,
|
|
.sheet-d10.sheet-val-10 > .sheet-die-icon,
|
|
.sheet-d12.sheet-val-12 > .sheet-die-icon,
|
|
.sheet-d20.sheet-val-20 > .sheet-die-icon{
|
|
color:var(--critColor);
|
|
}
|
|
}
|
|
> .sheet-total-value{
|
|
border-radius:var(--templateRadius);
|
|
}
|
|
> .sheet-high-dice,
|
|
> .sheet-total-value{
|
|
background-color:white;
|
|
border-width:var(--templateBorderW);
|
|
border-color:var(--borderColor);
|
|
border-style:solid;
|
|
}
|
|
> .sheet-total-value{
|
|
grid-area:total;
|
|
--totalSize:calc(var(--dieSize)/2);
|
|
font-size:var(--totalSize);
|
|
line-height:var(--totalSize);
|
|
padding:5px;
|
|
display:grid;
|
|
place-content:center;
|
|
width:100%;
|
|
height:100%;
|
|
box-sizing:border-box;
|
|
> span{
|
|
font-size:var(--totalSize);
|
|
}
|
|
}
|
|
}
|
|
.inlinerollresult{
|
|
position:relative;
|
|
&[title*="0[computed value]"],
|
|
&[original-title*="[computed value]"]{
|
|
pointer-events:none;
|
|
}
|
|
&,
|
|
&:is(.fullcrit,.fullfail,.importantroll){
|
|
border:none;
|
|
background-color:transparent;
|
|
}
|
|
&.fullcrit + .sheet-die-icon{
|
|
color:green;
|
|
}
|
|
&.fullfail + .sheet-die-icon{
|
|
color:red;
|
|
}
|
|
&.importantroll + .sheet-die-icon{
|
|
color:blue;
|
|
}
|
|
}
|
|
.sheet-die-icon{
|
|
font-size:var(--dieSize);
|
|
place-self:center;
|
|
&:before{
|
|
line-height: var(--dieSize);
|
|
}
|
|
}
|
|
@each $die in $dieSizes{
|
|
.sheet-d#{$die}{
|
|
display:inline-grid;
|
|
grid-template-columns:auto;
|
|
grid-template-rows:auto;
|
|
grid-template-areas:"content";
|
|
> *{
|
|
grid-area:content;
|
|
}
|
|
> .inlinerollresult{
|
|
opacity:0;
|
|
text-align:center;
|
|
}
|
|
> .sheet-die-icon{
|
|
&:before{
|
|
font-family:dicefontd#{$die};
|
|
}
|
|
}
|
|
@for $val from 1 through $die{
|
|
$letter:map-get($dieLetter,$val);
|
|
&.sheet-val-#{$val} > .sheet-die-icon:before{
|
|
@if $die == 10 and $val == 10{
|
|
content: "K";
|
|
}@else{
|
|
content:"#{$letter}";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sheet-damage{
|
|
display:grid;
|
|
grid-template-columns: repeat(3,50px);
|
|
grid-template-rows:auto 34px;
|
|
place-content:center;
|
|
grid-column-gap:10px;
|
|
grid-template-areas:
|
|
"base-label x-label total-label"
|
|
"base-damage x-damage total-damage"
|
|
;
|
|
border-radius: 0 0 var(--innerBorderRadius) var(--innerBorderRadius);
|
|
padding:2px;
|
|
span{
|
|
font-size:2rem;
|
|
}
|
|
@each $field in base,x,total{
|
|
.sheet-#{$field}-damage{
|
|
grid-area:#{$field}-damage;
|
|
border-width:2px 5px;
|
|
border-style:solid;
|
|
border-color:var(--fontColor);
|
|
border-radius:var(--templateRadius);
|
|
background-color:white;
|
|
display:grid;
|
|
grid-template-columns:auto;
|
|
grid-template-rows:auto;
|
|
place-content:center;
|
|
}
|
|
.sheet-#{$field}-label{
|
|
grid-area:#{$field}-label
|
|
}
|
|
}
|
|
}
|
|
.sheet-roll-buttons{
|
|
display:flex;
|
|
justify-content: space-around;
|
|
flex-wrap:wrap;
|
|
padding:2px;
|
|
a[href^="!"],
|
|
a[href^="~"]{
|
|
background-color:white;
|
|
border-radius:var(--templateRadius);
|
|
border-width:var(--templateBorderW);
|
|
border-color:black;
|
|
text-transform:uppercase;
|
|
color:var(--selectColor);
|
|
text-shadow:var(--selectShadow);
|
|
font-weight:bold;
|
|
:hover,
|
|
:focus{
|
|
background-color:var(--backColor);
|
|
color:var(--fontColor);
|
|
border-color:var(--borderColor);
|
|
transition:var(--focusTrans);
|
|
}
|
|
}
|
|
}
|
|
&.sheet-finished{
|
|
border-bottom-width: 2px;
|
|
.sheet-roll-content{
|
|
border-bottom-left-radius:var(--innerBorderRadius);
|
|
border-bottom-right-radius:var(--innerBorderRadius);
|
|
}
|
|
&.sheet-continuation{
|
|
border-radius:0 0 var(--templateRadius) var(--templateRadius);
|
|
}
|
|
&:not(.sheet-continuation){
|
|
border-radius:var(--templateRadius);
|
|
}
|
|
}
|
|
}
|
|
.sheet-description{
|
|
border-radius:var(--innerBorderRadius);
|
|
background-color: white;
|
|
&:empty{
|
|
display:none;
|
|
}
|
|
> *{
|
|
padding:2px;
|
|
}
|
|
a,
|
|
a[href^="!"],
|
|
a[href^="~"]{
|
|
color:var(--selectColor);
|
|
text-shadow:var(--selectShadow);
|
|
font-weight:bold;
|
|
font-style:italic;
|
|
}
|
|
.sheet-range{
|
|
display:flex;
|
|
flex-wrap:wrap;
|
|
justify-content: space-between;
|
|
padding:2px;
|
|
}
|
|
}
|
|
} |