mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-31 04:02:29 +00:00
545 lines
11 KiB
SCSS
545 lines
11 KiB
SCSS
@function compare($lists) {
|
|
$total:0;
|
|
|
|
@each $list in $lists {
|
|
$value:$list;
|
|
$result:0;
|
|
|
|
@each $r in $lists {
|
|
@if $r == $value {
|
|
$result:$result+1;
|
|
}
|
|
}
|
|
$result:$result;
|
|
|
|
@if $result > $total {
|
|
$total:$result;
|
|
}
|
|
}
|
|
|
|
@return $total;
|
|
}
|
|
|
|
@mixin col($widthMain, $widthCol) {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
align-items:flex-start;
|
|
align-content:flex-start;
|
|
width:$widthMain;
|
|
|
|
div.col {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
align-items:flex-start;
|
|
align-content:flex-start;
|
|
width:$widthCol;
|
|
flex-wrap:wrap;
|
|
}
|
|
}
|
|
|
|
@mixin button {
|
|
button[type="roll"] {
|
|
&::before {
|
|
content:"";
|
|
background:$diceBlack;
|
|
background-size:contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width:20px;
|
|
height:20px;
|
|
border:1px solid black;
|
|
}
|
|
|
|
&:hover {
|
|
&::before {
|
|
background:$diceWhite;
|
|
background-size:contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
}
|
|
|
|
display:flex;
|
|
justify-content: flex-start;
|
|
text-transform: uppercase;
|
|
font-size: 22px;
|
|
letter-spacing: 2px;
|
|
font-weight: bold;
|
|
line-height: 22px;
|
|
|
|
padding:0px;
|
|
margin:0px;
|
|
background:transparent;
|
|
border:0px;
|
|
box-shadow:none;
|
|
|
|
@content;
|
|
|
|
span {
|
|
display:flex;
|
|
align-items:center;
|
|
margin-left:5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin configStats($borderColor, $classBase, $marginLeftConfig:0) {
|
|
|
|
#{$classBase} {
|
|
&:hover {
|
|
label.config {
|
|
span {
|
|
&::before {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
label.config {
|
|
position:relative;
|
|
width:23px;
|
|
height:23px;
|
|
|
|
span {
|
|
width:23px;
|
|
height:23px;
|
|
|
|
&::before {
|
|
content: "y";
|
|
font-family: "pictos";
|
|
font-variant: initial;
|
|
font-size: 26px;
|
|
line-height: 23px;
|
|
height: 23px;
|
|
width: 23px;
|
|
display: block;
|
|
text-align: center;
|
|
opacity:0;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
position:absolute;
|
|
width:23px;
|
|
height:23px;
|
|
opacity: 0;
|
|
z-index:999;
|
|
|
|
&:checked ~ span::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"][value="1"].config ~ div.config {
|
|
display:flex;
|
|
}
|
|
|
|
div.config {
|
|
display:none;
|
|
width:100%;
|
|
flex-wrap: wrap;
|
|
margin-left:$marginLeftConfig;
|
|
|
|
label {
|
|
display:flex;
|
|
width:100%;
|
|
justify-content: space-between;
|
|
align-items:flex-end;
|
|
|
|
span {
|
|
width: 40px;
|
|
white-space: nowrap;
|
|
margin-right: 5px;
|
|
color: RGB(118, 150, 166);
|
|
font-variant: small-caps;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
input[type="number"] {
|
|
width:calc(100% - 40px);
|
|
text-align: center;
|
|
background:transparent;
|
|
|
|
border-top:0px;
|
|
border-right:0px;
|
|
border-left:0px;
|
|
border-bottom:1px dashed $borderColor;
|
|
|
|
border-radius: 0px;
|
|
padding:0px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin options($color, $background) {
|
|
|
|
label.config {
|
|
position:absolute;
|
|
width:23px;
|
|
height:23px;
|
|
right:0;
|
|
|
|
span {
|
|
width:23px;
|
|
height:23px;
|
|
|
|
&::before {
|
|
content: "y";
|
|
color:$color;
|
|
font-family: "pictos";
|
|
font-variant: initial;
|
|
font-size: 26px;
|
|
line-height: 23px;
|
|
height: 23px;
|
|
width: 23px;
|
|
display: block;
|
|
text-align: center;
|
|
opacity:0.5;
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
position:absolute;
|
|
width:23px;
|
|
height:23px;
|
|
opacity: 0;
|
|
z-index:999;
|
|
|
|
&:checked ~ span::before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="hidden"][value="1"] ~ div.config {
|
|
display:flex;
|
|
}
|
|
|
|
div.config {
|
|
display:none;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
width: 100px;
|
|
padding: 25px;
|
|
background: white;
|
|
border: 1px solid black;
|
|
border-radius: 30px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
z-index:9999;
|
|
|
|
*{
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin J4($type, $J1, $J2, $J3) {
|
|
&>div {
|
|
&.sheet-J4R1 {
|
|
$J4:1;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sheet-J4R2 {
|
|
$J4:2;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sheet-J4R3 {
|
|
$J4:3;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sheet-J4R4 {
|
|
$J4:4;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sheet-J4R5 {
|
|
$J4:5;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.sheet-J4R6 {
|
|
$J4:6;
|
|
|
|
&>span {
|
|
@if $type == "T1" {
|
|
$list:$J1, $J2, $J3;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T2" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
|
|
@if $type == "T3" {
|
|
$list:$J1, $J2, $J3, $J4;
|
|
|
|
@if compare($list) >= 3 {
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin J3($type, $J1, $J2) {
|
|
&>div {
|
|
&.sheet-J3R1 {
|
|
$J3:1;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
|
|
&.sheet-J3R2 {
|
|
$J3:2;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
|
|
&.sheet-J3R3 {
|
|
$J3:3;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
|
|
&.sheet-J3R4 {
|
|
$J3:4;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
|
|
&.sheet-J3R5 {
|
|
$J3:5;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
|
|
&.sheet-J3R6 {
|
|
$J3:6;
|
|
|
|
@include J4($type, $J1, $J2, $J3);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin J2($type, $J1) {
|
|
&>div {
|
|
&.sheet-J2R1 {
|
|
$J2:1;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
|
|
&.sheet-J2R2 {
|
|
$J2:2;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
|
|
&.sheet-J2R3 {
|
|
$J2:3;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
|
|
&.sheet-J2R4 {
|
|
$J2:4;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
|
|
&.sheet-J2R5 {
|
|
$J2:5;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
|
|
&.sheet-J2R6 {
|
|
$J2:6;
|
|
|
|
@include J3($type, $J1, $J2);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin J1($type) {
|
|
&>div {
|
|
&.sheet-J1R1 {
|
|
$J1:1;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
|
|
&.sheet-J1R2 {
|
|
$J1:2;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
|
|
&.sheet-J1R3 {
|
|
$J1:3;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
|
|
&.sheet-J1R4 {
|
|
$J1:4;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
|
|
&.sheet-J1R5 {
|
|
$J1:5;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
|
|
&.sheet-J1R6 {
|
|
$J1:6;
|
|
|
|
@include J2($type, $J1);
|
|
}
|
|
}
|
|
} |