diff --git a/Symbaroum/README.md b/Symbaroum/README.md new file mode 100644 index 0000000000..6aef46b365 --- /dev/null +++ b/Symbaroum/README.md @@ -0,0 +1,3 @@ +# Roll20 character sheet for Symbaroum + + diff --git a/Symbaroum/symbaroum.css b/Symbaroum/symbaroum.css index 13915f5a07..7d97468c31 100644 --- a/Symbaroum/symbaroum.css +++ b/Symbaroum/symbaroum.css @@ -1,394 +1,346 @@ +/*** Background ***/ - .charsheet .sheet-col>div{ - padding-bottom:1em; - } - .charsheet .sheet-row>div{ +.sheet-row >div{ display:inline-block; } - -.charsheet { - background-color:#000303 ; - background-image:url("http://images.geeknative.com.s3.amazonaws.com/wp-content/uploads/2014/07/01-Symbaroum-cover-image.jpg"); - background-repeat: no-repeat; - background-size: 850px; - background-position: 0 20px; - background-origin: ; - background-clip: ; - text-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101, - 1px 1px 12px #000101, -1px -1px 12px #000101,1px -1px 12px #000101, -1px 1px 12px #000101; - color: #FAFAFA; +.sheet-row { + padding:0 30px 10px 30px; } -.charsheet * { - box-sizing: border-box; - font-family: "Georgia"; -} -/* Roll Templates*/ - -.charsheet .sheet-rolltemplate-defense, -.charsheet .sheet-rolltemplate-attack{ +.sheet-2colrow >.sheet-col{ + margin:10px !important; } +/*** Pages ***/ +div[class^="sheet-section"] { + visibility: hidden; + opacity: 0; + max-height:0; + overflow: hidden; +} +input.sheet-tab99:checked ~ div[class^="sheet-section"] { + max-height: 999998px; + opacity: 1; + transition: opacity 0.25s linear 0s; + overflow: auto; + +} +input.sheet-tab { + width: 175px; + height: 23px; + cursor: pointer; + position: relative; + opacity: 0; + z-index: 9999; + vertical-align:top; +} +span.sheet-tab { + text-align: center; + display: inline-block; + padding-left, padding-right: 3px; + width: 175px; + height: 23px; + cursor: pointer; + position: relative; + margin-left: -184px; + margin-top: 0px; + color: #FAFAFA; + border-radius: 5px 5px 0px 0px; + font-size: 12px; + box-shadow: 2px 2px 5px #FAFAFA inset,-2px -2px 5px #202020 inset; + vertical-align:top; + background-color: #303030; +} +input.sheet-tab::before { + display: inline-block; + margin-top:-30px; + content: attr(title); + text-align: center; + width: 100%; + height: 100%; +} +input.sheet-tab:checked::before { + background: #4E686A; + color:blue; +} +/* Next section makes a page visible when the tab is clicked */ +input.sheet-tab1:checked ~ div.sheet-section-pc1, +input.sheet-tab2:checked ~ div.sheet-section-pc2, +input.sheet-tab3:checked ~ div.sheet-section-pc3, +input.sheet-tab4:checked ~ div.sheet-section-pc4{ + max-height: 999999px; + max-width:850px; + visibility: visible; + min-height:850px; + opacity: 1; + transition: opacity .25s linear 0s; + overflow: hidden; + border-radius: 0 0 5px 5px; +} +input.sheet-tab1:checked + span.sheet-tab1, +input.sheet-tab2:checked + span.sheet-tab2, +input.sheet-tab3:checked + span.sheet-tab3, +input.sheet-tab4:checked + span.sheet-tab4{ + box-shadow: -2px -2px 5px #FAFAFA inset, 2px 2px 5px #202020 inset; + opacity: 1; +} -.sheet-rolltemplate-attack table, -.sheet-rolltemplate-defense table { +/*** Input ***/ +.sheet-number-circle::-webkit-inner-spin-button, +.sheet-number-circle::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0; +} +label { + margin: 0; + padding:0; + text-align: left; + font-size: 1em; + font-weight: normal; + color: #D8D8D8 ; +} +select { + -webkit-appearance: none; + -moz-appearance: none; + width:auto; + height:2em; + display: inline-block; + text-overflow: ''; + background: #FBFCFC; + border-radius:6px; + border: 3px solid #004040; + padding:0; + margin: 0; + text-align: center; + line-height:1em; +} +select > option { + text-align:center; +} +input[type=radio]{ + margin:0 5px 0 5px; +} +input[type="number"].sheet-number-circle{ + -moz-appearance: none; + text-indent: 0.01px; + text-overflow: ''; + font-size:1.25em; + border: 3px solid #004040; + padding:0 .5em 0 .5em; + width:2.33em; + height:2.33em; + text-align: center; + vertical-align:center; + border-radius:3em; + color: #000000; + background: #FBFCFC; +} +input[type="number"].sheet-number-box-small{ + border: 3px solid #004040; + padding:0 0 0 3px; + display: inline; + width:3.1em; + height:2em; + text-align: left; + vertical-align:middle; + border-radius:6px; +} +input[type="number"]:disabled{ + background: #aaaaaa; +} +input[type="text"]{ + height:2em; + border: 3px solid #004040; + text-align: left; + background: #FBFCFC; + border-radius:6px; + font-size: 13px; + font-style:bold; + width:195px; +} +input[type="checkbox"] { + border: 3px solid #004040; + color: #000000; + background: #FBFCFC; + border-radius:6px; + font-size: 12px; + box-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101; +} +textarea { + padding:3px; + box-sizing: border-box; + margin:0; + resize: vertical; + overflow:hidden; + display: block; + text-align: left; + border: 3px solid #004040; + color: #000000; + background: #FBFCFC; + border-radius:6px; + height:6.3em; + width:100% +} +input[name^="attr_friend"] { + width:48%; +} +.sheet-table fieldset, +.sheet-table { + display:table; + text-align:center; +} +.sheet-table >fieldset, +.sheet-table >div{ + display:table-row; + width:75px; +} +.sheet-table fieldset >div, +.sheet-table >div >div { + display:table-cell; + vertical-align:bottom; +} +.sheet-table label { + text-align:center; +} +/*** Buttons ***/ +button { + +} +[class="btn repcontrol_edit"]{ +} + +/*** Roll Templates ***/ +.sheet-rolltemplate-defense, +.sheet-rolltemplate-attack{ +} +.sheet-rolltemplate-attack table{ font-family: "Georgia"; - background-color: #a0a0a0; - width: 180px; - border: 3px solid #004040; + background-color: #a0a0a0; + width: 180px; + border: 3px solid white; +} +.sheet-rolltemplate-attack th { + border-top:3px solid white; + text-align:center; + font-style:bold; +} + + +.sheet-rolltemplate-defense table { + font-family: "Georgia"; + background-color: #a0a0a0; + width: 180px; + border: 3px solid black; +} +.sheet-rolltemplate-defense th{ + border-top:3px solid black; + text-align:center; + font-style:bold; + } .sheet-rolltemplate-defense tr, .sheet-rolltemplate-attack tr { } -.sheet-rolltemplate-defense th, -.sheet-rolltemplate-attack th { - border-top:3px solid #004040; - text-align:center; - font-style:bold; -} .sheet-rolltemplate-defense td, .sheet-rolltemplate-attack td { - padding:.25em; + padding:.25em; } - - -/* TABS HANDLING */ -.charsheet div[class^="sheet-section"] { - visibility: hidden; - opacity: 0; - max-height:0; - overflow: hidden; -} -.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] { - max-height: 999998px; - opacity: 1; - transition: opacity 0.25s linear 0s; - overflow: auto; +.charsheet { + background-color:#000303 ; + background-image:url("http://i.imgur.com/XOomnMY.jpg?1"); + background-repeat: no-repeat; + background-position: 0px 33px; + text-shadow: 1px 1px 2px #000101, -1px -1px 2px #000101,1px -1px 2px #000101, -1px 1px 2px #000101, + 1px 1px 12px #000101, -1px -1px 12px #000101,1px -1px 12px #000101, -1px 1px 12px #000101; + color: #FAFAFA; } -.charsheet input.sheet-tab { - width: 175px; - height: 23px; - cursor: pointer; - position: relative; - opacity: 0; - z-index: 9999; - vertical-align:top; -} -.charsheet span.sheet-tab { - text-align: center; - display: inline-block; - padding-left, padding-right: 3px; - width: 175px; - height: 23px; - cursor: pointer; - position: relative; - margin-left: -184px; - margin-top: 0px; - color: #FAFAFA; - border-radius: 5px 5px 0px 0px; - font-size: 12px; - box-shadow: 2px 2px 5px #FAFAFA inset,-2px -2px 5px #202020 inset; - vertical-align:top; - background-color: #303030; -} -.charsheet input.sheet-tab::before { - display: inline-block; - margin-top:-30px; - content: attr(title); - text-align: center; - width: 100%; - height: 100%; - background: #002020; -} -.charsheet input.sheet-tab:checked::before { - background: #4E686A; - color:blue; -} -.charsheet input.sheet-tab1:checked ~ div.sheet-section-pc1, -.charsheet input.sheet-tab2:checked ~ div.sheet-section-pc2, -.charsheet input.sheet-tab3:checked ~ div.sheet-section-pc3, -.charsheet input.sheet-tab4:checked ~ div.sheet-section-pc4{ - max-height: 999999px; - visibility: visible; - min-height:1058px; - opacity: 1; - transition: opacity .25s linear 0s; - overflow: hidden; - border-radius: 0 0 5px 5px; - margin-bottom: -6px; -} -.charsheet input.sheet-tab1:checked + span.sheet-tab1, -.charsheet input.sheet-tab2:checked + span.sheet-tab2, -.charsheet input.sheet-tab3:checked + span.sheet-tab3, -.charsheet input.sheet-tab4:checked + span.sheet-tab4{ - box-shadow: -2px -2px 5px #FAFAFA inset, 2px 2px 5px #202020 inset; - opacity: 1; -} -/* END TABS HANDLING */ - - - -.charsheet .sheet-table{ - display:table; - width:100%; -}.charsheet .sheet-table > div { - display:table-row; -}.charsheet .sheet-table > div > div { - position:relative; +/*** Misc***/ +[class^="sheet-faded"]{ + background-color:rgba(0,0,0,.3); + display:inline; + border-radius:1em 1em 0 0 ; +} +.sheet-faded-nam { vertical-align:middle; - display:table-cell; -}.charsheet .sheet-table > div > div > input { - width:100%; + width:76px; + padding:4px; } - - - - -.charsheet label { - margin: 0; - padding:0; - text-align: left; - font-size: 1em; - font-weight: normal; - color: #D8D8D8 ; +.sheet-faded-nam >div{ + display:inline-block; + width:32%; } -.charsheet .sheet-label-large { +.sheet-faded-text { + vertical-align:middle; + padding:4px; +} +.sheet-label-row div, +.sheet-label-row label { + display:inline-block; +} +.sheet-label-row div > span{ + margin-right:6px; +} +.sheet-label-large { padding:0; font-size:1.5em; margin:0px 0px .5em 0px; } - -.charsheet select { - width:3em; - height:2em; - display: inline-block; - -webkit-appearance: none; - -moz-appearance: none; - text-overflow: ''; - background: #FBFCFC; - border-radius:6px; - border: 3px solid #004040; - padding: 0 0 0 0; - margin: 0 0 0 0; - text-align: right; - line-height:1em; +.sheet-row-with-labels div{ + display:inline-block; + vertical-align:bottom; +} +.sheet-row-with-labels label{ + text-align:center; +} +.sheet-ability-section { + width:360px; + display:inline-block; + padding:4px 4px 0 4px; } -.charsheet select > option { - text-align:right; +.sheet-attributes{ + display:inline-block; + width:100%; + vertical-align:top; + height:80px; + border-radius:6px; + text-align:center; } -.charsheet input[type=radio]{ - margin:0 5px 0 5px; -} -.charsheet .sheet-number-circle::-webkit-inner-spin-button, -.charsheet .sheet-number-circle::-webkit-outer-spin-button { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - margin: 0; -} -/* -.charsheet .sheet-number-circle-small::-webkit-inner-spin-button, -.charsheet .sheet-number-circle-small::-webkit-outer-spin-button { - margin-left:-1em; - -}*/ -.charsheet input[type="number"].sheet-number-circle{ - font-size:1.25em; - border: 3px solid #004040; - padding:0 .5em 0 .5em; - width:2.33em; - height:2.33em; - text-align: center; - vertical-align:center; - border-radius:3em; - color: #000000; - background: #FBFCFC; - -} - -.charsheet input[type="number"].sheet-number-circle-small{ - font-size:.75em; - border: 3px solid #004040; - padding:0 .5em 0 .5em; - display: inline; - width:4em; - height:2em; - text-align: left; - vertical-align:top; - border-radius:2em; - margin-left:-1.5em; -} - -.charsheet input[type="number"].sheet-number-box-small{ - border: 3px solid #004040; - padding:0 0 0 3px; - display: inline; - width:3.1em; - height:2em; - text-align: left; - vertical-align:top; - border-radius:6px; -} - -.charsheet input[type="number"]:disabled -{ - background: #aaaaaa; -} - -.charsheet .sheet-row { - padding:0 30px 10px 30px; -} - -.charsheet textarea { - padding:2px; - box-sizing: border-box; - margin:0; - resize: vertical; - overflow:hidden; - display: block; - text-align: left; - border: 3px solid #004040; - color: #000000; - background: #FBFCFC; - border-radius:6px; - height:6em; - width:100% -} -.charsheet .sheet-fsheader textarea { - resize: vertical; - height:4em -} - -.charsheet input[type="text"]{ - height:2em; - border: 3px solid #004040; - text-align: left; - background: #FBFCFC; - border-radius:6px; - font-size: 13px; -} - -.charsheet input[type="checkbox"] { - border: 3px solid #004040; - color: #000000; - background: #FBFCFC; - border-radius:6px; - font-size: 12px; -} - - -.charsheet td, .charsheet th{ - font-size: 14px; - font-weight: normal; - color: #f0f0f0; -} - - - -/*BUTTON*/ -.charsheet buttom[type=roll]{ - font-size:1em; -} - -.charsheet .sheet-floater label{ - text-align:center; - margin-bottom: 10px; - -} -.charsheet .sheet-floater span{ - font-size:.75em; - position:relative; - top:-2em; - left:2em; - -} -.charsheet .sheet-attributes{ - /*box-shadow: 1px 1px 5px #FAFAFA inset,-1px -1px 5px #FAFAFA inset, - 1px 1px 3px #004040,-1px -1px 2px #004040,1px -1px 3px #004040,-1px -1px 3px #004040;*/ - text-align:center; - border-radius:6px; - width:100%; -} - -.charsheet .sheet-attributes>div{ +.sheet-attributes >div{ display:inline-block; padding-bottom:5px; - vertical-align:top; - font-size:16px; - width:12%; + font-size:16px; + width:10.5%; } .sheet-attributes label{ - text-align:center; - margin-bottom: 10px; - margin-bottom: -1.5em; + padding:.5em 0 .5em 0; + background:rgba(16,32,48,.4); + width:100%; + text-align:center; + margin-bottom: 10px; + margin-bottom: -2em; + box-shadow: 3px 3px 2px #aaaaaa inset,-3px -3px 1px #103030 inset; + /*box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;*/ } .sheet-attributes span { - font-size:.75em; - position:relative; - top:-2em; - left:2em; + font-size:.75em; + position:relative; + top:-2em; + left:2em; } .sheet-attributes button{ - text-align:center; - overflow: hidden; - margin:0; - width:88%; - height:1.5em; - opacity:0.2; - z-index:9999; + text-align:center; + overflow: hidden; + margin:0; + width:90%; + height:1.5em; + opacity:0; + z-index:9999; } -.charsheet div.sheet-checkbox { - display:table-cell; - display:inline; - margin:0 2px 0 2px; -} -.charsheet .sheet-2rowblock { - display:inline-block; - text-align:left; - -} - -.charsheet .sheet-2rowblock label { - padding-left:0em; - margin:0px 0px 4px 0px; -} - - -.charsheet .sheet-2rowblock div{ - display:inline-block; - width:auto; - height:auto; -} - -.charsheet .sheet-2rowblock * { - vertical-align:bottom; - text-align:left; - width:100%; -} -.charsheet .sheet-2rowblock input{ - width:7.5em; -} - -.charsheet .sheet-title>div { - display:inline-block; - vertical-align:top; - -} -.charsheet .sheet-title>div > label { - padding-left:.5em; - -} -.sheet-ability{ - width:auto; - display:inline-block; -} -.charsheet .sheet-ability div { - display:inline-block; - width:100%; -} -.charsheet .sheet-ability input[type="text"]{ - font-weight:bold; - width:100%; +.charsheet * { + box-sizing: border-box; + font-family: "Georgia"; } diff --git a/Symbaroum/symbaroum.html b/Symbaroum/symbaroum.html index d735011419..94db92eb75 100644 --- a/Symbaroum/symbaroum.html +++ b/Symbaroum/symbaroum.html @@ -1,69 +1,80 @@ +Add custom ability names + Roll Template styles +"Permanent bonus" to attack and defense section +Advantage button - auto calculate +2atk and 1d4dmg + +********************** +--> - + Character - -Abilities | Powers | Rituals - -Equipment - -Background - - - + +Traits | Abilities + +Rituals | Powers + +Equipment +