diff --git a/CRARG/CRARG.css b/CRARG/CRARG.css new file mode 100644 index 0000000000..016117af89 --- /dev/null +++ b/CRARG/CRARG.css @@ -0,0 +1,272 @@ +@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap"); + +.charsheet div.sheet-page1 { + opacity: 1.0; + border: 2px solid Black; + width: 820px; + min-width: 820px; + min-height: 1140px; + font-family: "Libre Caslon Text, serif"; +} +.charsheet div.sheet-page2 { + opacity: 1.0; + border: 2px solid Black; + width: 820px; + min-width: 820px; + min-height: 860px; + font-family: "Libre Caslon Text, serif"; +} + +/* General Styles */ + +.charsheet .advancement{ + display: inline-block; + vertical-align: top; + margin: 0px 0px 0px 22px; + padding: 2px;" +} +.charsheet .sheet-profileLabel{ + display: inline-block; + vertical-align: top; + box-sizing: border-box; + font-family: "Libre Caslon Text"; + font-weight: 500; + font-size: 20px; + width: 80px; + height: 30px; + text-align: left; + color: Black; + background-color: transparent; + border: 2px solid transparent; + margin: 4px 0px 0px 0px; + padding: 8px 0px 0px 0px;" +} +/* +.charsheet .sheet-profileLabel:hover{ + background-color: rgba(255,255,0,0.5); +} +*/ +.charsheet .sheet-profileInput{ + display: inline-block; + vertical-align: bottom; + box-sizing: content-box; + width: 250px; + height: 22px ; + font-family: "Barlow Condensed"; + font-weight: 500; + font-size: 22px; + background-color: transparent; + margin: 0px 0px 0px -2px; + text-align: left; + padding: 1px; + border: 0; + border-radius: 0; + border-bottom: 2px solid DimGray; +} + +.charsheet input[type="text"]{ + display: inline-block; + color: Black; +} + +.charsheet button{ + text-align: left; + color: black; +} +.charsheet button:hover{ + background: LightGray; + color: #968c6a; + text-shadow: none; +} +/* Radiobox Scott/Dana CSS Wizardry */ +.radiocontainer{ + /* style the layout and whatnot of the radio container as you need to */ + display: flex; + gap: 0.5rem; +} +.radiobox{ + /* appearance none allows us to style radios and checkboxes as if they were divs */ + appearance: none; + /* Style the radio as you want for it's unchecked state */ + border-radius: 50%; + border: 1px solid black; + width: 10px; + height: 10px; + display: block; +} +/* If the radiobox is checked, or if it has a checked radiobox after it, style it as if it was checked */ +.radiobox:checked, +.radiobox:has(~ .radiobox:checked){ + /* Style the check state as you want */ + background-color: black; +} + +/* 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: 66px; + height: 26px; + color: White; + font-family: "Barlow Condensed"; + font-weight: 500; + font-size: 30px; + margin: 4px 0px 0px 0px; + text-align: right; + padding: 0px 0px 0px 0px; + border: 2px solid Red; +} +.charsheet button[type=action].sheet-textButton, +.charsheet button[type=roll].sheet-textButton { + background-color: transparent; + color: black; + border: none; + height: 18px; + width: 136px; + font-size: 1.8em; + font-weight: bold; + text-align: left; + } + +.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 button.sheet-skillName:hover { + background-color: rgba(255,255,0,0.3)!important; +} + +/*End Button Styling*/ + + +/* Roll Template */ +/* Check & Initiative Templates */ +.sheet-rolltemplate-check .sheet-container { + color: Black; + background-color: #ffffff; + border: 1px solid; + 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-initiative .sheet-container h1{ + color: inherit; + font-size: 1.2em; + font-variant: small-caps; + line-height: 20px; +} + +.sheet-rolltemplate-initiative div, +.sheet-rolltemplate-check div { + padding: 2px; +} + +.sheet-rolltemplate-check 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-initiative .sheet-subheader { + color: currentColor; + font-size: 1em; + font-style: italic; +} + +.sheet-rolltemplate-check .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-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 { + 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 templates*/ + +/* TAB HANDLING */ + +.charsheet input[type=radio].sheet-page1, +.charsheet input[type=radio].sheet-page2{ + display: none; + float: left; +} +.charsheet input[type=radio].sheet-page1 + label, +.charsheet input[type=radio].sheet-page2 + label{ + content: ''; + border: solid 1px black; + background: white; + color: black; + font-weight: bold; + width: auto; + text-align: center; + padding: 0 2px; + float: left; +} +.charsheet input[type=radio]:hover + label{ + background: #990000; +} +.charsheet input[type=radio]:checked + label{ + background: black; + color: white; +} +.charsheet div.sheet-page1, .charsheet div.sheet-page2 { + display: none; +} +.charsheet input.sheet-page1:checked ~ div.sheet-page1, .charsheet input.sheet-page2:checked ~ div.sheet-page2 { + display: block; +} diff --git a/CRARG/CRARG.html b/CRARG/CRARG.html new file mode 100644 index 0000000000..23cf3d32c0 --- /dev/null +++ b/CRARG/CRARG.html @@ -0,0 +1,1267 @@ + + + + + + + +