slaguru666/roll20-character-sheets-tester
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #11761 from ChocoLanoar/awam-dark-mode

Browse Source 
AnimeWasAMistake: darkmode update
This commit is contained in:
Lucas Hall
2023-04-26 17:14:03 -04:00
committed by GitHub
parent 9a7893b636 3b33b8e93e
commit 848d74cfac
2 changed files with 250 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AnimeWasAMistake/AWaM.css
+205 -18
View File
@@ -3,6 +3,12 @@
* {
box-sizing: border-box;
}
.charsheet {
background-color: white;
}
.sheet-darkmode .charsheet {
background-color: #202020;
}
/* ---- DIV ----- */
div{
padding: 0px 0px 0px 0px;
@@ -14,25 +20,23 @@ div{
div.sheet-main{
padding: 4px;
width: 850px;
background: white;
text-align: center;
font-family: 'Verdana';
border-width: 1px;
border-style: solid;
border-color: #AAAAAA;
}
div.sheet-myRow{
display: block;
width: 100%;
text-align: left;
vertical-align: middle;
margin: 1px 0px 1px 0px;
/* border: 1px solid red; */
}
div.sheet-myCol{
display: inline-block;
vertical-align: top;
/* border: 1px solid blue; */
}
div.sheet-myColBrd{
display: inline-block;
@@ -44,6 +48,13 @@ div.sheet-myColBrd{
margin-bottom: 3px;
}
div.sheet-borderTop {
border-top: 1px solid black;
}
.sheet-darkmode div.sheet-borderTop {
border-top: 1px solid white;
}
.sheet-oneQuarter {
width: 24%;
}
@@ -71,7 +82,6 @@ div.sheet-myColBrd{
/* ------- TEXT -------- */
/* --------------------- */
div.sheet-textTitle {
/* color: black; */
color: darkmagenta;
display: inline-block;
text-align: center;
@@ -79,24 +89,67 @@ div.sheet-textTitle {
font-family: 'Gajraj One', cursive;
letter-spacing: 1px;
text-shadow: 1px 1px 3px grey;
/* font-family: 'Zen Dots', cursive; */
/* font-weight: bold; */
/* text-transform: uppercase; */
margin-bottom: 2px;
}
.sheet-darkmode div.sheet-textTitle {
color: pink;
text-shadow: 1px 1px 3px DimGray;
}
.sheet-textNom {
font-family: 'Zen Dots', cursive;
margin-right: 10px;
font-size: 1.4em;
}
.sheet-darkmode .sheet-textNom {
color: white;
}
div.sheet-textBio {
text-align: right;
width: 100px;
}
.sheet-darkmode .sheet-textBio {
color: white;
}
div.sheet-textHobby {
}
.sheet-darkmode .sheet-textHobby {
color: white;
}
div.sheet-textXp {
font-family: 'Zen Dots', cursive;
font-size: 1.3em;
}
.sheet-darkmode .sheet-textXp {
color: white;
}
.sheet-darkmode span.sheet-jetInfo {
color: white;
}
input[type="text"] {
font-family: cursive;
color: black;
background-color: GhostWhite;
border-style: none none solid none;
padding: 0px 3px 0px 3px;
}
.sheet-darkmode input[type="text"] {
color: GhostWhite;
background-color: #303030; /* almost black */
}
input[type="number"] {
color: black;
font-family: 'Zen Dots', cursive;
@@ -106,17 +159,28 @@ input[type="number"] {
text-align: center;
}
.sheet-darkmode input[type="number"] {
color: GhostWhite;
background-color: #303030;
}
input[type="text"].sheet-inputBio {
width: 95px;
}
input[type="text"].sheet-inputNom {
width:300px;
font-size: 1.8em;
font-weight: bold;
}
textarea {
resize: vertical;
font-weight: normal;
font-family: cursive;
background-color: GhostWhite;
}
textarea.sheet-textFullCol {
width: 90%;
color: black;
@@ -129,16 +193,30 @@ textarea.field-desc {
margin-bottom: 10px;
}
.sheet-darkmode textarea {
color: GhostWhite;
background-color: #303030;
}
/* --------------------- */
/* --- Scores/atout ---- */
/* --------------------- */
select {
color: black;
background-color: GhostWhite;
}
.sheet-darkmode select {
color: GhostWhite;
background-color: #303030;
}
select.select-blessures {
width: 48px;
margin-right: 20px;
}
select.select-dice {
color: black;
font-family: 'Zen Dots', cursive;
width: 60px;
text-align: center;
@@ -152,27 +230,32 @@ span.score-de {
font-size: 1.3em;
}
.sheet-darkmode span.score-de {
color:white;
}
span.score-type {
width: 100px;
}
.sheet-darkmode span.score-type {
color:white;
}
input[type="text"].score-name {
width: 150px;
color: black;
font-size: 1.3em;
font-weight: bold;
}
input[type="text"].atout-name {
width: 230px;
color: black;
font-size: 1.1em;
font-weight: bold;
}
input[type="text"].atoutPnj-Name {
width: 200px;
color: black;
font-size: 1.3em;
font-weight: bold;
text-transform: uppercase;
@@ -180,14 +263,12 @@ input[type="text"].atoutPnj-Name {
input[type="text"].atoutPnj-scoreName {
width: 150px;
color: black;
font-size: 1.2em;
font-weight: bold;
}
input[type="text"].atoutPnj-atoutName {
width: 210px;
color: black;
font-size: 1.1em;
font-weight: bold;
}
@@ -214,8 +295,6 @@ div.sheet-onglet4{
text-align: left;
vertical-align: middle;
margin: 1px 0px 1px 0px;
/* border: 1px solid #DD5633; */
/* border-radius: 0px 6px 6px 6px; */
padding: 3px;
z-index: 0;
}
@@ -251,7 +330,6 @@ input[type="radio"].sheet-onglet4 + span{
margin-bottom: -2px;
padding-top: 5px;
font-size: 1em;
/* text-transform: uppercase; */
font-family: 'Zen Dots', cursive;
border-style: solid;
border-width: 1px;
@@ -275,6 +353,29 @@ input[type="radio"].sheet-onglet4:checked + span {
border-right-color: black;
border-bottom-color: white;
}
.sheet-darkmode input[type="radio"].sheet-onglet1 + span,
.sheet-darkmode input[type="radio"].sheet-onglet2 + span,
.sheet-darkmode input[type="radio"].sheet-onglet3 + span,
.sheet-darkmode input[type="radio"].sheet-onglet4 + span{
color: #DDDDDD;
background-color: #444444;
border-left-color: white;
border-top-color: white;
border-right-color: white;
border-bottom-color: white;
}
.sheet-darkmode input[type="radio"].sheet-onglet1:checked + span ,
.sheet-darkmode input[type="radio"].sheet-onglet2:checked + span ,
.sheet-darkmode input[type="radio"].sheet-onglet3:checked + span ,
.sheet-darkmode input[type="radio"].sheet-onglet4:checked + span {
color: white;
background-color: #202020;
border-left-color: white;
border-top-color: white;
border-right-color: white;
border-bottom-color: #202020;
}
input[type="radio"].sheet-onglet1:checked ~ div.sheet-onglet1{
display: block;
}
@@ -288,10 +389,80 @@ input[type="radio"].sheet-onglet4:checked ~ div.sheet-onglet4{
display: block;
}
/* --------------------- */
/* ----- BUTTONS ------- */
/* --------------------- */
.repcontrol {
min-height: 27px;
display: inline-block;
}
.repcontrol .btn {
color: #303030;
background: ghostwhite;
display: inline-block;
text-shadow: none;
box-shadow: none;
}
.sheet-darkmode .repcontrol .btn {
color: ghostwhite;
background: #303030;
}
.ui-dialog .charsheet button[type=roll] {
color: black;
text-shadow: none;
box-shadow: none;
padding:0;
margin: 0;
border: none;
background: none;
opacity: 0.7;
height: 1.7em;
width: 1.7em;
line-height: 1.7em;
}
.ui-dialog .charsheet button[type=roll]:hover {
opacity: 1.0;
background: none;
}
.ui-dialog .charsheet button[type=roll]:before {
font-size: 1.7em;
font-family: 'dicefontd12';
content: 'L';
}
.sheet-darkmode .ui-dialog .charsheet button[type=roll]:before {
color: white;
content: 'l';
}
/* --------------------- */
/* ----- TEMPLATES ----- */
/* --------------------- */
.sheet-rolltemplate-jetStandard .inlinerollresult {
display: inline-block;
background: none;
border: none;
min-width: 1.5em;
text-align: center;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard .inlinerollresult {
background: none;
border: none;
}
.sheet-rolltemplate-jetStandard .inlinerollresult.fullcrit {
border: none;
}
.sheet-rolltemplate-jetStandard .inlinerollresult.fullfail {
border: none;
}
.sheet-rolltemplate-jetStandard .inlinerollresult.importantroll {
border: none;
}
.sheet-rolltemplate-jetStandard div {
color: black;
background: azure;
border: 1px solid darkmagenta;
border-radius: 10px;
@@ -300,7 +471,6 @@ input[type="radio"].sheet-onglet4:checked ~ div.sheet-onglet4{
}
.sheet-rolltemplate-jetStandard div > h3{
color: black;
text-align: center;
margin-bottom: 2px;
font-size: 130%;
@@ -325,4 +495,21 @@ input[type="radio"].sheet-onglet4:checked ~ div.sheet-onglet4{
border: none;
padding: 3px;
font-weight: bold;
}
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div {
color: azure;
background: #303030;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div > h4 {
color: pink;
}
.sheet-rolltemplate-jetStandard div > span {
color: DarkGreen;
font-style: italic;
}
.sheet-rolltemplate-darkmode.sheet-rolltemplate-jetStandard div > span {
color: GreenYellow;
}
AnimeWasAMistake/AWaM.html
+45 -43
View File
@@ -1,7 +1,7 @@
<div class="sheet-main">
<div class="sheet-myRow sheet-full">
<div class="sheet-myCol sheet-twoThirds">
<span style="font-family: 'Zen Dots', cursive; margin-right: 10px; font-size: 1.4em;">Nom</span><input type="text" style="width:300px; font-size: 1.8em; font-weight: bold; color: black;" name="attr_character_name"/>
<span class="sheet-textNom">Nom</span><input type="text" class="sheet-inputNom" name="attr_character_name"/>
</div>
<div class="sheet-myCol sheet-oneThird">
<img title="Version 1.1" src="https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/AnimeWasAMistake/images/logoawam.jpg" width="50%" />
@@ -64,12 +64,13 @@
</div>
<div class="sheet-myRow">
<div class="sheet-myRow sheet-twoThirds">
Hobby <input style="width:400px; margin-right: 200px;" type="text" name="attr_hobby"/>
<span style="font-family: 'Zen Dots', cursive; font-size: 1.3em;">XP</span> <input style="width: 50px;" type="number" name="attr_xpCurrent" value="0" min="0"> / <input style="width: 50px;" type="number" name="attr_xpTotal" value="0" min="0">
<div class="sheet-textHobby">Hobby</div>
<input style="width:400px; margin-right: 200px;" type="text" name="attr_hobby"/>
<div class="sheet-textXp">XP</div> <input style="width: 50px;" type="number" name="attr_xpCurrent" value="0" min="0"> / <input style="width: 50px;" type="number" name="attr_xpTotal" value="0" min="0">
</div>
</div>
<!-- JETS DE DÉS -->
<div class="sheet-myRow sheet-full" style="border-top: 1px solid;">
<div class="sheet-myRow sheet-full sheet-borderTop">
<div class="sheet-myRow sheet-full" style="text-align: center;">
<div class="sheet-textTitle">Jets de dés</div>
<select style="width: 100px; margin-left: 10px;" name="attr_jetCache">
@@ -78,10 +79,10 @@
</select>
</div>
<div class="sheet-myRow sheet-full">
<span style="margin-right: 200px;">Nom</span>
<span style="margin-right: 25px;">Score</span>
<span style="margin-right: 23px;">Atout</span>
<span>Gimmicks + bonus</span>
<span class="sheet-jetInfo" style="margin-right: 200px;">Nom</span>
<span class="sheet-jetInfo" style="margin-right: 25px;">Score</span>
<span class="sheet-jetInfo" style="margin-right: 23px;">Atout</span>
<span class="sheet-jetInfo">Gimmicks + bonus</span>
</div>
<div class="sheet-myRow sheet-full">
<fieldset class="repeating_listJetsDes">
@@ -103,7 +104,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
<input style="width:200px; color: black;" type="text" name="attr_deGimmick" placeholder="Ex : +1d8+2"/>
<input style="width:200px;" type="text" name="attr_deGimmick" placeholder="Ex : +1d8+2"/>
<button type="roll" name="roll_jetCustom" title="Lancer la macro" value="@{jetCache} &{template:jetStandard} {{characterName=@{character_name}}} {{rollname=@{jetDeName}}} {{poignee=@{deScore}+@{deAtout}@{deGimmick}}} {{rollResult=[[@{deScore}+@{deAtout}@{deGimmick}]]}}"></button>
</div>
</fieldset>
@@ -317,7 +318,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutDieMax">
<option value="pnj">PNJ</option>
<option value="0">0</option>
@@ -328,7 +329,6 @@
<option value="1d12">D12</option>
</select>
<textarea class='field-desc' name="attr_atoutDesc" placeholder="Description"></textarea>
<!-- <input class="field-desc" style="margin-top: -5px;" type="text" placeholder="Description"/> -->
</fieldset>
</div>
</div>
@@ -340,7 +340,9 @@
<div class="sheet-myRow">
<fieldset class='repeating_jauges'>
<input class="atout-name" type="text" name="attr_jaugeName" placeholder="Nom"/>
<input style="width: 50px;" type="number" name="attr_jaugeCurrent" value="0" min="0"> / <input style="width: 50px;" type="number" name="attr_jaugeMax" value="0" min="0">
<input style="width: 50px;" type="number" name="attr_jaugeCurrent" value="0" min="0">
<span class="score-type">/</span>
<input style="width: 50px;" type="number" name="attr_jaugeMax" value="0" min="0">
<input class="field-desc" type="text" name="attr_jaugeDesc" placeholder="Description"/>
</fieldset>
</div>
@@ -361,7 +363,7 @@
<div class="sheet-myCol sheet-half">
<div class="sheet-myRow sheet-full" style="margin-bottom: 5px;">
<input class="atoutPnj-scoreName" type="text" name="attr_atoutPnjPhyName"/>
(Phy)
<span class="score-type">(Phy)</span>
<select class="select-dice" name="attr_atoutPnjPhyDie">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -370,7 +372,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjPhyDieMax">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -382,7 +384,7 @@
</div>
<div class="sheet-myRow sheet-full" style="margin-bottom: 5px;">
<input class="atoutPnj-scoreName" type="text" name="attr_atoutPnjIntName"/>
(Int)
<span class="score-type">(Int)</span>
<select class="select-dice" name="attr_atoutPnjIntDie">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -391,7 +393,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjIntDieMax">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -403,7 +405,7 @@
</div>
<div class="sheet-myRow sheet-full" style="margin-bottom: 5px;">
<input class="atoutPnj-scoreName" type="text" name="attr_atoutPnjPerName"/>
(Per)
<span class="score-type">(Per)</span>
<select class="select-dice" name="attr_atoutPnjPerDie">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -412,7 +414,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjPerDieMax">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -424,7 +426,7 @@
</div>
<div class="sheet-myRow sheet-full" style="margin-bottom: 5px;">
<input class="atoutPnj-scoreName" type="text" name="attr_atoutPnjSocName"/>
(Soc)
<span class="score-type">(Soc)</span>
<select class="select-dice" name="attr_atoutPnjSocDie">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -433,7 +435,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjSocDieMax">
<option value="0">0</option>
<option value="1d4" selected="selected">D4</option>
@@ -455,7 +457,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjAtoutDieMax1">
<option value="0" selected="selected">0</option>
<option value="1d4">D4</option>
@@ -476,7 +478,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjAtoutDieMax2">
<option value="0" selected="selected">0</option>
<option value="1d4">D4</option>
@@ -497,7 +499,7 @@
<option value="1d10">D10</option>
<option value="1d12">D12</option>
</select>
/
<span class="score-type">/</span>
<select class="select-dice" name="attr_atoutPnjAtoutDieMax3">
<option value="0" selected="selected">0</option>
<option value="1d4">D4</option>
@@ -524,13 +526,13 @@
</div>
</div>
<!-- GIMMICKS -->
<div class="sheet-myRow sheet-full" style="border-top: 1px solid;">
<div class="sheet-myRow sheet-full sheet-borderTop">
<div class="sheet-myCol sheet-half">
<div class="sheet-textTitle">Gimmicks personnels</div>
<div class="sheet-myRow">
<fieldset class='repeating_gimmPerso'>
<input class="atout-name" style="width:235px" type="text" name="attr_gimmPersoName" placeholder="Nom"/>
<input style="width:70px; color: black; text-align: center; font-weight: bold;" type="text" name="attr_gimmPersoBonus" placeholder="Bonus"/>
<input style="width:70px; text-align: center; font-weight: bold;" type="text" name="attr_gimmPersoBonus" placeholder="Bonus"/>
<textarea name="attr_gimmPersoDesc" class='field-desc' placeholder="Conditions"></textarea>
</fieldset>
</div>
@@ -553,29 +555,29 @@
{{#rollResult}}
<div>Jet : {{poignee}}</div>
<div>Résultat : {{rollResult}}
{{#rollLess() rollResult 3}}
<span style='color: green'>Raté !</span>
{{/rollLess() rollResult 3}}
{{#rollBetween() rollResult 3 5}}
<span style='color: green'>Easy !</span>
{{/rollBetween() rollResult 3 5}}
{{#rollBetween() rollResult 6 8}}
<span style='color: green'>Complexe !</span>
{{/rollBetween() rollResult 6 8}}
{{#rollBetween() rollResult 9 11}}
<span style='color: green'>Ardu !</span>
{{/rollBetween() rollResult 9 11}}
{{#rollBetween() rollResult 12 14}}
<span style='color: green'>Épuisant !</span>
{{/rollBetween() rollResult 12 14}}
<!-- {{#rollLess() rollResult 3}} -->
<!-- <span>Raté !</span> -->
<!-- {{/rollLess() rollResult 3}} -->
<!-- {{#rollBetween() rollResult 3 5}} -->
<!-- <span>Easy !</span> -->
<!-- {{/rollBetween() rollResult 3 5}} -->
<!-- {{#rollBetween() rollResult 6 8}} -->
<!-- <span>Complexe !</span> -->
<!-- {{/rollBetween() rollResult 6 8}} -->
<!-- {{#rollBetween() rollResult 9 11}} -->
<!-- <span>Ardu !</span> -->
<!-- {{/rollBetween() rollResult 9 11}} -->
<!-- {{#rollBetween() rollResult 12 14}} -->
<!-- <span>Épuisant !</span> -->
<!-- {{/rollBetween() rollResult 12 14}} -->
{{#rollBetween() rollResult 15 17}}
<span style='color: green'>Nani ?!</span>
<span>Nani ?!</span>
{{/rollBetween() rollResult 15 17}}
{{#rollBetween() rollResult 18 20}}
<span style='color: green'>Impensable !</span>
<span>Impensable !</span>
{{/rollBetween() rollResult 18 20}}
{{#rollGreater() rollResult 20}}
<span style='color: green'>Légendaire !</span>
<span>Légendaire !</span>
{{/rollGreater() rollResult 20}}
</div>
{{/rollResult}}