From 3b33b8e93e76967756c927b58e3584ed3286d9c8 Mon Sep 17 00:00:00 2001 From: Choco Lanoar Date: Wed, 26 Apr 2023 22:37:53 +0200 Subject: [PATCH] AnimeWasAMistake: darkmode update Add support of Roll20 darkmode. Create darkmode CSS styles for each element, including rolltemplate. Several styling refinements. Signed-off-by: Choco Lanoar --- AnimeWasAMistake/AWaM.css | 223 ++++++++++++++++++++++++++++++++++--- AnimeWasAMistake/AWaM.html | 88 ++++++++------- 2 files changed, 250 insertions(+), 61 deletions(-) diff --git a/AnimeWasAMistake/AWaM.css b/AnimeWasAMistake/AWaM.css index 3782f9f302..08e201d24d 100644 --- a/AnimeWasAMistake/AWaM.css +++ b/AnimeWasAMistake/AWaM.css @@ -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; -} \ No newline at end of file +} + +.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; +} diff --git a/AnimeWasAMistake/AWaM.html b/AnimeWasAMistake/AWaM.html index ed3929cd8e..c1985840b9 100644 --- a/AnimeWasAMistake/AWaM.html +++ b/AnimeWasAMistake/AWaM.html @@ -1,7 +1,7 @@
- Nom + Nom
@@ -64,12 +64,13 @@
- Hobby - XP / +
Hobby
+ +
XP
/
-
+
Jets de dés
- Nom - Score - Atout - Gimmicks + bonus + Nom + Score + Atout + Gimmicks + bonus
@@ -103,7 +104,7 @@ - +
@@ -317,7 +318,7 @@ - / + / -
@@ -340,7 +340,9 @@
- / + + / +
@@ -361,7 +363,7 @@
- (Phy) + (Phy) - / + / - (Int) + (Int) - / + / - (Per) + (Per) - / + / - (Soc) + (Soc) - / + / - / + / - / + / - / + / - +
@@ -553,29 +555,29 @@ {{#rollResult}}
Jet : {{poignee}}
Résultat : {{rollResult}} - {{#rollLess() rollResult 3}} - Raté ! - {{/rollLess() rollResult 3}} - {{#rollBetween() rollResult 3 5}} - Easy ! - {{/rollBetween() rollResult 3 5}} - {{#rollBetween() rollResult 6 8}} - Complexe ! - {{/rollBetween() rollResult 6 8}} - {{#rollBetween() rollResult 9 11}} - Ardu ! - {{/rollBetween() rollResult 9 11}} - {{#rollBetween() rollResult 12 14}} - Épuisant ! - {{/rollBetween() rollResult 12 14}} + + + + + + + + + + + + + + + {{#rollBetween() rollResult 15 17}} - Nani ?! + Nani ?! {{/rollBetween() rollResult 15 17}} {{#rollBetween() rollResult 18 20}} - Impensable ! + Impensable ! {{/rollBetween() rollResult 18 20}} {{#rollGreater() rollResult 20}} - Légendaire ! + Légendaire ! {{/rollGreater() rollResult 20}}
{{/rollResult}}