diff --git a/Organic Towns/OrganicTowns.css b/Organic Towns/OrganicTowns.css new file mode 100644 index 0000000000..5d1ab8404d --- /dev/null +++ b/Organic Towns/OrganicTowns.css @@ -0,0 +1,572 @@ +.charsheet { + border: 2px solid Black; + width: 820px; + min-width: 820px; + min-height: 1080px; + font-family: "Courier New, serif"; +} +.sheet-attribArray { + display: inline-block; + vertical-align: top; + margin: 0px 0px 0px 0px; + padding: 1px 2px 1px 2px; + border: 0px solid Brown; +} + +.charsheet label.sheet-building { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + width: 100px; + height: 22px; + font-size: 15px; + font-weight: 700; + text-align: left; + margin: 0px 0px 0px 10px; + padding: 4px 0px 1px 0px; + border-bottom: 2px solid Black; +} +/* Building input */ +input[type="text"].sheet-building { + display: inline-block; + vertical-align: top; + box-sizing: border-box; + width: 22px; + height: 22px !important; + margin: 0px 0px 0px 2px; + padding: 8px 0px 1px 0px; + font-weight: 500; + text-align: center; + border: 0; + border-radius: 0; + border-bottom: 2px solid Black; + background-color: transparent; +} +/* Square displayed statistics */ +input[type="text"].sheet-square { + display: inline-block; + vertical-align: top; + width: 70px; + height: 62px; + font-size: 22px; + margin: 6px 0px 0px 0px; + font-weight: 500; + text-align: center; + border: 0; + padding: 0; + background-color: transparent; +} +/* Descriptions for Building on tab3 */ +input[type="text"].sheet-desc { + display: inline-block; + vertical-align: top; + width: 402px; + height: 20px; + font-size: 16px; + font-weight: 400; + text-align: left; + margin: 2px 0px 0px 0px; + color: Black; + border: 0; + border-radius: 0; + border-bottom: 2px solid DimGray; + padding: 0px 2px 0px 6px; + background-color: transparent; +} +/* Text input for Guildhall & Unique Buildings (ghub) */ + +input[type="text"].sheet-ghub { + display: inline-block; + vertical-align: top; + width: 194px; + height: 20px; + font-size: 18px; + font-weight: 550; + text-align: center; + margin: 2px 0px 0px 0px; + color: Black; + border: 0; + border-radius: 0; + border-bottom: 1px solid DimGray; + padding: 0px 2px 0px 2px; + background-color: transparent; +} +/* From the internet https://codepen.io/AllThingsSmitty/pen/WjZVjo */ + +.round { + top: 2px; + position: relative; + display: inline-block; + vertical-align: top; + width: 24px; + height: 18px; + border-bottom: 2px solid Black; +} + +.round label { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 50%; + cursor: pointer; + height: 14px; + left: 4px; + position: absolute; + top: 0; + width: 14px; + padding: 0; + margin: 0px 0px 0px 2px; +} + +.round input[type="checkbox"] { + visibility: hidden; +} + +.round input[type="checkbox"]:checked + label { + background-color: Black; /* Green: 66bb6a */ + border-color: #Black; +} + +.round input[type="checkbox"]:checked + label:after { + opacity: 1; +} + + +/* Radio Buttons */ + +/* Hide actual dot/checkbox */ +input[type="radio"], +input[type="checkbox"] { + position: absolute; + opacity: 0; + width: 15px; + cursor: pointer; + z-index: 1; + margin-top: 6px; +} +input[type="text"].sheet-building { + display: inline-block; + vertical-align: top; + width: 22px; + height: 18px; + margin: 0px 0px 0px 2px; + font-weight: 500; + text-align: center; + border: 0; + border-radius: 0; + border-bottom: 2px solid Black; + background-color: transparent; +} +/* Styles common to fake dot and checkbox */ +input[type="radio"] + span::before, +input[type="checkbox"] + span::before { + border: solid 1px #a8a8a8; + line-height: 14px; + text-align: middle; + display: inline-block; + vertical-align: middle; + -moz-box-shadow: 0 0 2px #ccc; + -webkit-box-shadow: 0 0 2px #ccc; + box-shadow: 0 0 2px #ccc; + background: #f6f6f6; + background: -moz-radial-gradient(#f6f6f6, #dfdfdf); + background: -webkit-radial-gradient(#f6f6f6, #dfdfdf); + background: -ms-radial-gradient(#f6f6f6, #dfdfdf); + background: -o-radial-gradient(#f6f6f6, #dfdfdf); + background: radial-gradient(#f6f6f6, #dfdfdf); +} + +/* Styles unique to fake checkbox (unchecked) */ + +input[type="radio"].sheet-rndused + span::before { + content: "✖"; + width: 10px; + height: 10px; + font-size: 10px; + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + border-radius: 50%; + border: 1px solid Black; + padding: 1px 0px 1px 2px; + margin: 0px 5px 0px 4px; +} + +/* Remove dot from all radios _after_ selected one */ +input[type="radio"]:not(.sheet-tab):checked ~ input[type="radio"] + span::before { + content: ""; +} + + +input[type="radio"].sheet-zero + span::before { + font-size: 6px; + width: 6px; + height: 6px; + content: "✖"; + opacity: 0.25; +} +input[type="radio"].sheet-zero { + font-size: 6px; + width: 6px; + height: 6px; + content: "✖"; + opacity: 0.25; +} +input[type="radio"].sheet-zero:checked + span::before { + opacity: 0; +} + +input[type="radio"].sheet-zero:hover + span::before { + opacity: 1; +} + +.charsheet input[type="text"]{ + display: inline-block; + color: Black; +} +.charsheet textarea{ + display: inline-block; + color: Black; + margin: 2px 2px 2px 2px; + border: 4px double LightGray; + font-size: 18px; + line-height: 22px; + resize: none; + box-sizing: border-box; + height: 380px; + width: 400px; +} + +.charsheet .sheet-skill{ + display: inline-block; + vertical-align: top; + font-family: "Barlow Condensed"; + font-weight: 500; + font-size: 16px; + width: 137px; + height: 26px; + text-align: left; + color: Black; + background-color: White; + margin: 0px 0px 0px 0px; + padding: 4px 0px 0px 0px; +} + +.charsheet .sheet-note{ + display: inline-block; + vertical-align: top; + width: 766px; + height: 23px; + margin: 0px 0px 0px 14px; + font-size: 16px; + font-weight: 500; + text-align: left; + border: 0; + padding: 2px 2px 0px 2px; + border-radius: 0; + border-bottom: 2px solid DimGray; + background-color: transparent; +} + +.charsheet .sheet-bc{ + width: 216px; + margin: 1px 0px 0px 2px; +} +.charsheet .sheet-spc{ + width: 68px; + margin: 1px 20px 0px 10px; + text-align: center; +} +.charsheet .sheet-cn{ + width: 118px; + margin: 1px 0px 0px 8px; +} +.charsheet .sheet-event{ + width: 770px; + height: 25px; + margin: 0px 0px 0px 8px; + font-size: 16px; + font-weight: 400; + text-align: left; + border: 0; + border-radius: 0; + border-bottom: 2px solid DimGray; + background-color: transparent; +} +.charsheet button{ + text-align: left; + color: black; +} +.charsheet button:hover{ + background: black; + color: #968c6a; + text-shadow: none; +} + +/* Buttons Styling */ +.charsheet button[type=action].sheet-skillName, +.charsheet button[type=roll].sheet-skillName { + display: inline-block; + vertical-align: top; + box-sizing: content-box; + background-color: Black; + width: 200px; + height: 36px; + color: White; + font-family: "Barlow Condensed"; + font-weight: 500; + font-size: 36px; + margin: 0px 0px 0px 0px; + text-align: right; + padding: 0px 0px 0px 0px; + border: 6px solid Black; +} + +.charsheet button[type=action].sheet-textButton, +.charsheet button[type=roll].sheet-textButton { + width: 72px; + font-size: 13px; + font-weight: 600; + text-align: center; + margin: 0px 0px 4px 12px; + padding: 0; + border: 0px solid Green; + background-color: transparent; + color: Black; + } + +.charsheet button[type=roll].sheet-textButton::before, +.charsheet button[type=action].sheet-textButton::before { + content: "" !important; +} +.charsheet button[type=roll].sheet-skillName::before, +.charsheet button[type=action].sheet-skillName::before { + padding: 0px 0px 0px 0px; + content: "" ; +} + +.charsheet label.sheet-textButton:hover, +.charsheet label.sheet-skillName:hover { + background-color: rgba(255,255,0,0.3)!important; +} +/*End Button Styling*/ + + +/* Roll Template - Just in case...*/ + +/* Check, Melee, Initiative Templates */ +.sheet-rolltemplate-check .sheet-container { + color: Black; + background-color: #ffffff; + border: 1px solid; + padding: 2px; + width: 189px; +} +.sheet-rolltemplate-melee .sheet-container { + background-color: rgb(153, 0, 0); /* Dark Red */ + color: rgb(255, 179, 179); /* Light Red */ + border: 3px solid rgb(255, 179, 179); + padding: 2px; + width: 189px; +} + +.sheet-rolltemplate-initiative .sheet-container { + background-color: Thistle; + color: Blue; + border: 3px solid Blue; + padding: 2px; + width: 189px; +} + +.sheet-rolltemplate-check .sheet-container h1, +.sheet-rolltemplate-melee .sheet-container h1, +.sheet-rolltemplate-initiative .sheet-container h1{ + color: inherit; + font-size: 1.2em; + font-variant: small-caps; + line-height: 20px; +} + +.sheet-rolltemplate-melee div, +.sheet-rolltemplate-initiative div, +.sheet-rolltemplate-check div { + padding: 2px; +} + +.sheet-rolltemplate-check span, +.sheet-rolltemplate-melee span, +.sheet-rolltemplate-initiative span { + color: currentColor; + font-family: "Times New Roman", Times, serif; + font-size: 1.2em; + font-variant: small-caps; + line-height: 1.4em; + padding-left: 5px; + text-align: left; +} + +.sheet-rolltemplate-check .sheet-subheader, +.sheet-rolltemplate-melee .sheet-subheader, +.sheet-rolltemplate-initiative .sheet-subheader { + color: currentColor; + font-size: 1em; + font-style: italic; +} + +.sheet-rolltemplate-check .sheet-arrow-right, +.sheet-rolltemplate-melee .sheet-arrow-right, +.sheet-rolltemplate-initiative .sheet-arrow-right { + border-bottom: 3px solid transparent; + border-left: 180px solid currentColor; + border-top: 3px solid transparent; +} + +.sheet-rolltemplate-melee .sheet-tcat, +.sheet-rolltemplate-initiative .sheet-tcat, +.sheet-rolltemplate-check .sheet-tcat { + font-style: italic; +} + + +.sheet-rolltemplate-check .inlinerollresult { + /*background-color: #ffffff;*/ + background-color: LightGray !important; + border: none; +} +.sheet-rolltemplate-initiative .inlinerollresult, +.sheet-rolltemplate-melee .inlinerollresult { + color: Red; + background-color: Yellow; + border: none; +} + +.sheet-rolltemplate-check .inlinerollresult.fullcrit { + color: #3FB315; + border: none; +} + +.sheet-rolltemplate-check .inlinerollresult.fullfail { + color: #B31515; + border: none; +} + +.sheet-rolltemplate-check .inlinerollresult.importandivoll { + color: #4A57ED; + border: none; +} +/* End Check, Ranged & Manifest templates*/ + +/* Tabs */ +div.sheet-tab-content +{ + font-family:'Cabin'; + color: black; + border: 1px solid #a8a8a8; + border-top-color: #000; + margin: 2px 0 0 0px; + padding: 3px; +} +input[type="radio"].sheet-tab { + margin-top: 0px; + padding-top: 6px; + height: 20px; +} + +div.sheet-tab-content { display: none; } + +input.sheet-tab1:checked ~ div.sheet-tab1, +input.sheet-tab2:checked ~ div.sheet-tab2, +input.sheet-tab3:checked ~ div.sheet-tab3 +{ + display: block; +} + + +.sheet-tabSpan{ + font-family:'Cabin'; + color: black; +} + +input.sheet-tab +{ + width: 100px; + height: 20px; + position: relative; + cursor: pointer; + z-index: 1; + opacity: 0; + font-family:'Cabin'; + color: black; + box-sizing: border-box; +} + +input.sheet-tab + span::before +{ + content:attr(title); + + + border: solid 1px #a8a8a8; + border-bottom-color: black; + text-align: center; + display: inline-block; + + background: #fff; + background: -moz-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: -webkit-linear-gradient(to top, #D3D3D3 8, #fff, #D3D3D3 ); + background: -ms-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: -o-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + + width: 100px; + height: 20px; + font-size: 18px; + margin-top: 2px; + padding-top: 4px; + position: absolute; + top: 70px; + left: 30px; +} + +input.sheet-tab:checked + span::before +{ + background: #dcdcdc; + background: -moz-linear-gradient(to top, #D3D3D3 , #dcdcdc, #D3D3D3 ); + background: -webkit-linear-gradient(to top, #D3D3D3 , #dcdcdc, #D3D3D3 ); + background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); + background: -o-linear-gradient(to top, #D3D3D3 , #dcdcdc, #D3D3D3 ); + background: linear-gradient(to top, #D3D3D3 , #dcdcdc, #D3D3D3 ); + border-bottom-color: #fff; +} + +input.sheet-tab:not(:first-child) + span::before +{ + border-left: none; +} + + +input.sheet-tab2 + span::before +{ + left: 131px; + + background: #fff; + background: -moz-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: -webkit-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: -ms-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: -o-linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); + background: linear-gradient(to top, #D3D3D3 , #fff, #D3D3D3 ); +} + +input.sheet-tab3 + span::before +{ + left: 231px; + +} + +.charsheet .sheet-tab1 { + +} + +.charsheet .sheet-tab2 { + +} +.charsheet .sheet-tab3 { + +} \ No newline at end of file diff --git a/Organic Towns/OrganicTowns.html b/Organic Towns/OrganicTowns.html new file mode 100644 index 0000000000..74e8539876 --- /dev/null +++ b/Organic Towns/OrganicTowns.html @@ -0,0 +1,1729 @@ + + + + + + +