├── README.md ├── characterSheet.js ├── img ├── character.png ├── dado.png └── trashcan.svg ├── index.html └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | ## RPG: Character Sheet 2 | 3 | - Uma página de ficha de personagem para RPG inspirada/copiada da **[Ordem Paranormal: Desconjuração](https://www.youtube.com/watch?v=b7PvLWZR6pg "Ordem Paranormal: Desconjuração")**, fiz com intuito de estudar e praticar HTML e CSS; 4 | - A character sheet page for RPG inspired/copied from the **[Ordem Paranormal: Desconjuração](https://www.youtube.com/watch?v=b7PvLWZR6pg "Paranormal Order: Misjudgment")**, I did to study and practice HTML and CSS; 5 | 6 | ### Lembretes 7 | - Nem todas as funções estão prontas. 8 | - Você pode pegar o código e modificar para usar, se quiser contribuir só fazer um PR 9 | 10 | 11 | 12 | --- 13 | 14 | Feito com ♥ by **[Ryan Souza (LockDzn)](https://twitter.com/nuloki_ "Ryan Souza (LockDzn)")** 15 | -------------------------------------------------------------------------------- /characterSheet.js: -------------------------------------------------------------------------------- 1 | const data = { 2 | name: 'Claudio', 3 | player: 'Ryan', 4 | occupation: 'Caçador', 5 | age: 21, 6 | sex: 'male', 7 | birthplace: 'São paulo', 8 | residence: 'São paulo', 9 | 10 | life: { 11 | current: 12, 12 | max: 12, 13 | }, 14 | sanity: { 15 | current: 62, 16 | max: 62, 17 | }, 18 | 19 | weapons: [ 20 | { 21 | name: 'Balestra', 22 | type: 'Arco', 23 | damage: '1d20', 24 | numCurrent: 1, 25 | numMax: 1, 26 | attack: 5, 27 | reach: '10 m', 28 | defect: 1, 29 | area: '', 30 | }, 31 | { 32 | name: 'Canivete', 33 | type: 'Briga', 34 | damage: '1d10', 35 | numCurrent: '', 36 | numMax: '', 37 | attack: '1/2', 38 | reach: '', 39 | defect: 1, 40 | area: '', 41 | }, 42 | ], 43 | attributes: [ 44 | { 45 | type: 'Aparência', 46 | amount: 10, 47 | }, 48 | { 49 | type: 'Constituição', 50 | amount: 10, 51 | }, 52 | { 53 | type: 'Destreza', 54 | amount: 10, 55 | }, 56 | { 57 | type: 'Educação', 58 | amount: 10, 59 | }, 60 | { 61 | type: 'Força', 62 | amount: 10, 63 | }, 64 | { 65 | type: 'Inteligência', 66 | amount: 10, 67 | }, 68 | { 69 | type: 'Poder', 70 | amount: 10, 71 | }, 72 | { 73 | type: 'Sorte', 74 | amount: 10, 75 | }, 76 | { 77 | type: 'Movimento', 78 | amount: 10, 79 | }, 80 | { 81 | type: '?', 82 | amount: 10, 83 | }, 84 | ], 85 | } 86 | 87 | data.weapons.map((weapon, index) => { 88 | addWeaponToTable(weapon, index) 89 | }) 90 | 91 | data.attributes.map((attribute, index) => { 92 | addAttribute(attribute, index) 93 | }) 94 | 95 | $('#name').val(data.name) 96 | $('#player').val(data.player) 97 | $('#occupation').val(data.occupation) 98 | $('#age').val(data.age) 99 | $('#sex').val(data.sex) 100 | $('#birthplace').val(data.birthplace) 101 | $('#residence').val(data.residence) 102 | 103 | $('.lifeBar').css('width', `${calculateBar(data.life.current, data.life.max)}%`) 104 | $('#lifeCount').text(`${data.life.current}/${data.life.max}`) 105 | $('#lifeCurrent').val(data.life.current) 106 | $('#lifeMax').val(data.life.max) 107 | 108 | $('.sanityBar').css( 109 | 'width', 110 | `${calculateBar(data.sanity.current, data.sanity.max)}%` 111 | ) 112 | $('#sanityCount').text(`${data.sanity.current}/${data.sanity.max}`) 113 | $('#sanityCurrent').val(data.sanity.current) 114 | $('#sanityMax').val(data.sanity.max) 115 | 116 | const diceModal = $('#diceAttributes') 117 | const lifeModal = $('#lifeModal') 118 | const sanityModal = $('#sanityModal') 119 | 120 | $(window).click(function (event) { 121 | if (event.target.id == 'diceAttributes') { 122 | diceModal.css('display', 'none') 123 | $('#diceNumber').text('') 124 | $('#diceType').text('') 125 | 126 | $('.modalDice').css('transform', 'rotate(0deg)') 127 | $('.modalDice').css('-webkit-transform', 'rotate(0deg)') 128 | } else if (event.target.id == 'lifeModal') { 129 | lifeModal.css('display', 'none') 130 | } else if (event.target.id == 'sanityModal') { 131 | sanityModal.css('display', 'none') 132 | } else if (event.target.id == 'addWeaponModal') { 133 | closeModal('#addWeaponModal') 134 | } 135 | }) 136 | 137 | function rollAtribute(atribute, amount) { 138 | console.log(this) 139 | 140 | diceModal.css('display', 'block') 141 | 142 | setTimeout(() => { 143 | $('.modalDice').css('transform', 'rotate(360deg)') 144 | $('.modalDice').css('-webkit-transform', 'rotate(360deg)') 145 | }, 1000) 146 | 147 | setTimeout(() => { 148 | const diceNumber = rollDice('1d20') 149 | const diceType = calcDice(amount, diceNumber) 150 | $('#diceNumber').text(diceNumber) 151 | $('#diceType').text(diceType) 152 | 153 | setTimeout(() => { 154 | diceModal.css('display', 'none') 155 | $('#diceNumber').text('') 156 | $('#diceType').text('') 157 | 158 | $('.modalDice').css('transform', 'rotate(0deg)') 159 | $('.modalDice').css('-webkit-transform', 'rotate(0deg)') 160 | }, 20000) 161 | }, 2000) 162 | } 163 | 164 | $('.lifeBar').click(function () { 165 | console.log(this) 166 | lifeModal.css('display', 'block') 167 | }) 168 | 169 | $('.sanityBar').click(function () { 170 | console.log(this) 171 | sanityModal.css('display', 'block') 172 | }) 173 | 174 | $('#addWeapon').click(function () { 175 | openModal('#addWeaponModal') 176 | }) 177 | 178 | $('#lesion').change(function () { 179 | if (this.checked) { 180 | console.log('Modo lesionamento grave ativado!') 181 | } else { 182 | console.log('Modo lesionamento grave desativado!') 183 | } 184 | }) 185 | 186 | $('#injury').change(function () { 187 | if (this.checked) { 188 | console.log('Modo lesionamento ativado!') 189 | } else { 190 | console.log('Modo lesionado desativado!') 191 | } 192 | }) 193 | 194 | $('#dying').change(function () { 195 | if (this.checked) { 196 | console.log('Modo morrendo ativado!') 197 | } else { 198 | console.log('Modo morrendo desativado!') 199 | } 200 | }) 201 | 202 | $('#traumatized').change(function () { 203 | if (this.checked) { 204 | console.log('Modo traumatizado ativado!') 205 | } else { 206 | console.log('Modo traumatizado desativado!') 207 | } 208 | }) 209 | 210 | $('#crazed').change(function () { 211 | if (this.checked) { 212 | console.log('Modo enlouquecido ativado!') 213 | } else { 214 | console.log('Modo enlouquecido desativado!') 215 | } 216 | }) 217 | 218 | $('#addWeaponForm').submit(function (event) { 219 | var weaponType = '' 220 | 221 | if ($('#weaponType').val() == 'fire') { 222 | weaponType = 'Fogo' 223 | } else if ($('#weaponType').val() == 'arch') { 224 | weaponType = 'Arco' 225 | } else if ($('#weaponType').val() == 'fight') { 226 | weaponType = 'Briga' 227 | } 228 | 229 | const weapon = { 230 | name: $('#weaponName').val(), 231 | type: weaponType, 232 | damage: $('#weapondamage').val(), 233 | numCurrent: $('#weaponNumCurrent').val(), 234 | numMax: $('#weaponNumMax').val(), 235 | attack: $('#weaponAttack').val(), 236 | reach: $('#weaponReach').val(), 237 | defect: $('#weaponDefect').val(), 238 | area: $('#weaponArea').val(), 239 | } 240 | 241 | data.weapons.push(weapon) 242 | const id = data.weapons.length - 1 243 | addWeaponToTable(weapon, id) 244 | 245 | closeModal('#addWeaponModal') 246 | event.preventDefault() 247 | }) 248 | 249 | $('#changeLife').submit(function (event) { 250 | let current = Number($('#lifeCurrent').val()) 251 | const max = Number($('#lifeMax').val()) 252 | 253 | if (current > max) { 254 | alert('A vida atual não pode ser maior que a maxima!') 255 | current = max 256 | } 257 | 258 | data.life.current = current 259 | data.life.max = max 260 | $('.lifeBar').css('width', `${calculateBar(current, max)}%`) 261 | $('#lifeCount').text(`${current}/${max}`) 262 | 263 | closeModal('#lifeModal') 264 | event.preventDefault() 265 | }) 266 | 267 | $('#changeSanity').submit(function (event) { 268 | let current = Number($('#sanityCurrent').val()) 269 | const max = Number($('#sanityMax').val()) 270 | 271 | if (current > max) { 272 | alert('A sanidade atual não pode ser maior que a maxima!') 273 | current = max 274 | } 275 | 276 | data.sanity.current = current 277 | data.sanity.max = max 278 | $('.sanityBar').css('width', `${calculateBar(current, max)}%`) 279 | $('#sanityCount').text(`${current}/${max}`) 280 | 281 | closeModal('#sanityModal') 282 | event.preventDefault() 283 | }) 284 | 285 | function calculateBar(current, max) { 286 | if (current > max) { 287 | return 100 288 | } else if (current < 0) { 289 | return 0 290 | } else { 291 | const value = (100 / max) * current 292 | const string = value.toString().split('.')[0] 293 | const percentage = Number(string) 294 | return percentage 295 | } 296 | } 297 | 298 | function calcDice(ability, dice) { 299 | // Não encontrei uma forma mais fácil, então fiz assim 300 | 301 | const table = [ 302 | { normal: 20 }, 303 | { normal: 19, good: 20 }, 304 | { normal: 18, good: 20 }, 305 | { normal: 17, good: 19 }, 306 | { normal: 16, good: 19, extreme: 20 }, 307 | { normal: 15, good: 18, extreme: 20 }, 308 | { normal: 14, good: 18, extreme: 20 }, 309 | { normal: 13, good: 17, extreme: 20 }, 310 | { normal: 12, good: 17, extreme: 20 }, 311 | { normal: 11, good: 16, extreme: 20 }, 312 | { normal: 10, good: 16, extreme: 19 }, 313 | { normal: 9, good: 16, extreme: 19 }, 314 | { normal: 8, good: 15, extreme: 19 }, 315 | { normal: 7, good: 14, extreme: 19 }, 316 | { normal: 6, good: 14, extreme: 18 }, 317 | { normal: 5, good: 13, extreme: 18 }, 318 | { normal: 4, good: 13, extreme: 18 }, 319 | { normal: 3, good: 12, extreme: 18 }, 320 | { normal: 2, good: 12, extreme: 18 }, 321 | { normal: 1, good: 11, extreme: 17 }, 322 | ] 323 | 324 | const type = table[ability - 1] 325 | 326 | if (type.extreme) { 327 | if (dice >= type.extreme) return 'Extremo' 328 | if (dice >= type.good) return 'Sucesso Bom' 329 | if (dice >= type.normal) return 'Sucesso Normal' 330 | if (dice <= type.normal) return 'Fracasso' 331 | } else if (type.good) { 332 | if (dice >= type.good) return 'Sucesso Bom' 333 | if (dice >= type.normal) return 'Sucesso Normal' 334 | if (dice <= type.normal) return 'Fracasso' 335 | } else if (type.normal) { 336 | if (dice >= type.normal) return 'Sucesso Normal' 337 | if (dice <= type.normal) return 'Fracasso' 338 | } 339 | } 340 | 341 | function rollDice(dice) { 342 | let [count, max] = dice.split('d') 343 | 344 | if (Number(count) && Number(max)) { 345 | count = Number(count) 346 | max = Number(max) 347 | 348 | let total = 0 349 | 350 | for (let i = 0; i < count; i++) { 351 | total += Math.floor(Math.random() * max + 1) 352 | } 353 | 354 | return total 355 | } else { 356 | return null 357 | } 358 | } 359 | 360 | function openModal(modal) { 361 | const Modal = $(modal) 362 | Modal.css('display', 'block') 363 | } 364 | 365 | function closeModal(modal) { 366 | const Modal = $(modal) 367 | Modal.css('display', 'none') 368 | } 369 | 370 | function addWeaponToTable(weapon, id) { 371 | const newWeapon = $(` 372 | 373 | 376 | ${weapon.name} 377 | 378 | ${weapon.type} 379 | ${weapon.damage} 380 | ${weapon.numCurrent} 381 | ${weapon.numMax} 382 | ${weapon.attack} 383 | ${weapon.reach} 384 | ${weapon.defect} 385 | ${weapon.area} 386 | `) 387 | $('table#weapons').append(newWeapon) 388 | } 389 | 390 | function addAttribute(attribute, id) { 391 | const newAttribute = $(`
392 | 393 | Dado 394 | 395 |

