mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
902 lines
20 KiB
SCSS
902 lines
20 KiB
SCSS
@use 'Mixins/_systemplaceholders.scss';
|
|
|
|
//Sets the font-size to be used by rem unit calls
|
|
html{
|
|
font-size: 13px;
|
|
}
|
|
//Sets the bio/charsheet/a&a tab container to be sticky and float at the top
|
|
ul.nav-tabs.nav{
|
|
position:sticky;
|
|
top:0;
|
|
background-color:white;
|
|
z-index:9999;
|
|
margin-bottom:0px;
|
|
}
|
|
.nav-tabs li a{
|
|
font-family:var(--midHeaderFont);
|
|
padding:{
|
|
top: 18px;
|
|
bottom:15px;
|
|
};
|
|
&[data-tab='charsheet']{
|
|
background-image: url(https://s3.amazonaws.com/files.d20.io/images/259063058/V4Hm27FqfgBujU8bI74Xaw/original.png);
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
padding:{
|
|
left:50px;
|
|
right:12px;
|
|
};
|
|
}
|
|
}
|
|
.itemcontrol{
|
|
z-index:10;
|
|
}
|
|
.image-input{
|
|
cursor:pointer;
|
|
}
|
|
//Default settings for the .charsheet container
|
|
.ui-dialog .tab-content .charsheet{
|
|
padding-top:0px;
|
|
@extend %defaultStyles;
|
|
.adaptive-text{
|
|
@extend %adaptiveText;
|
|
}
|
|
.repeat-columns{
|
|
@extend %grid;
|
|
> *{
|
|
background-color:var(--subHeadBackColor);
|
|
border:1px solid black;
|
|
}
|
|
}
|
|
.image-container{
|
|
@extend %grid;
|
|
grid-template-columns:"content";
|
|
}
|
|
.image-container__input{
|
|
z-index:10;
|
|
background-color:white;
|
|
box-shadow:0 0 var(--grid-gap) var(--grid-gap) white;
|
|
grid-area:content;
|
|
place-self:center;
|
|
width:calc(100% - (var(--big-gap) * 2));
|
|
transition:opacity var(--focusTiming),height var(--focusTiming);
|
|
opacity:0;
|
|
height:0;
|
|
overflow:hidden;
|
|
span{
|
|
white-space: pre-wrap;
|
|
}
|
|
input{
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
}
|
|
&.active{
|
|
opacity:1;
|
|
height:auto;
|
|
}
|
|
}
|
|
.image-container__button{
|
|
grid-area:content;
|
|
}
|
|
.base-container{
|
|
@extend %grid;
|
|
grid-template-areas:'content';
|
|
}
|
|
.base-container__actual{
|
|
grid-area:content;
|
|
}
|
|
.base-container__interact{
|
|
grid-area:content;
|
|
z-index:1;
|
|
}
|
|
}
|
|
#main-nav{
|
|
--tabColor:white;
|
|
--tabBorder:drop-shadow(1px 0 0 grey) drop-shadow(-1px 0 0 grey) drop-shadow(0 -1px 0 grey) drop-shadow(0 1px 0 black);
|
|
display:grid;
|
|
gap:var(--half-gap);
|
|
grid-template-columns:1fr auto 1fr;
|
|
align-items:center;
|
|
position:sticky;
|
|
top:60px;
|
|
background:white;
|
|
box-shadow:-10px 0 0 0 white,10px 0 0 0 white,0 -6px white;
|
|
z-index:100;
|
|
border-bottom:1px solid black;
|
|
.nav__button{
|
|
font-style:normal;
|
|
color:grey;
|
|
}
|
|
.nav__button--settings{
|
|
@extend %pictos;
|
|
&.active,
|
|
&:hover{
|
|
color:black;
|
|
}
|
|
}
|
|
&.system-remnant{
|
|
.nav__button--tab {
|
|
background-color: var(--tabColor);
|
|
position: relative;
|
|
display: inline-block;
|
|
z-index: 2;
|
|
padding:calc(var(--half-gap) + 0.1rem);
|
|
filter:var(--tabBorder);
|
|
&.active,
|
|
&:hover{
|
|
@include systemplaceholders.activeTab;
|
|
}
|
|
&.active{
|
|
pointer-events: none;
|
|
}
|
|
&:before{
|
|
height: 100%;
|
|
width: 50px;
|
|
background-color: var(--tabColor);
|
|
content: "";
|
|
position: absolute;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.nav__button--tab--left{
|
|
border-radius:0 50% 0 0;
|
|
margin-left:1px;
|
|
justify-self:start;
|
|
&:before{
|
|
border-radius: 0 2px 0 0;
|
|
left: calc(100% - 40px);
|
|
top: 0px;
|
|
-webkit-transform: skewX(45deg);
|
|
transform: skewX(45deg);
|
|
}
|
|
}
|
|
.nav__button--tab--right{
|
|
border-radius:50% 0 0 0;
|
|
margin-right:1px;
|
|
justify-self:end;
|
|
&:before{
|
|
border-radius: 2px 0 0 0;
|
|
left: -5px;
|
|
top: 0px;
|
|
-webkit-transform: skewX(-45deg);
|
|
transform: skewX(-45deg);
|
|
}
|
|
}/*
|
|
.tab:nth-of-type(2) {
|
|
background-color: #555;
|
|
top: 10px;
|
|
left: 30px;
|
|
z-index: 1;
|
|
color: #EEE;
|
|
}
|
|
.tab:nth-of-type(2):before {
|
|
background-color: #555;
|
|
}
|
|
.tab:nth-of-type(2):hover,
|
|
.tab:nth-of-type(2):hover:before {
|
|
background-color: #159;
|
|
transition: 0.3s ease-out;
|
|
}*/
|
|
}
|
|
}
|
|
#main{
|
|
.system-header{
|
|
margin:0 auto;
|
|
width:200px;
|
|
}
|
|
article{
|
|
padding:var(--grid-gap);
|
|
}
|
|
article:not(.active){
|
|
display:none;
|
|
}
|
|
.roller{
|
|
@extend %roller;
|
|
}
|
|
.translate-control{
|
|
&:checked ~ .untranslated,
|
|
&:not(:checked) ~ .translated{
|
|
display:none;
|
|
}
|
|
}
|
|
.section{
|
|
transition:box-shadow var(--focusTiming),transform;
|
|
border-radius:6px;
|
|
padding:var(--half-gap);
|
|
&:hover{
|
|
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
|
|
}
|
|
}
|
|
}
|
|
// Settings Styling
|
|
#settings{
|
|
@extend %article-layout;
|
|
.input-label{
|
|
justify-content: space-between;
|
|
[name]:not([type=number], [type=checkbox], [type=radio]){
|
|
width:auto;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
section{
|
|
align-self:stretch;
|
|
align-content:start;
|
|
}
|
|
}
|
|
// Character styling
|
|
#character{
|
|
@extend %article-layout;
|
|
&.system-remnant{
|
|
grid-template-areas:
|
|
"."
|
|
"skills"
|
|
"skills"
|
|
;
|
|
border:{
|
|
left:1px solid black;
|
|
}
|
|
grid-template-rows:repeat(2,auto) 1fr;
|
|
}
|
|
}
|
|
#character-info{
|
|
@extend %repeat-section-layout;
|
|
> .health-track{
|
|
margin:0 -5px;
|
|
}
|
|
}
|
|
#stats{
|
|
grid-template-columns: auto 1fr repeat(2,auto);
|
|
grid-template-areas:
|
|
'header header header header'
|
|
'stat_points . . .'
|
|
'reserve . . .'
|
|
'. . . .'
|
|
'header2 header2 header2 header2'
|
|
;
|
|
h2{
|
|
grid-area:auto;
|
|
grid-column:1/-1;
|
|
}
|
|
> button{
|
|
grid-column:2;
|
|
}
|
|
@each $point in stat_points,reserve{
|
|
> .#{$point}{
|
|
grid-area:$point;
|
|
justify-self:end;
|
|
}
|
|
}
|
|
> .reserve{
|
|
box-sizing:border-box;
|
|
}
|
|
.equipment{
|
|
@extend %grid;
|
|
grid-template-areas: 'header';
|
|
gap:var(--half-gap);
|
|
grid-column:1/-1;
|
|
place-self:stretch;
|
|
h2{
|
|
grid-area:header;
|
|
}
|
|
.repitem{
|
|
@extend %grid;
|
|
}
|
|
.repeat-columns,
|
|
.repitem{
|
|
grid-template-columns: 1fr 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
#secondary{
|
|
> .secondaries{
|
|
@extend %grid;
|
|
grid-template-columns:1fr repeat(3,auto);
|
|
grid-template-areas:'header header header header';
|
|
}
|
|
> .combat-gear{
|
|
@extend %grid;
|
|
grid-template-areas:'header';
|
|
}
|
|
}
|
|
#skill{
|
|
@extend %repeat-section-layout;
|
|
grid-area:skills;
|
|
.repcontainer{
|
|
gap:0;
|
|
}
|
|
.repitem{
|
|
@extend %grid;
|
|
position:relative;
|
|
span{
|
|
align-self:center;
|
|
text-align:left;
|
|
}
|
|
}
|
|
.repeat-columns,
|
|
.repitem{
|
|
grid-template-columns:1rem 1fr 3rem 4rem 2.5rem;
|
|
> input{
|
|
width:100%;
|
|
}
|
|
}
|
|
.repeat-columns{
|
|
@each $num in 1,2,3,4{
|
|
:nth-child(#{$num}){
|
|
grid-column:$num + 1;
|
|
}
|
|
}
|
|
}
|
|
.raw-control:not(:checked) + .raw,
|
|
.raw-control:checked ~ .custom{
|
|
display:none;
|
|
}
|
|
.roller.raw{
|
|
grid-column:span 2;
|
|
}
|
|
}
|
|
@media (min-width:680px) {
|
|
#weapon,#remnant-weapons{
|
|
grid-column:span 2;
|
|
}
|
|
}
|
|
@media(min-width:1300px){
|
|
#main{
|
|
display:grid;
|
|
grid-template-columns:1fr 1fr;
|
|
column-gap:var(--big-gap);
|
|
.system-header{
|
|
grid-column:1/-1;
|
|
}
|
|
.sheet-state:not([value='settings']){
|
|
~ article:not(#settings){
|
|
display:grid;
|
|
align-self:start;
|
|
}
|
|
~ #main-nav{
|
|
.nav__button--tab{
|
|
@include systemplaceholders.activeTab;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#settings{
|
|
grid-column:1/-1;
|
|
}
|
|
#main-nav{
|
|
grid-column:1/-1;
|
|
}
|
|
}
|
|
#weapon{
|
|
@extend %repeat-section-layout;
|
|
input[type='text']{
|
|
width:100%;
|
|
}
|
|
.repitem{
|
|
@extend %grid;
|
|
row-gap:var(--half-gap);
|
|
> .underlined{
|
|
width:100%;
|
|
}
|
|
}
|
|
span.underlined{
|
|
display:block;
|
|
text-align:center;
|
|
padding:2px;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
border:{
|
|
width:1px 3px;
|
|
style:solid;
|
|
color:transparent transparent black transparent;
|
|
};
|
|
}
|
|
.repeat-columns,
|
|
.repitem{
|
|
grid-template-columns:1rem 1fr 10rem 7rem;
|
|
align-items:end;
|
|
}
|
|
.repeat-columns{
|
|
@each $num in 1,2,3{
|
|
:nth-child(#{$num}){
|
|
grid-column:$num + 1;
|
|
}
|
|
}
|
|
}
|
|
.headed-textarea{
|
|
grid-column:1/-1;
|
|
}
|
|
}
|
|
#adjustments{
|
|
display:contents;
|
|
.repitem{
|
|
@extend %grid;
|
|
gap:var(--half-gap);
|
|
}
|
|
input[type='text']{
|
|
width:100%;
|
|
}
|
|
.subsection{
|
|
@extend %repeat-section-layout;
|
|
}
|
|
}
|
|
|
|
// Battle Remnant Styling
|
|
#remnant{
|
|
@extend %article-layout;
|
|
&.system-remnant{
|
|
grid-template-areas:
|
|
"image"
|
|
"image"
|
|
;
|
|
border:{
|
|
right:1px solid black;
|
|
}
|
|
grid-template-rows:auto 1fr;
|
|
}
|
|
}
|
|
#remnant-pic{
|
|
grid-area:image;
|
|
>.input-label{
|
|
justify-self:start;
|
|
}
|
|
}
|
|
#remnant-ratings{
|
|
@extend %grid;
|
|
grid-template-columns:1fr repeat(2,auto);
|
|
grid-template-areas:'header header header';
|
|
.remnant-skills{
|
|
@extend %repeat-section-layout;
|
|
grid-template-areas:'header header header';
|
|
place-self:stretch;
|
|
grid-column:1/-1;
|
|
gap:0;
|
|
*{
|
|
place-self:stretch;
|
|
}
|
|
input{
|
|
width:100%;
|
|
}
|
|
&,
|
|
.repeat-columns{
|
|
grid-template-columns:1fr 4rem 3rem;
|
|
*{
|
|
align-self:center;
|
|
}
|
|
}
|
|
.repeat-columns{
|
|
grid-column:1/-1;
|
|
:not(:first-child){
|
|
text-align:center;
|
|
}
|
|
}
|
|
.roller{
|
|
justify-self:start;
|
|
}
|
|
input{
|
|
justify-self:center;
|
|
}
|
|
}
|
|
}
|
|
#remnant-stats{
|
|
@extend %grid;
|
|
grid-template-columns:1fr repeat(2,auto) 1fr repeat(2,auto);
|
|
grid-template-areas:
|
|
'header header header header header header'
|
|
'. . . . . .'
|
|
'. . . . . .'
|
|
'. . . . . .'
|
|
'assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_label assault_damage_input'
|
|
'strike_damage_label strike_damage_label strike_damage_label strike_damage_label strike_damage_label strike_damage_input'
|
|
'strike_range_label strike_range_label strike_range_label strike_range_label strike_range_label strike_range_input'
|
|
;
|
|
@each $field in strike_damage,strike_range,assault_damage{
|
|
.#{$field}_label{
|
|
grid-area:#{$field}_label;
|
|
}
|
|
.#{$field}_input{
|
|
grid-area:#{$field}_input;
|
|
}
|
|
}
|
|
}
|
|
#remnant-specialty{
|
|
@extend %repeat-section-layout;
|
|
}
|
|
#remnant-trait{
|
|
@extend %repeat-section-layout;
|
|
.repeat-columns,
|
|
.repitem{
|
|
grid-template-columns:1fr 4rem 4rem;
|
|
}
|
|
.repitem{
|
|
@extend %grid;
|
|
}
|
|
}
|
|
#remnant-drone{
|
|
@extend %repeat-section-layout;
|
|
.repitem{
|
|
@extend %grid;
|
|
grid-template-columns:repeat(2,1fr);
|
|
gap:var(--tiny-gap) var(--half-gap);
|
|
}
|
|
.input-label--button{
|
|
grid-column:1;
|
|
}
|
|
.strikerange{
|
|
grid-column:2;
|
|
}
|
|
.input-label{
|
|
span,button{
|
|
text-align:left;
|
|
}
|
|
&:not(.input-label--dual){
|
|
:not([name]){
|
|
flex:1 1 0;
|
|
}
|
|
}
|
|
}
|
|
.structure{
|
|
display:flex;
|
|
gap:var(--half-gap);
|
|
grid-column:1/-1;
|
|
place-self:center end;
|
|
grid-column:span 2;
|
|
*{
|
|
align-self:center;
|
|
}
|
|
}
|
|
}
|
|
#remnant-weapons{
|
|
@extend %repeat-section-layout;
|
|
.repeat-columns,
|
|
.repitem{
|
|
grid-template-columns:1rem 1fr 5rem 4rem 7rem 8rem 5rem;
|
|
}
|
|
.repeat-columns{
|
|
@each $num in 1,2,3,4,5,6{
|
|
:nth-child(#{$num}){
|
|
grid-column:$num + 1;
|
|
}
|
|
}
|
|
}
|
|
.repitem{
|
|
@extend %grid;
|
|
}
|
|
}
|
|
/*
|
|
Roll Template
|
|
#rolltemplate
|
|
*/
|
|
.sheet-rolltemplate-rapidfire{
|
|
@extend %font-vars;
|
|
--templateRadius: 1rem;
|
|
--dieSize: 50px;
|
|
--templateBorderW: 2px 5px 2px 5px;
|
|
--fumbleColor: red;
|
|
--critColor: green;
|
|
--innerBorderRadius: 5px;
|
|
--borderSize:1px;
|
|
--sizeFactor: 6;
|
|
--cornerSize: calc(1107px / var(--sizeFactor)) calc(952px / var(--sizeFactor));
|
|
--headSideMargin:40px;
|
|
--headVerticalMargin:10px;
|
|
--circleSize:73px;
|
|
--hexagonBackgroundImage:url('https://s3.amazonaws.com/files.d20.io/images/258492885/gzYgspdnfa8K2zUgTrgV3g/original.png');
|
|
margin:{//ensures that the template fills the chat window
|
|
left: -40px;
|
|
right: -5px;
|
|
}
|
|
@extend %defaultStyles;
|
|
a[href^='!'],
|
|
a[href^='~']{
|
|
font-family: var(--topHeaderFont);
|
|
background-color: transparent;
|
|
color: black;
|
|
font-weight: 700;
|
|
padding: 0;
|
|
}
|
|
h1,h2,h3,h4,h5,a{
|
|
white-space: pre-wrap;
|
|
}
|
|
&:not(:first-child){//Moves the template to accomodate the sender tag
|
|
margin-top:10px;
|
|
}
|
|
.sheet-content{
|
|
@extend %grid;
|
|
overflow:hidden;
|
|
}
|
|
> .sheet-template{
|
|
overflow:hidden;
|
|
--hexColor:#000000;
|
|
&.sheet-system-remnants{
|
|
padding:15px 10px;
|
|
> .sheet-content{
|
|
background-color: #c2c2c2;
|
|
background:{
|
|
image:var(--hexagonBackgroundImage);
|
|
position:top left;
|
|
size:400px auto;
|
|
repeat:no-repeat;
|
|
};
|
|
padding:0 10px;
|
|
border-radius:10px;
|
|
border:5px solid black;
|
|
grid-template-columns:[roll-start footer-start] var(--headSideMargin) [header-start] 1fr [damage-start] 1fr [roll-end difficulty-start] 1fr [damage-end] 1fr [footer-end] var(--headSideMargin)[difficulty-end header-end];
|
|
grid-template-areas:
|
|
'. header header header header header'
|
|
'. . . . . .'
|
|
'. . . . . .'
|
|
'. . . . . .'
|
|
'. . . . . .'
|
|
'description description description description description description'
|
|
'footer footer footer footer footer .'
|
|
;
|
|
&.sheet-single-roll{
|
|
.sheet-hexagon{
|
|
grid-column:damage-start / damage-end;
|
|
}
|
|
}
|
|
}
|
|
+ .sheet-image-border{
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
right:0;
|
|
bottom:0;
|
|
background-repeat:no-repeat;
|
|
&.sheet-has-header.sheet-has-footer{
|
|
background:{
|
|
image:var(--topCorner), var(--bottomCorner);
|
|
position:top left, bottom right;
|
|
size:var(--cornerSize),var(--cornerSize);
|
|
};
|
|
}
|
|
&.sheet-has-header:not(.sheet-has-footer){
|
|
background:{
|
|
image:var(--topCorner);
|
|
position:top left;
|
|
size:var(--cornerSize);
|
|
};
|
|
}
|
|
&.sheet-has-footer:not(.sheet-has-header){
|
|
background:{
|
|
image:var(--bottomCorner);
|
|
position:bottom right;
|
|
size:var(--cornerSize);
|
|
};
|
|
}
|
|
}
|
|
.sheet-header,.sheet-footer{
|
|
@extend %grid;
|
|
min-height: 30px;
|
|
align-items: center;
|
|
grid-template-areas:'content';
|
|
*{
|
|
box-sizing:border-box;
|
|
grid-area:content;
|
|
}
|
|
}
|
|
.sheet-header{
|
|
--headBorder:0 3px 3px 3px;
|
|
--headRadius:0 0 10px 10px;
|
|
--headItems:center start;
|
|
--headSelf:start;
|
|
--headMargin:0 0 10px -3px;
|
|
--headPadding:5px 10px 10px 15px;
|
|
grid-column:2/7;
|
|
*{
|
|
text-align:left;
|
|
}
|
|
}
|
|
.sheet-footer{
|
|
--headBorder:3px 3px 0 3px;
|
|
--headRadius:10px 10px 0 0;
|
|
--headItems:center end;
|
|
--headSelf:end;
|
|
--headMargin:9px -3px 0 0;
|
|
--headPadding:15px 15px 5px 5px;
|
|
grid-column:1/6;
|
|
*{
|
|
text-align:right;
|
|
}
|
|
}
|
|
.sheet-background{
|
|
@extend %grid;
|
|
grid-template-areas: 'content';
|
|
background-color: #aac1dd80;
|
|
border-color:black;
|
|
border-style: solid;
|
|
border-color: black;
|
|
border-width:var(--headBorder);
|
|
border-radius:var(--headRadius);
|
|
place-items:var(--headPlace);
|
|
margin:var(--headMargin);
|
|
place-self:var(--headSelf);
|
|
padding:var(--headPadding);
|
|
box-sizing:border-box;
|
|
backdrop-filter: blur(2px);
|
|
min-width:120px;
|
|
*{
|
|
opacity:0;
|
|
}
|
|
}
|
|
.sheet-header__content{
|
|
@extend %grid;
|
|
place-self:var(--headSelf);
|
|
grid-template-areas:'content';
|
|
padding:var(--headPadding);
|
|
place-items:var(--headItems);
|
|
margin:var(--headMargin);
|
|
border-radius:var(--headRadius);
|
|
}
|
|
.sheet-header__image{
|
|
width:100%;
|
|
height:100%;
|
|
background:{
|
|
image:var(--headerBottom);
|
|
position:bottom left;
|
|
size:calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
|
|
repeat:no-repeat;
|
|
};
|
|
z-index:1;
|
|
}
|
|
.sheet-footer__content{
|
|
@extend %grid;
|
|
place-self:var(--headSelf);
|
|
grid-template-areas:'content';
|
|
place-items:var(--headItems);
|
|
padding: var(--headPadding);
|
|
margin:var(--headMargin);
|
|
border-radius:var(--headRadius);
|
|
}
|
|
.sheet-footer__image{
|
|
width:100%;
|
|
height:100%;
|
|
background:{
|
|
image:var(--footerTop);
|
|
position:top right;
|
|
size:calc(699px / var(--sizeFactor)) calc(130px / var(--sizeFactor));
|
|
repeat:no-repeat;
|
|
};
|
|
z-index:1;
|
|
}
|
|
.sheet-fumble-toggle + .sheet-hexagon__hex-wrapper{
|
|
--hexColor:#db1a1a;
|
|
}
|
|
.sheet-crit-toggle + .sheet-hexagon__hex-wrapper{
|
|
--hexColor:#02a98d;
|
|
}
|
|
.sheet-hexagon{
|
|
@extend %hex-base;
|
|
--shadow:black;
|
|
width:var(--circleSize);
|
|
aspect-ratio: 1 / 1.1547005;
|
|
transform:rotate(150deg);
|
|
h4 *{
|
|
font-family:var(--midHeaderFont);
|
|
font-weight:normal;
|
|
}
|
|
}
|
|
.sheet-hexagon__hex-wrapper{
|
|
@extend %hex-rotate;
|
|
}
|
|
.sheet-hexagon__hex-wrapper__hex-border{
|
|
@extend %hex-rotate;
|
|
@extend %hex-shape;
|
|
background:radial-gradient(at 150%,#585858,var(--hexColor));
|
|
&:before{
|
|
@extend %hex-shape;
|
|
@extend %hex-rotate;
|
|
}
|
|
&:after{
|
|
@extend %hex-shape;
|
|
@extend %hex-component;
|
|
transform:rotate(-120deg);
|
|
}
|
|
}
|
|
.sheet-hexagon__hex-wrapper__hex-border__hex-content{
|
|
@extend %hex-component;
|
|
transform:rotate(-30deg);
|
|
grid-template-columns:auto;
|
|
grid-template-rows:auto auto;
|
|
gap:var(--half-gap);
|
|
place-items:center;
|
|
place-content:center;
|
|
}
|
|
.sheet-roll,
|
|
.sheet-difficulty{
|
|
align-self:start;
|
|
}
|
|
.sheet-container-background{
|
|
background-color:white;
|
|
margin:{
|
|
right:-10px;
|
|
left:-10px;
|
|
bottom: -17px;
|
|
};
|
|
border:{
|
|
top:2px solid black;
|
|
bottom:2px solid black;
|
|
}
|
|
&,
|
|
+ div{
|
|
margin-top:15px;
|
|
padding-block:5px;
|
|
}
|
|
}
|
|
.sheet-description.sheet-text{
|
|
h4{
|
|
text-align:left;
|
|
margin-top:var(--grid-gap);
|
|
font-weight:700;
|
|
}
|
|
}
|
|
}
|
|
span:not(.inlinerollresult){
|
|
font-size:13px;
|
|
}
|
|
}
|
|
.sheet-roll,
|
|
.sheet-difficulty{
|
|
&:nth-child(even){
|
|
grid-column:roll-start / roll-end;
|
|
}
|
|
&:nth-child(odd){
|
|
grid-column:difficulty-start / difficulty-end;
|
|
}
|
|
}
|
|
.sheet-damage{
|
|
&:nth-child(even){
|
|
grid-column:damage-start / damage-end;
|
|
}
|
|
&:nth-child(odd){
|
|
grid-column:difficulty-start / difficulty-end;
|
|
}
|
|
}
|
|
@each $area in header,description,footer{
|
|
.sheet-#{$area}{
|
|
grid-area:$area;
|
|
}
|
|
}
|
|
:not(div),
|
|
.sheet-hexagon,
|
|
.sheet-hexagon div,
|
|
.sheet-text,
|
|
.sheet-description:not(.sheet-container-background){
|
|
position:relative;
|
|
z-index:10;
|
|
}
|
|
.inlinerollresult{
|
|
font-size:1.5rem;
|
|
&[title*="[computed value]"],
|
|
&[original-title*="[computed value]"]{
|
|
pointer-events: none;
|
|
}
|
|
&,
|
|
&.fullcrit,
|
|
&.fullfail,
|
|
&.importantroll{
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
&.fullcrit{
|
|
|
|
}
|
|
&.fullfail{
|
|
|
|
}
|
|
&.importantroll{
|
|
|
|
}
|
|
}
|
|
.sheet-hexagon,.sheet-circle{
|
|
place-self:center;
|
|
&.sheet-damage{
|
|
justify-self:center;
|
|
}
|
|
:not(div){
|
|
color:white;
|
|
}
|
|
}
|
|
} |