diff --git a/Feast_of_Legends/feast_of_legends.css b/Feast_of_Legends/feast_of_legends.css index d47adcff61..5be5006a11 100644 --- a/Feast_of_Legends/feast_of_legends.css +++ b/Feast_of_Legends/feast_of_legends.css @@ -1,28 +1,6 @@ -/*------------------------------------*\ +/*------------------------------------------------*\ #GENERAL -\*------------------------------------*/ - - -/* --------- Content positioning ------------- */ - -.sheet-flex-center { - display: flex; - align-items: center; -} - -.sheet-flex-middle { - display: flex; - justify-content: center; -} - -.sheet-flex-down { - flex-flow: column nowrap; -} - -.sheet-section { - padding: 5px; - min-height: 90%; -} +\*------------------------------------------------*/ /* --------- Text ------------- */ @@ -52,9 +30,10 @@ input[type="number"] { } textarea { - width: 85%; - height: 70%; background-color: transparent; + width: 89%; + height: 70%; + margin-right: 15px; } input[type="checkbox"].sheet-checkbox { @@ -62,6 +41,12 @@ input[type="checkbox"].sheet-checkbox { border-radius: 0px; } +textarea:focus, +input[type="text"]:focus, +input[type="number"]:focus{ + background-color: #F6CED8; +} + /* -----Hides up/down buttons on numberfields that don't need them ---*/ input[type=number].sheet-ref::-webkit-inner-spin-button, @@ -76,78 +61,88 @@ input[type=number].sheet-txtfield { -moz-appearance: textfield; } -/* Buttons */ +/* ------- Buttons ---------- */ -button[type="roll"]{ +button[type="roll"]:not(.sheet-small){ color: black; height: 30px; width: 30px; margin-left: 15px; } -button[type="roll"]::before{ +button[type="roll"]:not(.sheet-small)::before{ font-size: 1.4em; } -/*------------------------------------*\ +/*-----------------------------------------------------------------*\ #SECTIONS -\*------------------------------------*/ +\*-----------------------------------------------------------------*/ + +/* --------- General Section Styling ------------- */ +.sheet-flex-center { + display: flex; + align-items: center; +} + +.sheet-flex-middle { + display: flex; + justify-content: center; +} + +.sheet-flex-down { + flex-flow: column nowrap; +} + +.sheet-section { + padding: 5px; + min-height: 90%; +} + + +/* ----- Character Sheet Structure ------- + +'.sheet-main' defines the sheet's general structure and dimensions using CSS Grid. + +It uses 'Grid template areas' to name each sheet section, +so that they can be positioned in the grid easily, + while also providing a human-readable overview. */ div.sheet-main { display: grid; + grid-template-columns: 3.5fr 3.5fr; + grid-template-rows: 2fr 0.6fr 2.3fr 0.7fr 3fr 0.7fr 1fr 2fr; + grid-template-areas:"logo name" + "logo bio" + "stats bio" + "stats gold" + "stats load" + "stats skilled" + "resistance order-skills" + "resistance order-skills"; grid-gap: 6px; - grid-template-columns: 2.5fr 1fr 3.5fr; - grid-template-rows: 2fr 1fr 2fr 1fr 3fr 1fr 1fr 2fr; - grid-template-areas:"logo logo name" - "logo logo bio" - "stats stats bio" - "stats stats gold" - "stats stats load" - "stats stats skilled" - "resistance resistance order-skills" - "resistance resistance order-skills"; - width: 650px; - height: 900px; - background-image: url(https://i.imgur.com/qKceron.jpg); - background-size: 650px 900px; + width: 650px; /* Defines the width and height of the sheet */ + height: 900px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLborder.jpg?raw=true); + background-size: 650px 900px; /* Sets the sheet border image to same size as sheet */ background-repeat: no-repeat; } +/* Section-specific CSS is written in a way that removes the need to define classes +on each individual */ + /* LOGO SECTION */ div.sheet-logo{ grid-area: logo; - background-image: url(https://i.imgur.com/N8oNFQ9.jpg); + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLlogo.jpg?raw=true); background-size: 295px 180px; background-repeat: no-repeat; margin-left: 20px; - margin-top: 20px; + margin-top: 15px; } -/* NAME SECTION */ -div.sheet-name{ - grid-area: name; - padding-top: 35px; -} - -div.sheet-name div.sheet-section-small{ - background-image: url(https://i.imgur.com/ia9MOUx.jpg); - background-size: contain; - background-repeat: no-repeat; - height: 50px; - width: 290px; -} - -div.sheet-name label{ - width: 50px; - padding-left: 15px; -} - -div.sheet-name input{ - width: 180px; -} /* STATS SECTION */ @@ -156,8 +151,24 @@ div.sheet-stats{ margin-left: 15px; } +div.sheet-stats div:first-child{ + display: flex; + align-items: start; + height: 25px; +} + +div.sheet-stats div:first-child button{ + width: 110px; + margin-left: 0px; +} + +div.sheet-stats div:first-child span{ + padding: 0px 0px 5px 5px; +} + + div.sheet-stats div.sheet-stat-block{ - background-image: url(https://i.imgur.com/i0fqhxv.jpg); + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLstatblock.jpg?raw=true); background-repeat: no-repeat; background-size: contain; height: 65px; @@ -184,12 +195,14 @@ div.sheet-stats span{ padding-left: 10px; } + + /* RESITANCE SECTION */ div.sheet-resistance{ grid-area: resistance; - background-image: url(https://i.imgur.com/SlEHxEm.jpg); - background-size: 290px 170px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true); + background-size: 290px 190px; background-repeat: no-repeat; margin-left: 20px; margin-bottom: 20px; @@ -221,27 +234,59 @@ div.sheet-resistance hr { width: 110px; } + + +/* NAME SECTION */ + +div.sheet-name{ + grid-area: name; + padding-top: 35px; +} + +div.sheet-name div.sheet-section-small{ + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true); + background-size: contain; + background-repeat: no-repeat; + height: 50px; + width: 290px; +} + +div.sheet-name label{ + width: 50px; + padding-left: 15px; +} + +div.sheet-name input{ + width: 180px; +} + + + /* BIO SECTION */ div.sheet-bio{ grid-area: bio; - background-image: url(https://i.imgur.com/SlEHxEm.jpg); - background-size: 290px 195px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true); + background-size: 290px 210px; background-repeat: no-repeat; padding-right: 25px; } div.sheet-bio label{ width:60px; - margin-top: 0px; + margin-top: 3px; +} + +div.sheet-bio textarea{ + height: 80%; } /* GOLD SECTION */ div.sheet-gold{ grid-area: gold; - background-image: url(https://i.imgur.com/ia9MOUx.jpg); - background-size: 290px 60px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true); + background-size: 290px 50px; background-repeat: no-repeat; padding-bottom: 20px; } @@ -255,27 +300,47 @@ div.sheet-gold input[type=number]{ width: 120px; } + + /* LOAD SECTION */ div.sheet-load{ grid-area: load; - background-image: url(https://i.imgur.com/SlEHxEm.jpg); - background-size: 290px 195px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true); + background-size: 290px 210px; background-repeat: no-repeat; padding-right: 25px; } div.sheet-load label{ width:60px; - margin-top: 0px; + margin-top: 3px; +} + +div.sheet-load input[type="text"]:first-child{ + width: 150px; +} + +div.sheet-load input[type="text"].sheet-small{ + width: 50px; +} + +div.sheet-load textarea{ + margin:3px 15px 0px 0px; + height: 75%; +} + +div.sheet-load button.sheet-small{ + color: black; } /* SKILLED SECTION */ div.sheet-skilled{ grid-area: skilled; - background-image: url(https://i.imgur.com/ia9MOUx.jpg); - background-size: 290px 60px; + align-items: start; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock1.jpg?raw=true); + background-size: 290px 50px; background-repeat: no-repeat; padding-bottom: 25px; } @@ -283,18 +348,22 @@ div.sheet-skilled{ div.sheet-skilled label{ width: 90px; padding-left: 10px; + margin-top: 10px; } div.sheet-skilled input{ width: 160px; + margin-top: 5px; } + + /* ORDER SKILL SECTION */ div.sheet-order-skills{ grid-area: order-skills; - background-image: url(https://i.imgur.com/SlEHxEm.jpg); - background-size: 290px 185px; + background-image: url(https://github.com/Roll20/roll20-character-sheets/blob/master/Feast_of_Legends/images/FoLblock3.jpg?raw=true); + background-size: 290px 190px; background-repeat: no-repeat; padding-right: 25px; } diff --git a/Feast_of_Legends/feast_of_legends.html b/Feast_of_Legends/feast_of_legends.html index 856d85f0ab..aca3da8dbd 100644 --- a/Feast_of_Legends/feast_of_legends.html +++ b/Feast_of_Legends/feast_of_legends.html @@ -17,10 +17,16 @@ +