${attribute.type}

396 | 397 |
`) 398 | $('#attributesList').append(newAttribute) 399 | } 400 | 401 | function deleteWeapon(id) { 402 | $(`tr#${id}`).remove() 403 | } 404 | -------------------------------------------------------------------------------- /img/character.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LockDzn/rpg-character-sheet/f894481d1ffa9f6b93f17d86805be93347f18711/img/character.png -------------------------------------------------------------------------------- /img/dado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LockDzn/rpg-character-sheet/f894481d1ffa9f6b93f17d86805be93347f18711/img/dado.png -------------------------------------------------------------------------------- /img/trashcan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Svg Vector Icons : http://www.onlinewebfonts.com/icon 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | Ficha do personagem 15 | 16 | 17 |

Perfil de investigador

18 | 19 | 20 | 27 | 28 | 41 | 42 | 60 | 61 | 120 | 121 |
122 |
123 |

DETALHES PESSOAIS

124 |
125 | 126 |
127 |

Nome

128 | 129 |

Jogador

130 | 131 |

Ocupação

132 | 133 |

Idade

134 | 135 |

Sexo

136 | 141 |

Local de nascimento

142 | 143 |

Local de residência

144 | 145 |
146 |
147 |
148 |
149 | Foto 150 | Dado 151 |
152 | 153 |
154 |

