Nighthawk/roll20-character-sheets
1
0
Fork 0
mirror of https://github.com/Nighthawk42/roll20-character-sheets.git synced 2026-08-30 03:40:32 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
roll20-character-sheets/Fallout-Vaults-and-Deathclaws/Fallout-VnV.css
T
Osvel Cabrera 3888c13fb3 Style Reorganization
2024-05-18 15:45:22 -04:00

930 lines
20 KiB
CSS
Raw Permalink Blame History

/*-----background-----*/
.charsheet {
background-color: #000000;
background-size: 100%;
border: solid 5px gray;
}
/*-----tabs-----*/
input.sheet-tab1:not(:checked) ~ .sheet-tab1,
input.sheet-tab2:not(:checked) ~ .sheet-tab2,
input.sheet-tab3:not(:checked) ~ .sheet-tab3,
input.sheet-tab4:not(:checked) ~ .sheet-tab4, {
display: none;
}
input.sheet-tab {
width: calc(25% - 5px);
height: 20px;
outline: none !important;
position: relative;
cursor: pointer;
z-index: 1;
}
input.sheet-tab1 {
margin-left: 1px;
}
input.sheet-tab::before {
content: attr(title);
display: inline-block;
color: #F1C11E;
background: #000000;
border: solid 1px #F1C11E;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-size: 14px;
font-weight: bold;
text-align: center;
width: 100%;
height: 20px;
}
input.sheet-tab:checked::before {
color: #000000;
background: #F1C11E;
}
.sheet-tab-br {
margin-bottom: 2px;
margin-top: 2px;
}
/*-----headers-----*/
h4 {
color: #F1C11E;
font-weight: bold;
padding: 2;
font-size: 12px;
text-align: right;
background: #000000;
margin: 2px;
display: inline-block;
}
h3 {
color: #F1C11E;
font-weight: bold;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.sheet-entry-secondary {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 135px;
background-color: #000000;
}
.sheet-entry-health-long {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 90px;
background-color: #000000;
}
.sheet-entry-perk-level {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 110px;
background-color: #000000;
}
.sheet-entry-ft {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 30px;
background-color: #000000;
}
.sheet-entry-health-short {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 65px;
background-color: #000000;
}
.sheet-entry-long {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 50px;
background-color: #000000;
}
.sheet-entry-total {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 5%;
background-color: #000000;
}
.sheet-entry-vp {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 10px;
background-color: #000000;
}
.sheet-entry-vp-count {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 2px;
background-color: #000000;
}
.sheet-entry-primary {
color: #F1C11E;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 380px;
background-color: #000000;
}
.sheet-entry-ac {
color: #ADD8E6;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-normal {
color: #BEBEBE;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-laser {
color: #E3242B;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-fire {
color: #DD571C;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-plasma {
color: #028E5F;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-explosion {
color: #FBE106;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-dr {
color: #808080;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
.sheet-entry-rr {
color: #32CD32;
font-weight: bold;
text-align: center;
border: 1px solid #000000;
border-radius: 5px;
width: 8%;
background-color: #000000;
}
/*-----sheet select-----*/
.sheet-select {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 12%;
height: 100%;
margin-top: 5px;
}
.sheet-select-fatigue {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 25%;
height: 100%;
}
.sheet-select-skill {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 18%;
height: 100%;
margin-top: 5px;
}
.sheet-select-perk {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 30%;
height: 100%;
margin-top: 5px;
}
.sheet-select-damage-type {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 12%;
height: 100%;
margin-top: 5px;
}
.sheet-select-cw {
color: #F1C11E;
font-weight: bold;
font-size: 0.9em;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
width: 60%;
height: 100%;
margin-top: 5px;
}
/*-----section borders-----*/
.sheet-center {
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
color: #F1C11E;
font-weight: bold;
text-align: center;
background: #000000;
border: 1px solid #F1C11E;
border-radius: 5px;
padding: 5px;
}
/*--------------Big Checkbox--------------*/
/* ----Hide actual sheet-arrow checkbox---- */
input.sheet-bigcheck[type="checkbox"], input.sheet-toggle-show[type="checkbox"] {
opacity: 0;
width: 16px;
height: 16px;
position: relative;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
z-index: 1;
}
/* ----Fake sheet-arrow checkbox---- */
input.sheet-bigcheck[type="checkbox"] + span::before, input.sheet-toggle-show[type="checkbox"] + span::before {
margin-right: 4px;
border: solid 1px #F1C11E;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 2px #000000;
-webkit-box-shadow: 0 0 2px #000000;
box-shadow: 0 0 2px #000000;
background: #F1C11E;
background: -moz-radial-gradient(#000000, #F1C11E);
background: -webkit-radial-gradient(#000000, #F1C11E);
background: -ms-radial-gradient(#000000, #F1C11E);
background: -o-radial-gradient(#000000, #F1C11E);
background: radial-gradient(#000000, #F1C11E);
}
input.sheet-bigcheck[type="checkbox"] + span::before, input.sheet-toggle-show[type="checkbox"] + span::before {
content:"";
width: 14px;
height: 14px;
font-size: 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
input.sheet-bigcheck[type="checkbox"]:checked + span::before, input.sheet-toggle-show[type="checkbox"]:checked + span::before {
color: red;
content: "✓";
border-color: red;
background: #0000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
/*-----sheet information-----*/
.sheet-text-long{
height: 20px;
width: 80%;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border-radius: 5px;
border-color: #000000;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-text-medium{
height: 20px;
width: 60%;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border-radius: 5px;
border-color: #000000;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-text-short{
height: 20px;
width: 25%;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border-radius: 5px;
border-color: #000000;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-text-armor-name-1{
height: 20px;
width: 90%;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border-radius: 5px;
border-color: #000000;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-text-armor-name-2{
height: 20px;
width: 44.5%;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border-radius: 5px;
border-color: #000000;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number {
height: 20px;
width: 5%;
color: #000000;
font-weight: bold;
text-align: center;
background: #F1C11E;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-damage {
height: 20px;
width: 12%;
color: #000000;
font-weight: bold;
text-align: center;
background: #F1C11E;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-weapon-name {
height: 20px;
width: 30%;
color: #000000;
font-weight: bold;
text-align: center;
background: #F1C11E;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-rad {
height: 20px;
width: 5%;
color: #000000;
font-weight: bold;
text-align: center;
background: #32cd32;
border: 1px solid #000000;
border-radius: 5px;
}
.sheet-number-ac {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #ADD8E6;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-normal {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #BEBEBE;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-laser {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #E3242B;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-fire {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #DD571C;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-plasma {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #028E5F;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-explosion {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #FBE106;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-dr {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #808080;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.sheet-number-rr {
height: 20px;
width: 1%;
color: #000000;
font-weight: bold;
text-align: center;
background: #32CD32;
border: 1px solid #000000;
border-radius: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
/*-----placeholder textarea-----*/
.sheet-text_name {
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border: 1px solid #000000;
border-radius: 5px;
width: 75%;
}
/*-----textarea-----*/
textarea, .content{
height: 70px;
color: #000000;
font-weight: bold;
text-align: left;
background: #F1C11E;
border: 1px solid #000000;
border-radius: 5px;
width: 96%;
margin-top: 5px;
}
/*----Sheet Buttons----*/
.sheet-special_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
padding: 10px 10px 10px 10px;
width: 60px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-skill_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
padding: 10px 10px 10px 10px;
width: 170px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-sequence_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
width: 50px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-damage_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
padding: 10px 10px 10px 10px;
width: 30px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-burst_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
padding: 10px 10px 10px 10px;
width: 80px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-damage-result_button {
background: #F1C11E;
border-radius: 10px;
border-color: #000000;
color: #000000;
width: 80px;
font-weight: bold;
background: -moz-radial-gradient(#F1C11E, #000000);
background: -webkit-radial-gradient(#F1C11E, #000000);
background: -ms-radial-gradient(#F1C11E, #000000);
background: -o-radial-gradient(#F1C11E, #000000);
background: radial-gradient(#F1C11E, #000000);
}
.sheet-special_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
.sheet-skill_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
.sheet-sequence_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
.sheet-damage_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
.sheet-burst_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
.sheet-damage-result_button:hover {
background: red;
border-color: #000000;
background: -moz-radial-gradient(red, #000000);
background: -webkit-radial-gradient(red, #000000);
background: -ms-radial-gradient(red, #000000);
background: -o-radial-gradient(red, #000000);
background: radial-gradient(red, #000000);
}
/*----Collapsible----*/
.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body {
display: none;
}
/*----Special Roll Templates---*/
/* Smaller margins - remove these if you want the huge default left margin */
.sheet-rolltemplate-custom .sheet-container {
border: 5px solid gray;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
background-color: #F1C11E;
font-weight: bold;
text-align: left;
color: #000000;
padding: 5px;
}
.sheet-rolltemplate-custom .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-custom .sheet-subtitle {
font-size:.9em;
}
/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
display: grid;
background: #000000;
/* Header formatting - modify the column layout below */
grid-template-columns: auto auto;
/* Line height to match default roll template */
line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
font-weight: bold;
padding-right: 5px;
text-align: right;
background: #000000;
color: #F1C11E;
}
/* Right column */
.sheet-rolltemplate-custom .sheet-value {
padding-right: 5px;
text-align: left;
background: #000000;
color: #F1C11E;
}
.sheet-rolltemplate-custom .inlinerollresult {
background: #000000;
border-color: #000000;
}
/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: left;
background: #000000;
color: #F1C11E;
}
/*----removing spinner on numbers----*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
Reference in New Issue View Git Blame Copy Permalink