Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-09-09 16:42:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7741 from Medieve/Mutants-and-Masterminds

Browse Source 
Mutants and Masterminds 3E Styling
This commit is contained in:
Miguel Peres
2020-11-22 21:49:11 -03:00
committed by GitHub
parent 111898b5d1 e0180d9e59
commit 3e58fbe2bd
6 changed files with 292 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Mutants and Masterminds 3E/assets/Mutants_&_Masterminds_Logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

Mutants and Masterminds 3E/assets/halftone1.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

Mutants and Masterminds 3E/assets/halftone1.psd
BIN
View File
Binary file not shown.
Mutants and Masterminds 3E/mutants-and-masterminds.css
+233 -55
View File
@@ -1,3 +1,28 @@
/* Character Sheet Wrapper */
@import url('https://fonts.googleapis.com/css?family=Bangers|Sriracha&display=swap');
.sheet-wrapper {
font-family: 'Sriracha', cursive;
--col-black: #363B44;
--col-white: #EBEBEB;
--col-blue: #4E7FC8;
--col-red: #DA3A2F;
--col-yellow: #E0AC00;
--col-purple: #7E627F;
--font-normal: "Sriracha", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
--font-header: "Bangers", 'Trebuchet Ms', sans-serif;
--bg-halftone: url("https://i.imgur.com/gCUY6ka.png");
--bg-texture: url("https://i.imgur.com/IqY5rW0.jpg");
background: var(--col-white);
border-radius: 20px;
padding: 15px 10px;
color: var(--col-black);
}
button {
color: var(--col-black);
}
input[type="radio"] {margin: 0px 4px; align-self: center;}
input {color: var(--col-black);}
input[type="text"].sheet-output-message {
background: #FFEE88;
border : none;
@@ -193,7 +218,8 @@ button {
border-color : #aaa;
border-radius : 5px;
border-right : 3px solid #999;
border-style : outset;}
border-style : outset;
font-family: : var(var(--font-header));}
button:hover {
border-color: #fe1611;
@@ -210,8 +236,6 @@ button::before {
/* General Styling */
/* ****************************************** */
img {
margin-bottom: 2px;
margin-left : 35%;
max-height : 100px;}
label {
@@ -268,49 +292,139 @@ div.sheet-section-options {
/* ************************************** */
div.sheet-section-details {
border-style:solid;
border-width:2px;
display : inline-block;
padding : 0.3%;}
border-style :solid;
border-width :2px;
display : grid;
border-radius: 15px 15px 0px 0px;
grid-template-columns: 1fr 320px;
grid-template-areas:
"character logo"
"details details2"
"power power";
background : var(--bg-halftone) var(--col-yellow);
background-blend-mode: overlay, multiply, multiply;}
div.sheet-section-details div.sheet-details-row input[type="text"],
div.sheet-section-details div.sheet-details-row input[type="number"] {
div.sheet-section-details input[type="text"],
div.sheet-section-details input[type="number"] {
border : none;
border-bottom: 1px solid #333;
border-radius: 0px;}
border-radius: 10px;
background : rgb(255, 255, 255, 0.5);
text-align: center;}
div.sheet-section-details div.sheet-details-row input[type="number"] {
width: 3em;}
div.sheet-section-details div.sheet-character {grid-area: character; position: relative;}
div.sheet-section-details div.sheet-character input:first-of-type:not(:placeholder-shown) {
background: linear-gradient(60deg, var(--col-black) 60%, rgba(0,0,0,0) 90%);
color: var(--col-white);
position: relative;
border-radius: 10px 0px 0px 0px;}
div.sheet-section-details div.sheet-details-row {
padding: 0.5%}
div.sheet-section-details div.sheet-character ::after {
content: "as the incredible";
color: var(--col-white);
font-family: var(--font-header);
font-size: 24px;
position: absolute;
right: 20%;
top: 20%;
}
div.sheet-section-details div.sheet-details-row:nth-of-type(1) b,
div.sheet-section-details div.sheet-details-row:nth-of-type(2) b,
div.sheet-section-details div.sheet-details-row:nth-of-type(3) b {
margin-right: 1%;}
div.sheet-section-details div.sheet-character input:nth-of-type(2):not(:placeholder-shown) {
font-size: 6rem;
height: 6rem;
border: none;
background: none;
color: var(--col-white);
text-shadow: 2px 2px 0px var(--col-red), 1px 1px 0px var(--col-black);
}
div.sheet-section-details div.sheet-details-row:nth-of-type(1) b:nth-of-type(1n+2),
div.sheet-section-details div.sheet-details-row:nth-of-type(2) b:nth-of-type(1n+2),
div.sheet-section-details div.sheet-details-row:nth-of-type(3) b:nth-of-type(1n+2) {
margin-left: 1%;}
div.sheet-section-details div.sheet-character input {font-family: var(--font-header); font-size: 24px;}
div.sheet-section-details img {grid-area: logo; align-self: center; justify-self: center; width: 90%;}
div.sheet-section-details div.sheet-details1 {
grid-area : details;
margin : 1vh auto;
background : rgb(255, 255, 255, 0.5);
padding : 15px;
display : grid;
gap : 0.5em;
grid-template-columns: [option] 1fr [option]20px 1fr 50px 1fr 50px 1fr 50px;}
div.sheet-section-details div.sheet-details-row:nth-of-type(1) input[type="text"] {
margin-right: 2%;
width: 30%;}
div.sheet-section-details div.sheet-details1 b {align-self: center; justify-self: end;}
div.sheet-left-grid {
grid-area: identity;
display: grid;
grid-template-columns: 1fr 50px;}
div.sheet-section-details div.sheet-details-row:nth-of-type(2) input[type="text"] {
width: 10%;}
div.sheet-section-details div.sheet-details-row:nth-of-type(3) input[type="text"] {
width: 23%;}
div.sheet-section-details div.sheet-details-row:nth-of-type(4) input[type="number"] {
margin-right: 0px;
width: 6%;}
div.sheet-section-details div.sheet-details2 {
grid-area: details2;
display: grid;
grid-template-columns: 1fr 80px;
margin: 10px;
}
div.sheet-section-details div.sheet-details2 input[type="text"] {
font-size: 18px;
font-family: var(--font-header);}
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) {
width: 80px;
height: 70px;
position: relative;
background: var(--bg-texture);
display: flex;
margin: 0 5%;
font-size: 48px;
text-align: center;
justify-content: center;
border-radius: 0;
transition: all 200ms;
border: 2px solid var(--col-black); }
div.sheet-section-details div.sheet-details2 div:nth-of-type(2):hover {
background: white;
}
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) input[type="number"]:placeholder-shown {
font-size: 12px;
}
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) input[type="number"] {
background: none;
border: none;
font-size: 48px;
height: 48px;
width: 60px;
margin: auto 20% auto 0;
text-align: center;
}
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) input::-webkit-outer-spin-button,
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) input::-webkit-inner-spin-button,
div.sheet-section-details div.sheet-power input[type="number"]::-webkit-outer-spin-button,
div.sheet-section-details div.sheet-power input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/* Firefox */
div.sheet-section-details div.sheet-details2 div:nth-of-type(2) input[type=number],
div.sheet-section-details div.sheet-power input[type="number"] {
-moz-appearance: textfield;
}
div.sheet-section-details div.sheet-details2 span {
font-size: 28px;
font-family: var(--font-header);
color: var(--col-black);
position: absolute;
top: 20%;
right: 10%;
}
div.sheet-section-details div.sheet-power {
background : var(--col-black);
color: var(--col-white);
text-align : center;
padding : 2px;
grid-area : power;}
div.sheet-section-details div.sheet-power input[type="number"] {
margin: 0px 0.3em;
width: 45px;
}
/* ****************************** */
/* Stats & Skills (page 1) */
/* ****************************** */
@@ -586,35 +700,99 @@ div.sheet-section-complications input[type="text"] {
/* Options (page 3) */
/* ************************************* */
/* Power Collapse and Fit by Richard T. */
.sheet-section-powers .repcontainer {
display: flex;
flex-wrap: wrap;}
.sheet-section-powers .repcontainer .repitem {
display: flex;
flex-direction: column;
flex: 1;
min-width: 300px;
margin: 5px 10px 0px 0px;}
.sheet-section-powers .repcontainer .repitem div {
display: flex;
margin-bottom: 10px;
padding: 2px 5px;
}
.sheet-section-powers .repcontainer .repitem div:not(:nth-last-child(1)) {margin: auto;}
.sheet-section-powers .repcontainer .repitem > label {
background: var(--bg-halftone), var(--col-blue);
background-blend-mode: overlay, multiply;
background-size: 500px;
background-repeat: no-repeat;
font-family: var(--font-header);
font-size: 24px;
height: 28px;
padding: 8px 4px 4px;
color: var(--col-white);
flex-basis: 20px;
width: auto;
font-weight: unset;}
div.sheet-expandtoggle {
transition: all 200ms;
box-sizing: border-box;
overflow: hidden;
transform-origin: top;
display: flex;
flex-direction: column;
background: var(--col-blue);
color: var(--col-white);
font-weight: unset;
}
div.sheet-expandtoggle b {
margin: 0px 10px 0px 2px;}
div.sheet-expandtoggle .sheet-powergrid {
display: grid !important;
margin: 0 !important;
grid-template-columns: 1fr 50px 50px 50px 50px 20px;
}
div.sheet-expandtoggle .sheet-powergrid label {
color: var(--col-white);
text-shadow: 2px 1px 0px var(--col-black);}
.sheet-section-powers .repcontainer .repitem label > input:first-of-type {display: none;}
.sheet-section-powers input.sheet-expandtoggle[value="0"] ~ div.sheet-expandtoggle {max-height: 0px;}
.sheet-section-powers input.sheet-expandtoggle[value="display"] ~ div.sheet-expandtoggle {
max-height: 400px;
border: 4px solid var(--col-black);}
.sheet-section-powers input.sheet-expandtoggle[value="display"] + label {background: var(--col-black); color: gray;}
div.sheet-expandtoggle > div {display: flex;}
div.sheet-expandtoggle > div input[type="text"] {height: auto; background: var(--col-white);}
div.sheet-expandtoggle > div input[type="number"] {
width: 50px;
background: var(--col-white);
height: auto;
margin: auto;}
div.sheet-expandtoggle textarea {
margin: auto;
background: var(--bg-halftone), var(--col-white);
background-blend-mode: screen, multiply;
background-size: 500px;
background-repeat: no-repeat;
margin-bottom: 10px;}
/* *********** Color Change based on Alternate effects ************ */
.sheet-section-powers .sheet-css-alternate-effect[value="1"] ~ label {
background-color: var(--col-red);}
.sheet-section-powers .sheet-css-alternate-effect[value="2"] ~ label {
background-color: var(--col-purple);}
.sheet-section-powers .sheet-css-alternate-effect[value="1"] ~ div.sheet-expandtoggle {
background-color: var(--col-red);}
.sheet-section-powers .sheet-css-alternate-effect[value="2"] ~ div.sheet-expandtoggle {
background-color: var(--col-purple);}
/* ************************************* */
div.sheet-section-powers input[type="text"]:nth-of-type(1),
div.sheet-section-advantages input[type="text"],
div.sheet-section-equipment input[type="text"] {
width: 67%;}
div.sheet-section-powers label{
width: auto;}
div.sheet-section-powers label:nth-of-type(1) {
font-size: 1em;
margin-right: 58%;}
div.sheet-section-powers label:nth-of-type(3) {
text-align: center;
width: 6%;}
div.sheet-section-powers label:nth-of-type(3),
div.sheet-section-powers label:nth-of-type(4) {
margin-left: 0.8%;
margin-right: 0.7%;}
div.sheet-section-powers label:nth-of-type(5) {
margin-left: 0.8%;}
div.sheet-macro b {
margin-right: 5%;}
div.sheet-section-powers,
div.sheet-section-advantages,
div.sheet-section-equipment,
div.sheet-section-options, {
Mutants and Masterminds 3E/mutants-and-masterminds.html
+59 -43
View File
@@ -1,38 +1,49 @@
<input class="sheet-hide-output" type="checkbox" name="attr_hide-output" value="1" checked="true" /><span></span>
<input class="sheet-output-message" type="text" name="attr_output-message" title="output-message" />
<div class="sheet-wrapper">
<div class="sheet-row">
<!-- Logo -->
<img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutants%20and%20Masterminds%203E/logo.jpg" title="Mutants and Masterminds Character Sheet"/>
<!-- --------------- -->
<!-- Details Section -->
<!-- --------------- -->
<div class="section-details">
<div class="details-row">
<b>Hero:</b><input type="text" name="attr_character_name" title="character_name"/>
<b>Identity:</b><input type="text" name="attr_identity-name" title="identity-name"/>
<input type="radio" name="attr_identity-status" title="identity-status" value="0"/><b> Secret</b>
<input type="radio" name="attr_identity-status" title="identity-status" value="1"/><b> Public</b>
<div class="character">
<input type="text" name="attr_identity-name" title="identity-name" placeholder="Real Identity"/>
<input type="text" name="attr_character_name" title="real-name" placeholder="Super Alias"/>
</div>
<div class="details-row">
<div class="details1">
<b> Secret</b><input type="radio" name="attr_identity-status" title="identity-status" value="0"/>
<b>Gender:</b><input type="text" name="attr_gender" title="gender" value=""/>
<b>Age:</b><input type="number" name="attr_age" title="age" value="0"/>
<b>Height:</b><input type="text" name="attr_height" title="height"/>
<b>Weight:</b><input type="text" name="attr_weight" title="weight"/>
<b>Eyes:</b><input type="text" name="attr_eyes" title="eyes"/>
<b>Weight:</b><input type="text" name="attr_weight" title="weight"/>
<b> Public</b><input type="radio" name="attr_identity-status" title="identity-status" value="1"/>
<b>Age:</b><input type="number" name="attr_age" title="age" value="0"/>
<b>Eyes:</b><input type="text" name="attr_eyes" title="eyes"/>
<b>Hair:</b><input type="text" name="attr_hair" title="hair"/>
</div>
<div class="details-row">
<b>Group Affiliation:</b><input type="text" name="attr_group" title="group"/>
<b>Base of Operations:</b><input type="text" name="attr_base" title="base"/>
<b>Power Level:</b><input type="number" name="attr_power-level" title="power-level" value="0"/>
<div class="details2">
<div>
<input type="text" name="attr_group" title="group" placeholder="Group Affiliation" />
<input type="text" name="attr_base" title="base" placeholder="Base of Operations" />
</div>
<div>
<input type="number" name="attr_power-level" title="power-level" value="0" placeholder="Power Lever"/>
<span>¢</span>
</div>
</div>
<div class="details-row">
<b>Power Point Totals:</b>
<div class="power">
<b>Power Point Totals:</b>
<b>Abilities</b><input type="number" name="attr_ability-points" title="ability-points" value="(@{total-ability-score} * 2)" disabled/>
<b>+</b>
<b>+</b>
<b>Powers</b><input type="number" name="attr_power-points" title="power-points" value="0"/><b>+</b>
<b>Advantages</b><input type="number" name="attr_advantage-points" title="advantage-points" value="0"/>
<b>+</b>
@@ -42,8 +53,9 @@
<input type="number" name="attr_defense-points" title="defense-points" value="@{total-defense-points}" disabled/>
<b>=</b>
<input type="number" name="attr_total-power-points" title="attr_total-power-points" value="(@{ability-points} + @{power-points} + @{advantage-points} + @{skill-points} + @{defense-points})" disabled/><b>/</b>
<input type="number" name="attr_max-power-points" title="attr_max-power-points" value="(@{starting-power-points} + @{power-points-earned})" disabled/><b> *</b>
<input type="number" name="attr_max-power-points" title="attr_max-power-points" value="(@{starting-power-points} + @{power-points-earned})" disabled/><b> *</b>
</div>
<img src="https://i.imgur.com/0aRNO0Z.png" title="Mutants and Masterminds Character Sheet"/>
</div>
</div>
<span class="note"><b>* Total Power Points Earned = Starting Power Points + Power Points Earned</b></span>
@@ -546,30 +558,34 @@
<!-- Powers & Devices -->
<div class="sheet-tab-content sheet-tab11 sheet-tab99">
<div class="section-powers">
<label>Powers & Devices</label>
<label>Ranks</label>
<label>Points Per Rank</label>
<label>Misc</label>
<label>Total</label>
<fieldset class="repeating_power">
<button class="die-show" type="roll" name="attr_adv" title="adv" value="@{who-effects} &amp;{template:default} {{name=@{character_name} - @{name}}} {{@{description}}}" class="btn ui-draggable"></button>
<input type="text" name="attr_name" title="repeating_power_X_name" value="" placeholder="Name" />
<input type="number" name="attr_ranks" title="repeating_power_X_ranks" value="1"/>
<input type="number" name="attr_points-per-rank" title="repeating_power_X_points-per-rank" value="1"/>
<input type="number" name="attr_misc-points" title="repeating_power_X_misc-points" value="0"/>
<input type="number" name="attr_total-cost" title="repeating_power_X_total-cost" value="1" />
<br />
<b>Options</b>
<input type="checkbox" class="macro-show" title="repeating_attacks_X_macro-text-show" name="attr_macro-text-show" value="1" />
<span></span>
<div class="macro">
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_alternate-effect" value="0" checked="true" /><b>Normal power</b>
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_alternate-effect" value="1" /><b>Alternate effect</b>
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_dynamic-alternate-effect" value="2" /><b>Dynamic alternate effect</b>
</div>
<br />
<textarea name="attr_description" title="repeating_power_X_description" placeholder="Description"></textarea>
<hr>
<input class="css-alternate-effect" type="hidden" name="attr_alternate-effect" />
<input class="expandtoggle" type="hidden" name="attr_toggle-show">
<label><input type="checkbox" name="attr_toggle-show" value="display" /><span name="attr_name">Power Name</span></label>
<div class="expandtoggle">
<div class="powergrid">
<label>Powers & Devices</label>
<label>Ranks</label>
<label>PP/Rank</label>
<label>Misc</label>
<label>Total</label>
</div>
<div class="powergrid">
<input type="text" name="attr_name" title="repeating_power_X_name" value="Power Name" placeholder="Power Name" />
<input type="number" name="attr_ranks" title="repeating_power_X_ranks" value="1"/>
<input type="number" name="attr_points-per-rank" title="repeating_power_X_points-per-rank" value="1"/>
<input type="number" name="attr_misc-points" title="repeating_power_X_misc-points" value="0"/>
<input type="number" name="attr_total-cost" title="repeating_power_X_total-cost" value="1" />
<button class="die-show" type="roll" name="attr_adv" title="adv" value="@{who-effects} &amp;{template:default} {{name=@{character_name} - @{name}}} {{@{description}}}" class="btn ui-draggable"></button>
</div>
<div>
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_alternate-effect" value="0" checked="true" /><b>Normal power</b>
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_alternate-effect" value="1" /><b>Alternate effect</b>
<input type="radio" name="attr_alternate-effect" title="repeating_power_X_dynamic-alternate-effect" value="2" /><b>Dynamic effect</b>
</div>
<textarea name="attr_description" title="repeating_power_X_description" placeholder="Description"></textarea>
</div>
</fieldset>
</div>
<br />
@@ -695,7 +711,7 @@
<div class="sheet-mnm-footer">
<img src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Mutants%20and%20Masterminds%203E/logo_powered.png" class="sheet-mnm-logo">
</div>
</div>
<script type="text/worker">
Mutants and Masterminds 3E/preview.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 126 KiB

After

Width:  |  Height:  |  Size: 263 KiB