mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
SteveKoontzandSteveKoontz
2df7aae184
* torchbearer 2e bugfixes * updates and bugfixes to Torchbearer 2e sheet * adding in Over Arms character sheet, initial commit Co-authored-by: SteveKoontz <steve@roll20.net>
429 lines
8.3 KiB
CSS
429 lines
8.3 KiB
CSS
.sheet-container {
|
|
width: 832px;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-sepia {
|
|
height: 1050px;
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: -1;
|
|
background: url("https://i.imgur.com/7FGLBZw.jpg");
|
|
background-size: 100% 100%;
|
|
filter: sepia(100%) brightness(120%);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.sheet-logo {
|
|
background: url("https://i.imgur.com/ZmcT0OY.png");
|
|
background-size: 100% 100%;
|
|
height: 155px;
|
|
width: 400px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Dosis|Roboto|Work+Sans:900&display=swap");
|
|
|
|
/* General Styling */
|
|
|
|
.sheet-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-column {
|
|
padding-top: 25px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sheet-left-column {
|
|
width: 450px;
|
|
}
|
|
|
|
.sheet-right-column {
|
|
width: 378px;
|
|
}
|
|
|
|
/* Tab Styling */
|
|
|
|
input[type="radio"].sheet-tab {
|
|
opacity: 0;
|
|
position: absolute;
|
|
z-index: 2;
|
|
height: 20px;
|
|
}
|
|
|
|
input[type="radio"].sheet-tab + span {
|
|
position: absolute;
|
|
border: 1px solid black;
|
|
border-radius: 5px;
|
|
background-color: #e8e8e8;
|
|
color: black;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="radio"].sheet-tab:checked + span {
|
|
color: #ffffff;
|
|
background-color: #2a2d80;
|
|
}
|
|
|
|
input[type="radio"].sheet-tab.sheet-editing,
|
|
input[type="radio"].sheet-tab.sheet-editing + span {
|
|
top: 0px;
|
|
left: 81px;
|
|
width: 75px;
|
|
}
|
|
|
|
input[type="radio"].sheet-tab.sheet-playing,
|
|
input[type="radio"].sheet-tab.sheet-playing + span {
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 75px;
|
|
}
|
|
|
|
/* Edit Mode Styling */
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column input,
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column select,
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column textarea {
|
|
background-color: rgb(255, 255, 0, 0.2);
|
|
}
|
|
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-column input:not(.sheet-toggle):not(.sheet-always-active),
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-column select:not(.sheet-always-active),
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-column textarea:not(.sheet-always-active) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-column .repcontrol,
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column input[type="radio"]:not(.sheet-balance),
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-edit,
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-play,
|
|
input[type="radio"].sheet-playing:checked ~ .sheet-column .sheet-edit,
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column .sheet-play {
|
|
display: none;
|
|
}
|
|
|
|
/* RIGHT COLUMN STYLING */
|
|
.sheet-info-container {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: calc(100% + 3px);
|
|
background: white;
|
|
background-clip: padding-box !important;
|
|
border-radius: 25px 0px 0px 25px;
|
|
border: solid 3px transparent !important;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.sheet-info-container:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
z-index: -1;
|
|
margin: -3px !important;
|
|
border-radius: inherit;
|
|
background: linear-gradient(to right, gold, transparent);
|
|
}
|
|
|
|
.sheet-info-container .sheet-edit,
|
|
.sheet-info-container .sheet-play {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-info-container.sheet-large_spacing {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sheet-blue-label {
|
|
color: darkblue;
|
|
vertical-align: middle;
|
|
font-size: 20px;
|
|
margin-left: 15px;
|
|
font-family: "Dosis";
|
|
}
|
|
|
|
.sheet-handwritten {
|
|
font-family: "Architects Daughter";
|
|
vertical-align: middle;
|
|
font-size: 20px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.sheet-gold {
|
|
display: block;
|
|
border-bottom: 2px solid gold;
|
|
width: calc(100% - 15px);
|
|
margin-left: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.sheet-gold .sheet-blue-label {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.sheet-gold:first-of-type {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.sheet-super-bold {
|
|
font-weight: 900;
|
|
font-size: 20px;
|
|
font-family: "Work Sans";
|
|
color: gold;
|
|
vertical-align: bottom;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-info .sheet-edit,
|
|
.sheet-info .sheet-play {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-info .sheet-play,
|
|
.sheet-info input
|
|
{
|
|
margin-left: 15px;
|
|
}
|
|
|
|
textarea {
|
|
width: calc(100% - 30px);
|
|
resize: vertical;
|
|
height: 250px;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.sheet-character-name input {
|
|
width: 200px;
|
|
}
|
|
|
|
.sheet-anima-type select {
|
|
margin: 0px;
|
|
}
|
|
|
|
/* LEFT COLUMN STYLING */
|
|
|
|
.sheet-star-five {
|
|
margin: 50px 0;
|
|
position: relative;
|
|
display: block;
|
|
color: gold;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-right: 100px solid transparent;
|
|
border-bottom: 70px solid gold;
|
|
border-left: 100px solid transparent;
|
|
transform: rotate(35deg);
|
|
opacity: 0.9;
|
|
}
|
|
.sheet-star-five:before {
|
|
border-bottom: 80px solid gold;
|
|
border-left: 30px solid transparent;
|
|
border-right: 30px solid transparent;
|
|
position: absolute;
|
|
height: 0;
|
|
width: 0;
|
|
top: -45px;
|
|
left: -65px;
|
|
display: block;
|
|
content: '';
|
|
transform: rotate(-35deg);
|
|
}
|
|
.sheet-star-five:after {
|
|
position: absolute;
|
|
display: block;
|
|
color: gold;
|
|
top: 3px;
|
|
left: -105px;
|
|
width: 0px;
|
|
height: 0px;
|
|
border-right: 100px solid transparent;
|
|
border-bottom: 70px solid gold;
|
|
border-left: 100px solid transparent;
|
|
transform: rotate(-70deg);
|
|
content: '';
|
|
}
|
|
|
|
/* .sheet-star-outline > .sheet-star-five,
|
|
.sheet-star-outline > .sheet-star-five:before,
|
|
.sheet-star-outline > .sheet-star-five:after {
|
|
border-bottom-color: black;
|
|
} */
|
|
|
|
.sheet-star-outline {
|
|
position: absolute;
|
|
transform: scale(1.3) rotate(3deg);
|
|
top: 70px;
|
|
left: 120px;
|
|
}
|
|
|
|
.sheet-attribute-text {
|
|
font-size: 18px;
|
|
font-family: "Work Sans";
|
|
font-weight: 900;
|
|
color: white;
|
|
text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.sheet-attribute-container {
|
|
width: 70px;
|
|
position: absolute;
|
|
}
|
|
|
|
.sheet-attribute-container .sheet-edit select {
|
|
width: 52px;
|
|
}
|
|
|
|
input[type="radio"].sheet-editing:checked ~ .sheet-column .sheet-attribute-container select {
|
|
background-color: rgb(255, 255, 0, 0.8);
|
|
}
|
|
|
|
.sheet-star {
|
|
position: relative;
|
|
height: 300px;
|
|
}
|
|
|
|
.sheet-hp,
|
|
.sheet-ap
|
|
{
|
|
top: 10px;
|
|
left: 205px;
|
|
}
|
|
|
|
.sheet-int,
|
|
.sheet-rng
|
|
{
|
|
top: 107px;
|
|
left: 355px;
|
|
}
|
|
|
|
.sheet-str,
|
|
.sheet-pwr
|
|
{
|
|
top: 273px;
|
|
left: 288px;
|
|
}
|
|
|
|
.sheet-cha,
|
|
.sheet-def
|
|
{
|
|
top: 264px;
|
|
left: 95px;
|
|
}
|
|
|
|
.sheet-spd,
|
|
.sheet-dex
|
|
{
|
|
top: 93px;
|
|
left: 46px;
|
|
}
|
|
|
|
.sheet-top-star {
|
|
z-index: 2;
|
|
}
|
|
|
|
button[type="roll"] {
|
|
background: none;
|
|
border: none;
|
|
padding: 0px;
|
|
font-size: inherit;
|
|
margin: 0px;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
button[type="roll"]::before {
|
|
content: "" !important;
|
|
}
|
|
|
|
.sheet-junction-container {
|
|
border-radius: 0px 25px 25px 0px;
|
|
margin-top: 25px;
|
|
margin-left: -5px;
|
|
width: 400px;
|
|
text-align: right;
|
|
}
|
|
|
|
.sheet-junction-container:before {
|
|
background: linear-gradient(to right, transparent, gold);
|
|
}
|
|
|
|
.sheet-junction-container .sheet-blue-label {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.sheet-junction-container select {
|
|
width: 60px;
|
|
}
|
|
|
|
.sheet-junction-container button[type="roll"]::before {
|
|
content: "t" !important;
|
|
font-size: 30px;
|
|
color: darkblue;
|
|
}
|
|
|
|
/* ROLL TEMPLATE STYLING */
|
|
|
|
.sheet-rolltemplate-container {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: calc(100% + 8px);
|
|
background: white;
|
|
background-clip: padding-box !important;
|
|
border-radius: 25px 0px 0px 25px;
|
|
border: solid 3px transparent !important;
|
|
position: relative;
|
|
margin-bottom: 10px;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
/* z-index: 1; */
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.sheet-rolltemplate-container:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
/* z-index: 0; */
|
|
margin: -3px !important;
|
|
border-radius: inherit;
|
|
background: linear-gradient(to right, gold, transparent);
|
|
transform: translateZ(-1px);
|
|
}
|
|
|
|
.sheet-rolltemplate-container .sheet-attribute-text {
|
|
font-size: 18px;
|
|
font-family: "Work Sans";
|
|
font-weight: 900;
|
|
color: white;
|
|
text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
|
|
-webkit-font-smoothing: antialiased;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.sheet-rolltemplate-container .sheet-handwritten {
|
|
font-family: "Architects Daughter";
|
|
font-size: 17px;
|
|
display: block;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.sheet-rolltemplate-container .sheet-result {
|
|
font-family: "Architects Daughter";
|
|
display: inline-block;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.sheet-rolltemplate-container .sheet-result .inlinerollresult {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.sheet-rolltemplate-container .sheet-small-star {
|
|
color: gold;
|
|
margin-left: 5px;
|
|
} |