diff --git a/Ten candles/img/D6_tencandles.png b/Ten candles/img/D6_tencandles.png new file mode 100644 index 000000000000..749aeff46f0b Binary files /dev/null and b/Ten candles/img/D6_tencandles.png differ diff --git a/Ten candles/img/hope_dice_tencandles.png b/Ten candles/img/hope_dice_tencandles.png new file mode 100644 index 000000000000..2fdce977e6d5 Binary files /dev/null and b/Ten candles/img/hope_dice_tencandles.png differ diff --git a/Ten candles/ten-candles.css b/Ten candles/ten-candles.css index 4cf671c65271..076d729e3f8f 100644 --- a/Ten candles/ten-candles.css +++ b/Ten candles/ten-candles.css @@ -1,9 +1,9 @@ /*----------- Logo -------------*/ img.sheet-logo { -width: 500px; +width: 420px; height: auto; - margin-bottom: 30px; + margin-bottom: 50px; } @@ -56,7 +56,7 @@ width: 500px; color: white; font-weight: bold; border-radius: 4px; - + width: 100px; height: 40px; cursor: pointer; @@ -80,6 +80,100 @@ width: 500px; border-radius: 4px; } +/*----------- Checkbox Section -------------*/ + +.charsheet input[type="checkbox"] { + opacity: 0; + width: 16px; + height: 16px; + position: relative; + top: 5px; + left: 6px; + margin: -10px; + cursor: pointer; + z-index: 1; +} + +.charsheet input[type="checkbox"] + span::before { + margin-right: 4px; + border: solid 1px #a8a8a8; + line-height: 14px; + text-align: center; + display: inline-block; + vertical-align: middle; + box-shadow: 0 0 10px 3px #bdb8b8; + background: #f6f6f6; + background: radial-gradient(#f6f6f6, #dfdfdf); +} + +.charsheet input[type="checkbox"] + span::before { + content: ""; + width: 14px; + height: 14px; + font-size: 12px; + border-radius: 3px; +} + +.charsheet input[type="checkbox"]:checked + span::before { + content: "✓"; + background: black; + box-shadow: 0px 0px 8px 1px #1F1F1F; + +} + + +/*----------- Dice Button Section -------------*/ +div.sheet-d6{ + background-image: url(https://raw.githubusercontent.com/ctotone/JdR/main/Ten%20candles/img/D6_tencandles.png); + background-size: 55px 55px; + background-repeat: no-repeat; + width: 55px; + height: 55px; +} + +div.sheet-dicehope{ + background-image: url(https://raw.githubusercontent.com/ctotone/JdR/main/Ten%20candles/img/hope_dice_tencandles.png); + background-size: 30px 30px; + background-repeat: no-repeat; + width: 30px; + height: 30px; +} + +button[type="roll"].sheet-dicehope:before, +button[type="roll"].sheet-d6:before{ + content: ' '; +} + +button[type="roll"].sheet-dicehope:hover, +button[type="roll"].sheet-d6:hover{ + background-position: 0; +} + +button[type="roll"].sheet-d6{ + background-image:url(https://raw.githubusercontent.com/ctotone/JdR/main/Ten%20candles/img/D6_tencandles.png); + background-size: 50px 50px; + background-repeat: no-repeat; + width: 50px; + height: 50px; + border-style: none; + background-color: transparent; + margin-left: 5px; +} + +button[type="roll"].sheet-dicehope{ + background-image:url(https://raw.githubusercontent.com/ctotone/JdR/main/Ten%20candles/img/hope_dice_tencandles.png); + background-size: 25px 25px; + background-repeat: no-repeat; + width: 25px; + height: 25px; + border-style: none; + background-color: transparent; + margin-left: 5px; +} + +button[type="roll"].sheet-empty:before{ + content: ' '; +} /*----------- Card Section -------------*/ .charsheet .sheet-section-profile{ @@ -94,48 +188,92 @@ width: 500px; .charsheet .sheet-section-profile p{ font-family: 'Shadows Into Light'; - font-size: 25px; + font-size: 23px; color: #e1e1e1 !important; margin-left: 20px; line-height: 1.5; width: 750px; } - input[type=text], input[type=number] { display: inline-block; margin-right: 5px; box-shadow: none; border: none; - border-bottom: 1px solid #e1e1e1; + border-bottom: 1px solid #e1e1e147; -moz-appearance:textfield; font-size: 17px; margin-top: -5px; padding-bottom: 2px; + color: #e1e1e1 !important; + background-color: #1F1F1F; } -.charsheet input.sheet-name-field { +.charsheet input.sheet-name { + width: 250px; + font-size: 20px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + +.charsheet input.sheet-look { width: 250px; font-size: 20px !important; color: #e1e1e1; background-color: #1F1F1F; } -.charsheet input.sheet-role { +.charsheet input.sheet-age { + width: 80px; + font-size: 20px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + +.charsheet input.sheet-virtue { + width: 280px; + font-size: 18px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + +.charsheet input.sheet-vice { + width: 300px; + font-size: 18px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + +.charsheet input.sheet-card { width: 200px; font-size: 18px !important; color: #e1e1e1; background-color: #1F1F1F; } +.charsheet input.sheet-card1 { + width: 345px; + font-size: 18px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + +.charsheet input.sheet-card2 { + width: 400px; + font-size: 18px !important; + color: #e1e1e1; + background-color: #1F1F1F; +} + .charsheet textarea.sheet-notes { - width: 470px; - height: 130px; + width: 400px; + height: 65px; line-height: 1.0; font-size: 20px !important; color: #e1e1e1; background-color: #1F1F1F; + border: 1px solid #e1e1e147; } .charsheet textarea.sheet-note1 { @@ -161,7 +299,7 @@ div.sheet-section-abilities { div.sheet-section-abilities p{ font-family: 'Shadows Into Light'; - font-size: 25px; + font-size: 23px; color: #e1e1e1 !important; margin-left: 20px; line-height: 1.6; @@ -169,19 +307,6 @@ div.sheet-section-abilities p{ } -input[type=text], -input[type=number] { - display: inline-block; - margin-right: 5px; - box-shadow: none; - border: none; - border-bottom: 1px solid #e1e1e1; - -moz-appearance:textfield; - font-size: 17px; - margin-top: -5px; - padding-bottom: 2px; -} - /*----------- Rules Section -------------*/ @@ -191,26 +316,12 @@ div.sheet-section-regle { div.sheet-section-regle p{ font-family: 'Shadows Into Light'; - font-size: 25px; + font-size: 23px; color: #e1e1e1 !important; margin-left: 20px; line-height: 1.6; width: 750px; - padding-bottom: 50px; -} - - -input[type=text], -input[type=number] { - display: inline-block; - margin-right: 5px; - box-shadow: none; - border: none; - border-bottom: 1px solid #e1e1e1; - -moz-appearance:textfield; - font-size: 17px; - margin-top: -5px; - padding-bottom: 2px; + padding-bottom: 25px; } @@ -222,7 +333,7 @@ div.sheet-section-GM { div.sheet-section-GM p{ font-family: 'Shadows Into Light'; - font-size: 20px; + font-size: 18px; color: #e1e1e1 !important; margin-left: 20px; width: 750px; @@ -312,4 +423,4 @@ input[type=number] { grid-column: span 2; padding: 5px; text-align: center; -} \ No newline at end of file +} diff --git a/Ten candles/ten-candles.html b/Ten candles/ten-candles.html index a0437a6bb949..0ab69792d1a0 100644 --- a/Ten candles/ten-candles.html +++ b/Ten candles/ten-candles.html @@ -9,48 +9,49 @@ Rules GM - + + - - - + + + - +
Virtue :
-Vice :
-Moment : "I will find hope..."
- -Brink : "Someone seen you..."
- +Virtue :
+Vice :
+Moment : "I will find hope..."
+ +Brink : "Someone seen you..."
+Name :
-Look :
-Age :
+Name :
+Look :
+Age :
Background
Moment : Burn this card and resolve a conflict roll. If successful, gain your hope dice.
Brink : Reroll all the dice. Keep the card in case of success, but on a failure, burn the card and lose your Hope dice.
Character's name
-Virtue :
-Vice :
-Moment :
-Brink :
+Character's name
++ Virtue : + Vice :
++ Moment : + Brink :
Character's name
-Virtue :
-Vice :
-Moment :
-Brink :
+Character's name
++ Virtue : + Vice :
+Moment : + Brink :
Character's name
-Virtue :
-Vice :
-Moment :
-Brink :
+Character's name
+Virtue : + Vice :
+Moment : + Brink :
{{name}} |
---|
AP Cost: {{cost}} | -
{{desc}} | -