diff --git a/RatasEnLasParedes/RatasEnLasParedes.css b/RatasEnLasParedes/RatasEnLasParedes.css index b9acdbab8d..5e6103eabd 100644 --- a/RatasEnLasParedes/RatasEnLasParedes.css +++ b/RatasEnLasParedes/RatasEnLasParedes.css @@ -1,313 +1,237 @@ -/* FONDO DE FICHA */ -/*@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');*/ -/*@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');*/ - -/* FONDO DE FICHA */ -div.sheet-mainBg { - height: 100%; - width: 700px; - background: url("https://i.imgur.com/0tA6R9M.jpg"); - background-size: cover; - border: 2px solid #2F5860; - border-radius: 10px; - padding: 6px 0px 6px 0px; -} - - -/* TIPOGRAFIAS */ @font-face { -font-family: '!PaulMaul'; -src: local('!PaulMaul.ttf'), - url(!PaulMaul.woff2) format('woff2'), - url(!PaulMaul.woff) format('woff'), - url(!PaulMaul.ttf) format('truetype'), - url(!PaulMaul.otf) format('opentype'), - url(!PaulMaul.eot) format('embedded-opentype'); + font-family: "!PaulMaul"; + src: local("!PaulMaul.ttf"), url(!PaulMaul.woff2) format("woff2"), url(!PaulMaul.woff) format("woff"), url(!PaulMaul.ttf) format("truetype"), url(!PaulMaul.otf) format("opentype"), url(!PaulMaul.eot) format("embedded-opentype"); +} +.charsheet div.mainBg { + height: 100%; + width: 700px; + background: url("https://i.imgur.com/0tA6R9M.jpg"); + background-size: cover; + border: 2px solid #2F5860; + border-radius: 10px; + padding: 6px 10px; +} +.charsheet img.logo { + width: 341px; + height: 165px; + margin-bottom: 20px; +} +.charsheet .section-block { + height: 50%; + width: 50%; +} +.charsheet .float-right { + float: right; +} +.charsheet .float-left { + float: left; +} +.charsheet .center { + text-align: center; + display: inline; + margin-right: 20px; + float: right; + font-family: "Shadows Into Light"; + color: blue; + font-size: 18px; + font-weight: bolder; + text-transform: uppercase; +} +.charsheet .separatorVertical { + margin: 5px 0px; +} +.charsheet .separatorVerticalInicio { + display: flex; + margin: 6px 0px; + height: 40px; +} +.charsheet .separatorVerticalGrande { + display: flex; + margin-top: 5px; + margin-bottom: 10px; + height: 40px; +} +.charsheet .separatorVerticalGrande2 { + margin-top: 5px; + margin-bottom: 40px; +} +.charsheet .separatorVerticalGrande3 { + margin-top: 5px; + margin-bottom: 25px; +} +.charsheet input[type=number] { + text-align: center; +} +.charsheet input[type=text].wid50 { + width: 50%; +} +.charsheet button[type=roll].blank-roll-button::before { + color: red; + content: ""; +} +.charsheet button[type=roll] { + background: none; + border: 1px solid black; + font-style: normal; + color: black; + content: ""; +} +.charsheet button[type=roll] span.d6 { + font-family: "dicefontd6"; + font-size: 1.5em; +} +.charsheet button[type=roll]:hover { + background: #a6a6a6; +} +.charsheet button[type=roll]:before { + content: ""; +} +.charsheet .labelCentro { + font-family: "veteran typewriter"; + color: black; + text-align: center; +} +.charsheet .labelCentral { + font-family: "veteran typewriter"; + font-size: 20px; +} +.charsheet .labelPeque { + font-family: "veteran typewriter"; + color: black; + text-align: center; + font-weight: lighter; + margin-right: 3px; + margin-left: 5px; + display: inline; +} +.charsheet .label { + font-family: "veteran typewriter"; + color: black; + display: inline-block; + padding: 0.8%; + margin-right: -0.5%; + font-size: 20px; + font-weight: Normal; + text-align: center; + display: inline; +} +.charsheet div.nombre label.label { + padding-top: 11px; + width: 150px; +} +.charsheet div.skills label.label { + padding-left: 35px; +} +.charsheet div.salud { + text-align: center; +} +.charsheet h4 { + /* DAÑO */ + border-radius: 35px 0px 35px 0px; + -moz-border-radius: 35px 0px 35px 0px; + -webkit-border-radius: 35px 0px 35px 0px; + text-align: center; + background-image: url("https://i.imgur.com/vNVTYig.png"); + padding-left: 5px; + width: 70%; + margin-left: 150px; + display: flex; + flex-flow: column nowrap; +} +.charsheet h4 div.flex-column { + display: flex; + flex-flow: row nowrap; + justify-content: center; + gap: 10px; +} +.charsheet h4 div.flex-column label { + width: 120px; + padding-left: 20px; + padding-right: 0px; +} +.charsheet div.notes .note-bg { + background: url("https://i.imgur.com/Gjsmgoo.jpg"); + width: 95%; +} +.charsheet div.notes .note-left { + margin-bottom: 5px; +} +.charsheet div.notes .recursos { + margin-top: 5px; +} +.charsheet div.notes .armasEquipo { + margin: 5px 0px; +} +.charsheet div.notes label.label { + margin-left: 65px; +} +.charsheet div.notes textarea { + width: calc(100% - 70px); + height: 90px; + resize: none; + background: transparent; + margin-left: 52px; + font-family: "Shadows Into Light"; + color: blue; + font-size: 18px; + font-weight: bolder; +} +.charsheet div.notes textarea:hover { + background: rgba(217, 217, 217, 0.6); } -.sheet-center { - text-align: center; - display: inline; - margin-right: 20px; - float: right; - font-family: 'Shadows Into Light'; - color: blue; - font-size: 18px; - font-weight: bolder; - text-transform: uppercase; - margin-bottom: 10px; -} - -.sheet-separatorVertical { - margin-top: 5px; - margin-bottom: 5px; -} - -.sheet-separatorVerticalInicio { - margin-top: 10px; - margin-bottom: 10px; -} - -.sheet-separatorVerticalGrande { - margin-top: 10px; - margin-bottom: 40px; -} - -.sheet-separatorVerticalGrande2 { - margin-top: 5px; - margin-bottom: 40px; -} - -.sheet-separatorVerticalGrande3 { - margin-top: 5px; - margin-bottom: 25px; -} - -textarea { - width: calc(100% - 70px); - height: 90px; - resize: none; - background: transparent; - margin-left: 45px; - font-family:'Shadows Into Light'; - color: blue; - font-size: 18px; - font-weight: bolder; - } - -input[type="number"]{ - text-align: center; -} - -.sheet-izquierda { - height: 50%; - float: left; - width: 50%; - } - -.sheet-izquierda2 { - float: left; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - } - -.sheet-derecha { - height: 50%; - float: right; - width: 50%; - } - - .sheet-margin-top { - margin-top: 5px; -} - - .sheet-margin-bottom { - margin-bottom: 5px; -} - - .sheet-margin-left { - margin-left: 5px; -} - - .sheet-margin-right { - margin-right: 5px; -} - -.sheet-separate{ - margin-top: 5px; - margin-bottom: 5px; -} - -/* ETIQUETAS */ -.sheet-labelCentro { - font-family: 'veteran typewriter'; - color: black; - text-align: center; - -} - -.sheet-labelCentral{ - font-family: 'veteran typewriter'; - font-size: 20px; -} - -.sheet-labelPeque { - font-family: 'veteran typewriter'; - color: black; - text-align: center; - font-weight: lighter; - margin-right: 3px; - margin-left: 5px; - display: inline; -} - - -.sheet-label { - font-family: 'veteran typewriter'; - color: black; - display: inline-block; - padding: 0.8%; - margin-right: -.5%; - font-size: 20px; - font-weight: Normal; - text-align: center; - display: inline; -} - - -/* DAÑO */ -.sheet-section-Armas { - float: left; -} - -h4 { - border-radius: 35px 0px 35px 0px; - -moz-border-radius: 35px 0px 35px 0px; - -webkit-border-radius: 35px 0px 35px 0px; - text-align: center; - background-image: url("https://i.imgur.com/vNVTYig.png"); - padding-left: 5px; - width: 70%; - margin-left: 150px; -} - -.sheet-Salud { - text-align: center; -} - -/* RECURSOS */ -.sheet-section-recursos { - float: left; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - margin-left: 10px; -} - - -.sheet-section-recursos input { - margin-left: 40px; - width: calc(100% - 102px); -} - -/* HECHIZOS */ -.sheet-section-recursos2 { - float: left; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - margin-right: 10px; - margin-left: 10px; - margin-bottom: 5px; - margin-top: 5px; - width: 70%; -} - -/* HECHIZOS */ -.sheet-section-hechizos { - float: left; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - margin-right: 10px; - margin-left: 10px; - margin-bottom: 5px; - width: 70%; -} - -.sheet-section-hechizos input { - margin-left: 55px; - width: calc(100% - 102px); -} - -/* ARMAS Y EQUIPO */ -.sheet-section-armasEquipo { - float: right; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - margin-right: 15px; - margin-bottom: 5px; - margin-top: 5px; - width: 70%; -} - -.sheet-section-armasEquipo input { - margin-left: 40px; - width: calc(100% - 102px); -} - -/* CICATRICES */ -.sheet-section-cicatrices { - float: right; - background: url("https://i.imgur.com/Gjsmgoo.jpg"); - margin-right: 15px; - width: 70%; -} - -.sheet-section-cicatrices input { - margin-left: 40px; - width: calc(100% - 102px); -} - -button[type=roll].sheet-blank-roll-button::before { - color: red; - content: ''; -} - -.charsheet button { - background: none; - font-size: 1.1em !important; - border: 1px solid black; - font-style: normal; - color: black; - content: ''; - } - -.charsheet button:hover { - background: #a6a6a6; -} - -.charsheet button[type=roll]: before { - content: ''; - } - - /* PLANTILLA */ .sheet-rolltemplate-RELP .sheet-rt-title { - font-size: 2em; + font-size: 2em; } - .sheet-rolltemplate-RELP .sheet-backg { - background: url(https://i.imgur.com/SJdfgIn.png) top left; - background-size: 90%; - background-repeat: no-repeat; - border-spacing: 0; - padding: 50px 40px 60px 15px; + background: url(https://i.imgur.com/SJdfgIn.png) top left; + background-size: 100%; + background-repeat: no-repeat; + border-spacing: 0; + display: flex; + place-content: center; + flex-flow: nowrap column; + background-position: top -48px left -4px; + height: 150px; + width: 230px; } - .sheet-rolltemplate-RELP .sheet-center { - text-align: center; + text-align: center; } - .sheet-rolltemplate-RELP .sheet-header1 { - - color : blue; - font-size: 22px; - font-family: 'veteran typewriter'; - letter-spacing:0.5px; - word-wrap: break-word; - margin-bottom: 10px; - + color: blue; + font-size: 22px; + font-family: "veteran typewriter"; + letter-spacing: 0.5px; + word-wrap: break-word; + margin-bottom: 10px; } - .sheet-rolltemplate-RELP .sheet-header2 { - background-color: transparent; - color : black; - font-size: 18px; - font-family: 'veteran typewriter'; - letter-spacing:1px; - font-weight: bolder; - margin-bottom: 10px; - + background-color: transparent; + color: black; + font-size: 18px; + font-family: "veteran typewriter"; + letter-spacing: 1px; + font-weight: bolder; + margin-bottom: 10px; + margin-left: -30px; } - .sheet-rolltemplate-RELP .sheet-body1 { - - color : #212f3d ; - font-size: 30px; - font-family: 'Shadows Into Light'; - padding:15px; - margin-bottom: 10px; - + color: #212f3d; + font-size: 30px; + padding: 15px; + margin-bottom: 10px; +} +.sheet-rolltemplate-RELP .inlinerollresult { + font-size: 1.5em; + margin-right: 20px; +} +.sheet-rolltemplate-RELP .inlinerollresult.fullcrit { + border: 5px solid #3FB315; +} +.sheet-rolltemplate-RELP .inlinerollresult.fullfail { + border: 5px solid #B31515; +} +.sheet-rolltemplate-RELP .inlinerollresult.importantroll { + border: 5px solid #4A57ED; } diff --git a/RatasEnLasParedes/RatasEnLasParedes.html b/RatasEnLasParedes/RatasEnLasParedes.html index be6c618b95..3ca9777377 100644 --- a/RatasEnLasParedes/RatasEnLasParedes.html +++ b/RatasEnLasParedes/RatasEnLasParedes.html @@ -1,127 +1,117 @@ +
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ +
-
-
-
-
-
-
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + + + +
+
+ + + + +
+
+ + +
+
-
+
+ +

+
+ + + + +
+
+ + +
+

+
+
+
+
+ + +
+
+ + +
+
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
-
-
-
- - - - -
-
- - - - -
-
- - -
-
-
-
- -
-

- - - - - - -

-
-
-
-
- - -
-
- - -
-
-
-
- - -
-
-
- - -
-
-
-
-
-

.

+
+
+ + +
+
+
+ + +
+
+
+

+

.

-
- -
- {{title}} +
+ {{title}} +
+
+ {{subheader}} +
+ {{#roll}} +
+ {{roll}}
-
- {{subheader}} -
- - - {{#roll}} -
- {{roll}} -
- {{/roll}} - - + {{/roll}}
- + diff --git a/RatasEnLasParedes/RatasEnLasParedes.png b/RatasEnLasParedes/RatasEnLasParedes.png index ca0390bb17..3419baa06b 100644 Binary files a/RatasEnLasParedes/RatasEnLasParedes.png and b/RatasEnLasParedes/RatasEnLasParedes.png differ diff --git a/RatasEnLasParedes/RatasEnLasParedes.scss b/RatasEnLasParedes/RatasEnLasParedes.scss new file mode 100644 index 0000000000..3598bf18cb --- /dev/null +++ b/RatasEnLasParedes/RatasEnLasParedes.scss @@ -0,0 +1,300 @@ +// FONDO DE FICHA +// @import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');*/ +// @import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');*/ + +// TIPOGRAFIAS +@font-face { + font-family: '!PaulMaul'; + src: local('!PaulMaul.ttf'), + url(!PaulMaul.woff2) format('woff2'), + url(!PaulMaul.woff) format('woff'), + url(!PaulMaul.ttf) format('truetype'), + url(!PaulMaul.otf) format('opentype'), + url(!PaulMaul.eot) format('embedded-opentype'); +} + +.charsheet{ + + div.mainBg { + height: 100%; + width: 700px; + background: url("https://i.imgur.com/0tA6R9M.jpg"); + background-size: cover; + border: 2px solid #2F5860; + border-radius: 10px; + padding: 6px 10px; + + } + img.logo{ + width: 341px; + height: 165px; + margin-bottom: 20px; + } + + .section-block{ + height: 50%; + width: 50%; + } + + .float-right { + float: right; + } + .float-left { + float: left; + } + + .center { + text-align: center; + display: inline; + margin-right: 20px; + float: right; + font-family: 'Shadows Into Light'; + color: blue; + font-size: 18px; + font-weight: bolder; + text-transform: uppercase; + } + + .separatorVertical { + margin: 5px 0px; + } + + .separatorVerticalInicio { + display: flex; + margin: 6px 0px; + height: 40px; + } + + .separatorVerticalGrande { + display: flex; + margin-top: 5px; + margin-bottom: 10px; + height: 40px; + } + + .separatorVerticalGrande2 { + margin-top: 5px; + margin-bottom: 40px; + } + + .separatorVerticalGrande3 { + margin-top: 5px; + margin-bottom: 25px; + } + + input[type="number"]{ + text-align: center; + } + input[type="text"].wid50{ + width: 50%; + } + + button[type=roll].blank-roll-button::before { + color: red; + content: ''; + } + + button[type=roll] { + background: none; + border: 1px solid black; + font-style: normal; + color: black; + content: ''; + + span.d6{ + font-family: 'dicefontd6'; + font-size: 1.5em; + } + } + + button[type=roll]:hover { + background: #a6a6a6; + } + + button[type=roll]:before { + content: ''; + } + + + + // ETIQUETAS + .labelCentro { + font-family: 'veteran typewriter'; + color: black; + text-align: center; + } + + .labelCentral{ + font-family: 'veteran typewriter'; + font-size: 20px; + } + + .labelPeque { + font-family: 'veteran typewriter'; + color: black; + text-align: center; + font-weight: lighter; + margin-right: 3px; + margin-left: 5px; + display: inline; + } + + + .label { + font-family: 'veteran typewriter'; + color: black; + display: inline-block; + padding: 0.8%; + margin-right: -.5%; + font-size: 20px; + font-weight: Normal; + text-align: center; + display: inline; + } + + div.nombre label.label{ + padding-top: 11px; + width: 150px; + } + + div.skills label.label{ + padding-left: 35px; + } + + div.salud { + text-align: center; + } + + h4 { + /* DAÑO */ + border-radius: 35px 0px 35px 0px; + -moz-border-radius: 35px 0px 35px 0px; + -webkit-border-radius: 35px 0px 35px 0px; + text-align: center; + background-image: url("https://i.imgur.com/vNVTYig.png"); + padding-left: 5px; + width: 70%; + margin-left: 150px; + display: flex; + flex-flow: column nowrap; + + div.flex-column{ + display: flex; + flex-flow: row nowrap; + justify-content: center; + gap: 10px; + label{ + width: 120px; + padding-left: 20px; + padding-right: 0px; + } + } + } + + div.notes { + + .note-bg{ + background: url("https://i.imgur.com/Gjsmgoo.jpg"); + width: 95%; + } + + .note-left{ + margin-bottom: 5px; + } + + // RECURSOS + .recursos { + margin-top: 5px; + } + // ARMAS Y EQUIPO + .armasEquipo { + margin: 5px 0px; + } + + label.label{ + margin-left: 65px; + } + + textarea { + width: calc(100% - 70px); + height: 90px; + resize: none; + background: transparent; + margin-left: 52px; + font-family:'Shadows Into Light'; + color: blue; + font-size: 18px; + font-weight: bolder; + } + textarea:hover{ + background: hsla(0, 0%, 85%, 0.6); + } + } + +} + +// ROLL TEMPLATE / PLANTILLA EN ROLLO +.sheet-rolltemplate-RELP { + .sheet-rt-title { + font-size: 2em; + } + + .sheet-backg { + background: url(https://i.imgur.com/SJdfgIn.png) top left; + background-size: 100%; + background-repeat: no-repeat; + border-spacing: 0; + display: flex; + place-content: center; + flex-flow: nowrap column; + background-position: top -48px left -4px; + height: 150px; + width: 230px; + } + + .sheet-center { + text-align: center; + } + + .sheet-header1 { + color : blue; + font-size: 22px; + font-family: 'veteran typewriter'; + letter-spacing:0.5px; + word-wrap: break-word; + margin-bottom: 10px; + } + + .sheet-header2 { + background-color: transparent; + color : black; + font-size: 18px; + font-family: 'veteran typewriter'; + letter-spacing:1px; + font-weight: bolder; + margin-bottom: 10px; + margin-left: -30px; + } + + .sheet-body1 { + color : #212f3d ; + font-size: 30px; + padding:15px; + margin-bottom: 10px; + } + + .inlinerollresult{ + font-size: 1.5em; + margin-right: 20px; + } + + .inlinerollresult.fullcrit{ + border: 5px solid #3FB315; + } + .inlinerollresult.fullfail{ + border: 5px solid #B31515; + } + .inlinerollresult.importantroll { + border: 5px solid #4A57ED; + } +} \ No newline at end of file diff --git a/RatasEnLasParedes/Readme.md b/RatasEnLasParedes/Readme.md new file mode 100644 index 0000000000..9676fcd22e --- /dev/null +++ b/RatasEnLasParedes/Readme.md @@ -0,0 +1,7 @@ +# Update character sheet code + +Edit the `.scss`-file, then compile it to CSS with: + +**A)** some online SASS compiler like [sassmeister](https://www.sassmeister.com/), then copy-paste changes into the `.css`-file. + +**B)** install [SASS](https://sass-lang.com/install) for Command line, then run command `sass RatasEnLasParedes.scss RatasEnLasParedes.css --no-source-map --no-charset`. The `.css`-file is now automatically updated. \ No newline at end of file diff --git a/RatasEnLasParedes/sheet.json b/RatasEnLasParedes/sheet.json index e791bc2b8c..121e221273 100644 --- a/RatasEnLasParedes/sheet.json +++ b/RatasEnLasParedes/sheet.json @@ -5,5 +5,5 @@ "roll20userid": "2881202", "preview": "RatasEnLasParedes.png", "instructions": "Rats in the walls character sheet, based on Spanish Patronage edition by the Hills press, author:Kobayashi", - "legacy": true + "legacy": false } \ No newline at end of file