Skip to content

Instantly share code, notes, and snippets.

@plexsoup
Created June 27, 2016 05:34
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save plexsoup/2e739a4bc36feb9b64fbcb73509cfa20 to your computer and use it in GitHub Desktop.
Save plexsoup/2e739a4bc36feb9b64fbcb73509cfa20 to your computer and use it in GitHub Desktop.
/* === GENERAL === */
.charsheet {
min-width: 800px;
}
.sheet-header {
margin-bottom: 4px;
padding: 2px 4px;
background: black;
color: white;
font-weight: bold;
}
.sheet-section {
float: left;
width: 100%;
margin: 4px 0;
padding: 1px;
box-sizing: border-box;
}
.sheet-half {
max-width: 50%;
}
.sheet-half-left {
max-width: 60.5%;
}
.sheet-half-right {
max-width: 39.5%;
}
.sheet-break {
clear: both;
}
label,
select {
margin: 0;
}
textarea {
margin: 0;
width: 100%;
height: auto;
resize: vertical;
box-sizing: border-box;
}
.sheet-repitem,
.repitem {
margin-bottom: 2px;
}
/* Override Roll20 Button styling for something less conspicious */
button {
height: 22px;
line-height: 16px;
margin: 0 !important;
border-radius: 0 !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
.repitem button {
height: 28px;
line-height: 20px;
}
/* === BASIC === */
.sheet-logo {
width: 200px;
margin: 0 5px;
float: left;
}
.sheet-section-basic tr {
margin-left: 5px;
}
.sheet-section-basic td {
padding: 2px;
}
.sheet-section-basic input[type="number"] {
width: 100px;
}
.sheet-section-basic .sheet-column {
width: calc(50% - 200px);
}
/* === SKILLS === */
.sheet-section-skills {
min-width: 400px;
}
.sheet-section-skills input {
width: 58px;
}
.sheet-section-skills td:first-child {
text-align: right;
font-weight: bold;
padding: 0 4px;
}
.sheet-skill-on {
border: 1px solid black;
}
.sheet-skill-off {
background-color: #E3E3E3;
border: 1px solid gray;
}
/* === ASPECT === */
.sheet-section-aspects input {
width: 100%;
}
/* === STRESS === */
.sheet-section-stress td {
text-align: left;
padding-right: 5px;
}
.sheet-section-stress input {
margin-left: 2px;
}
.sheet-check-on {
border: 1px solid black;
}
.sheet-check-off {
background-color: #E3E3E3;
border: 1px solid gray;
}
/* === CONSEQUENCES === */
.sheet-section-consequences {
float: right;
}
.sheet-section-consequences select {
width: 100px;
float: left;
}
.sheet-section-consequences input {
margin-left: 2px;
width: calc(100% - 102px);
}
/* === Additional Stress === */
.charsheet .attr_add-stress, .charsheet .attr_add-stress-skill {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
width: 5em;
height: 14px;
line-height: 14px;
display: inline-block;
}
/* === Additional Stress and stress hack === */
.charsheet .attr_stunt-name, .charsheet .attr_extras-name {
color: #222;
font-weight: bolder;
width: 100%;
}
.charsheet .sheet-section-stress td, .charsheet .attr_extras-name td {
display: inline-block;
}
.sheet-stress-small {
font-size: 11px;
}
/* === Change default Skill box width === */
.sheet-section-skills input {
width: 116px;
}
.sheet-description-long {
width: 50%;
}
.sheet-section-attacks .sheet-description-short,
.sheet-section-defenses .sheet-description-short {
width: 33%;
}
.sheet-section-attacks .sheet-value-tiny,
.sheet-section-defenses .sheet-value-tiny {
width: 4em;
}
.sheet-stress-descr {
width: 4.5em;
}
.sheet-nbsb td {
text-align: right;
font-size: 10px;
vertical-align: middle;
}
.sheet-nbsb input {
text-align: left;
width: 3em;
}
.sheet-nbsb input[type=number] {
width: 3em;
}
.sheet-fullwidth {
width: 99%;
}
/* === Roll type displaying === */
button.sheet-roll_type_1,
button.sheet-roll_type_2 {
display: none;
}
input.sheet-roll_method_1:checked ~ div table button.sheet-roll_type_1,
input.sheet-roll_method_2:checked ~ div table button.sheet-roll_type_2 {
display: inline-block !important;
}
input.sheet-roll_method_1, input.sheet-roll_method_2 {
background-color: #3f3f3f;
width: 12px;
text-align: right;
display: inline;
padding-left: 6em;
}
.sheet-section-skills {
text-align: center;
}
/* === some fixing === */
.sheet-header {
text-align: left;
}
td, .sheet-fullwidth {
white-space: nowrap;
}
.charsheet input.sheet-sktab_1, .charsheet input.sheet-sktab_2 {
background-color: #3f3f3f;
width: 12px;
text-align: right;
display: inline;
padding-left: 6em;
}
div.sheet-break-10 {
clear: both;
height: 10px;
}
.sheet-rank {
width: 124px;
background-color: #Fefefe;
font-size: .9em;
font-weight: bolder;
padding: 1px;
font-family: sans-serif;
border: 0;
}
input.sheet-skill-dyn {
width: 113px;
}
/* === SKILL TABS === */
div.sheet-sktab-content { display: none; }
input.sheet-sktab_1:checked ~ div.sheet-sktab_2,
input.sheet-sktab_2:checked ~ div.sheet-sktab_1
{
display: block; !important;
}
/* === stunts and extra tabs === */
div.sheet-tab-content {
display: none;
}
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2
{
display: block;
}
.charsheet input.sheet-tab1 {
left: 86px;
cursor: pointer;
}
.charsheet input.sheet-tab2 {
left: 286px;
cursor: pointer;
}
.charsheet input.sheet-tab1 + span::before, .charsheet input.sheet-tab2 + span::before {
content: attr(title);
display: inline-block;
width: 150px;
color: #111;
padding-left: 10px;
}
input.sheet-tab + span::before {
left: 139px;
}
.charsheet input.sheet-tab2 + span::before {
left: 680px;
}
input.sheet-tab:not(:first-child) + span::before
{
border-left: none;
}
sheet-pos {
z-index:initial;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment