diff --git a/Mutants and Masterminds 3E/assets/Mutants_&_Masterminds_Logo.png b/Mutants and Masterminds 3E/assets/Mutants_&_Masterminds_Logo.png new file mode 100644 index 0000000000..ecd785a348 Binary files /dev/null and b/Mutants and Masterminds 3E/assets/Mutants_&_Masterminds_Logo.png differ diff --git a/Mutants and Masterminds 3E/assets/halftone1.png b/Mutants and Masterminds 3E/assets/halftone1.png new file mode 100644 index 0000000000..42cf91416c Binary files /dev/null and b/Mutants and Masterminds 3E/assets/halftone1.png differ diff --git a/Mutants and Masterminds 3E/assets/halftone1.psd b/Mutants and Masterminds 3E/assets/halftone1.psd new file mode 100644 index 0000000000..de0c680c9b Binary files /dev/null and b/Mutants and Masterminds 3E/assets/halftone1.psd differ diff --git a/Mutants and Masterminds 3E/mutants-and-masterminds.css b/Mutants and Masterminds 3E/mutants-and-masterminds.css index 3524df24b1..d10668118e 100644 --- a/Mutants and Masterminds 3E/mutants-and-masterminds.css +++ b/Mutants and Masterminds 3E/mutants-and-masterminds.css @@ -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, { diff --git a/Mutants and Masterminds 3E/mutants-and-masterminds.html b/Mutants and Masterminds 3E/mutants-and-masterminds.html index 33de24c599..0570bb49cd 100644 --- a/Mutants and Masterminds 3E/mutants-and-masterminds.html +++ b/Mutants and Masterminds 3E/mutants-and-masterminds.html @@ -1,38 +1,49 @@ - +
- +
-
- Hero: - Identity: - Secret - Public +
+ + + +
-
+
+ Secret Gender: - Age: Height: - Weight: - Eyes: + Weight: + Public + Age: + Eyes: Hair: + + + +
-
- Group Affiliation: - Base of Operations: - Power Level: +
+
+ + +
+
+ + ยข +
-
- Power Point Totals: +
+ Power Point Totals: Abilities - + + + Powers+ Advantages + @@ -42,8 +53,9 @@ = / - * + *
+
* Total Power Points Earned = Starting Power Points + Power Points Earned @@ -546,30 +558,34 @@
- - - - - +
- - - - - - -
- Options - - -
- Normal power - Alternate effect - Dynamic alternate effect -
-
- -
+ + + +
+
+ + + + + +
+
+ + + + + + +
+
+ Normal power + Alternate effect + Dynamic effect +
+ +

@@ -695,7 +711,7 @@
- +