Vida

155 |
156 |
157 |

158 |
159 |
160 |
161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 | 171 |

Sanidade

172 |
173 |
174 |
175 |

176 |
177 |
178 | Dado 179 |
180 |
181 | 187 | 188 | 189 | 190 |
191 |
192 | 193 |
194 |
195 |

Dano extra

196 | 197 |
198 |
199 |

Corpo

200 | 201 |
202 |
203 |

Exposição paranormal

204 | 205 |
206 |
207 |
208 |
209 |

ATRIBUTOS

210 |
211 | 212 |
213 |
214 |
215 |

PERICIA

216 |
217 |
218 |
219 |
220 |

COMBATE

221 | 222 |
223 |
224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 |
NomeTipoDanoNun. AtualNum. MáximoAtaqueAlcanceDefeitoÁrea
238 |
239 | 240 |
241 |

PERICIA

242 |
243 |
244 |
245 | 246 | 260 | 261 | 262 | 263 | 264 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | } 8 | 9 | body { 10 | background: #0a0b0c; 11 | color: #fff; 12 | font-family: 'Itim', sans-serif; 13 | } 14 | 15 | hr { 16 | border-top: 1px solid #a2a2a2; 17 | width: 90%; 18 | margin-left: auto; 19 | margin-right: auto; 20 | margin-bottom: 10px; 21 | } 22 | 23 | h1 { 24 | text-align: center; 25 | } 26 | 27 | h2 { 28 | text-align: center; 29 | } 30 | 31 | h3 { 32 | text-align: center; 33 | } 34 | 35 | h4 { 36 | text-align: left; 37 | } 38 | 39 | h1.title { 40 | margin-top: 40px; 41 | margin-bottom: 30px; 42 | } 43 | 44 | h2.grid-title { 45 | margin-top: 10px; 46 | margin-bottom: 10px; 47 | } 48 | 49 | .container { 50 | display: grid; 51 | grid-template-areas: 52 | 'details details details character' 53 | 'attributes attributes attributes expertise' 54 | 'combat combat combat combat' 55 | 'expertise2 expertise2 expertise2 expertise2'; 56 | grid-gap: 30px; 57 | 58 | margin-left: auto; 59 | margin-right: auto; 60 | width: 70%; 61 | } 62 | 63 | .border { 64 | border-radius: 3px; 65 | border: solid; 66 | border-width: 0.1px; 67 | border-color: #a2a2a2; 68 | } 69 | 70 | .box { 71 | background: #000; 72 | } 73 | 74 | .details { 75 | grid-area: details; 76 | height: auto; 77 | } 78 | .character { 79 | grid-area: character; 80 | width: 420px; 81 | } 82 | 83 | .characterHeader { 84 | display: flex; 85 | justify-content: space-evenly; 86 | margin-top: 20px; 87 | } 88 | 89 | .characterPhoto { 90 | border: solid; 91 | border-width: 2px; 92 | border-color: #a2a2a2; 93 | border-radius: 50%; 94 | } 95 | 96 | .dice { 97 | height: 80px; 98 | margin-top: 18px; 99 | } 100 | 101 | .attributes { 102 | grid-area: attributes; 103 | } 104 | 105 | .expertise { 106 | grid-area: expertise; 107 | height: 400px; 108 | } 109 | 110 | .expertise2 { 111 | grid-area: expertise2; 112 | height: 400px; 113 | } 114 | 115 | 116 | .combat { 117 | grid-area: combat; 118 | height: 400px; 119 | } 120 | .combat .grid-title { 121 | flex: 1; 122 | } 123 | 124 | .combat .combatHeader { 125 | display: flex; 126 | flex-direction: row; 127 | justify-self: center; 128 | } 129 | 130 | .combat .combatHeader button { 131 | align-self: center; 132 | width: 25px; 133 | height: 25px; 134 | color: #fff; 135 | font-size: 22px; 136 | background: #0a0b0c; 137 | border: 0.1px solid #a2a2a2; 138 | margin-right: 50px; 139 | } 140 | 141 | table.weapons { 142 | display: block; 143 | margin: 0; 144 | margin-left: auto; 145 | margin-right: auto; 146 | margin-block-end: auto; 147 | border-collapse: collapse; 148 | width: 90%; 149 | } 150 | 151 | table.weapons tr:first-child { 152 | border-bottom: 2px solid #a2a2a2; 153 | } 154 | 155 | table.weapons tr { 156 | border-bottom: 0.1px solid #a2a2a2; 157 | } 158 | 159 | table.weapons th { 160 | text-align: center; 161 | height: 25px; 162 | width: 10%; 163 | } 164 | 165 | table.weapons td { 166 | text-align: center; 167 | height: 35px; 168 | } 169 | 170 | table.weapons td input { 171 | text-align: center; 172 | width: 65%; 173 | border-bottom: 0.1px solid #a2a2a2; 174 | } 175 | 176 | table.weapons td select { 177 | font-size: 16px; 178 | } 179 | 180 | 181 | table.weapons td button { 182 | color: #fff; 183 | background: #0a0b0c; 184 | } 185 | 186 | .trashcan { 187 | color:white; 188 | width: 15px; 189 | font-size: 17px; 190 | } 191 | 192 | .inputs { 193 | display: flex; 194 | flex-direction: column; 195 | 196 | margin-left: 20px; 197 | margin-right: 20px; 198 | } 199 | 200 | input { 201 | border: none; 202 | border-bottom: 2px solid#a2a2a2; 203 | 204 | padding: 3px 4px; 205 | margin-bottom: 10px; 206 | background-color: #0a0b0c; 207 | color: #fff; 208 | 209 | font-family: 'Itim', sans-serif; 210 | } 211 | 212 | input:focus { 213 | outline: none; 214 | } 215 | 216 | select { 217 | border: none; 218 | border-bottom: 2px solid#a2a2a2; 219 | 220 | padding: 3px 4px; 221 | margin-bottom: 10px; 222 | background-color: #0a0b0c; 223 | color: #fff; 224 | 225 | font-family: 'Itim', sans-serif; 226 | } 227 | 228 | select:focus { 229 | outline: none; 230 | } 231 | 232 | /* INICIO BARS */ 233 | 234 | .bars { 235 | padding-top: 12px; 236 | } 237 | 238 | .bar { 239 | width: 100%; 240 | background-color: grey; 241 | margin-bottom: 10px; 242 | margin-top: 5px; 243 | overflow: hidden; 244 | } 245 | 246 | .barcount { 247 | width: 100%; 248 | margin-left: 10px; 249 | } 250 | 251 | .contentSanityBar { 252 | align-self: end; 253 | width: 80%; 254 | background-color: grey; 255 | margin-bottom: 10px; 256 | margin-top: 5px; 257 | } 258 | .sanity { 259 | display: flex; 260 | justify-content: space-between; 261 | align-items: end; 262 | } 263 | 264 | .sanityDice { 265 | display: block; 266 | margin-left: auto; 267 | margin-right: auto; 268 | height: 35px; 269 | } 270 | 271 | .bars .checkboxs { 272 | text-align: center; 273 | } 274 | 275 | .bars .checkboxs label { 276 | margin-right: 10px; 277 | } 278 | 279 | .lifeBar { 280 | /* width: 50%; */ 281 | height: 25px; 282 | background-color: #640101; 283 | transition: width 2s; 284 | display: flex; 285 | align-items: center; 286 | justify-content: center; 287 | text-align: center; 288 | } 289 | 290 | .sanityBar { 291 | width: 50%; 292 | height: 25px; 293 | background-color: #011b64; 294 | transition: width 2s; 295 | display: flex; 296 | align-items: center; 297 | justify-content: center; 298 | text-align: center; 299 | } 300 | 301 | /* FIM BARS */ 302 | 303 | .extra { 304 | display: flex; 305 | justify-content: space-between; 306 | align-items: center; 307 | margin-top: 15px; 308 | padding: 1px 15px; 309 | } 310 | 311 | .extra p { 312 | text-align: center; 313 | font-weight: bold; 314 | } 315 | 316 | .extra input { 317 | width: 50%; 318 | text-align: center; 319 | font-size: 18px; 320 | align-self: center; 321 | } 322 | 323 | .extra .damage { 324 | display: flex; 325 | flex-direction: column; 326 | width: 100px; 327 | } 328 | 329 | .extra .body { 330 | display: flex; 331 | flex-direction: column; 332 | width: 100px; 333 | } 334 | 335 | .extra .exposure { 336 | display: flex; 337 | flex-direction: column; 338 | width: 100px; 339 | } 340 | 341 | .attributes .attributesList { 342 | display: flex; 343 | flex-flow: row wrap; 344 | justify-content: center; 345 | } 346 | 347 | .attributes .attribute { 348 | display: flex; 349 | flex-direction: column; 350 | margin: 10px; 351 | width: 85px; 352 | } 353 | 354 | .attribute img { 355 | display: block; 356 | margin-left: auto; 357 | margin-right: auto; 358 | height: 35px; 359 | } 360 | 361 | .attribute a { 362 | cursor: pointer; 363 | -webkit-transition: -webkit-transform .8s ease-in-out; 364 | transition: transform .8s ease-in-out; 365 | } 366 | 367 | .attribute a:hover { 368 | -webkit-transform: rotate(360deg); 369 | transform: rotate(360deg); 370 | } 371 | 372 | .attribute input { 373 | width: 50%; 374 | text-align: center; 375 | font-size: 18px; 376 | align-self: center; 377 | } 378 | 379 | /* The Modal (background) */ 380 | 381 | .modal { 382 | display: none; 383 | position: fixed; 384 | z-index: 1; 385 | left: 0; 386 | top: 0; 387 | width: 100%; 388 | height: 100%; 389 | overflow: auto; 390 | background-color: rgb(0,0,0); 391 | background-color: rgb(0 0 0 / 62%); 392 | } 393 | 394 | .formModal { 395 | display: flex; 396 | flex-direction: column; 397 | align-items: center; 398 | } 399 | 400 | .modal-content { 401 | background-color: #0a0b0c; 402 | text-align: center; 403 | margin: 15% auto; 404 | padding: 20px; 405 | border: 1px solid #888; 406 | width: 20%; 407 | } 408 | 409 | .modal-content h2 { 410 | font-size: 30px; 411 | } 412 | 413 | .modal-content p { 414 | font-size: 25px; 415 | } 416 | 417 | .modal-content input { 418 | font-size: 20px; 419 | text-align: center; 420 | } 421 | 422 | .modal-content input[type=submit] { 423 | margin-top: 12px; 424 | margin-bottom: 0px; 425 | border: 1px solid; 426 | padding: 1px 20px 1px; 427 | } 428 | 429 | .with-input .modal-content { 430 | width: 40%; 431 | } 432 | 433 | .with-input#addWeaponModal .modal-content { 434 | width: 70%; 435 | } 436 | 437 | .modalDice { 438 | height: 35px; 439 | -webkit-transition: -webkit-transform .8s ease-in-out; 440 | transition: transform .8s ease-in-out; 441 | } 442 | 443 | @media only screen and (min-width: 1000px) { 444 | .container { 445 | width: 65%; 446 | } 447 | } 448 | 449 | @media only screen and (min-width: 1342px) { 450 | .container { 451 | width: 62%; 452 | } 453 | } 454 | 455 | @media only screen and (min-width: 1500px) { 456 | .container { 457 | width: 50%; 458 | } 459 | } 460 | 461 | @media only screen and (min-width: 1920px) { 462 | .container { 463 | width: 40%; 464 | } 465 | } 466 | 467 | input[type="checkbox"] { 468 | position: absolute; 469 | z-index: -1; 470 | opacity: 0; 471 | } 472 | 473 | input[type="checkbox"] + label { 474 | position: relative; 475 | cursor: pointer; 476 | padding-left: 20px; 477 | } 478 | 479 | input[type="checkbox"] + label:before { 480 | content: ""; 481 | position: absolute; 482 | width: 12px; 483 | height: 12px; 484 | left: 0; 485 | bottom: 2px; 486 | border: solid 0.1px #a2a2a2; 487 | vertical-align: bottom; 488 | border-radius: 2px; 489 | } 490 | 491 | input[type="checkbox"]:checked + label:after { 492 | content: ""; 493 | position: absolute; 494 | left: 4px; 495 | bottom: 6px; 496 | width: 4px; 497 | height: 7px; 498 | border: solid rgb(255, 255, 255); 499 | border-width: 0 2px 2px 0; 500 | transform: rotate(45deg); 501 | } 502 | --------------------------------------------------------------------------------