Files
roll20-character-sheets-tester/Totality_of_Ygg/totality_of_ygg.css
T

1082 lines
23 KiB
CSS

/*----------- Tabs Setup -------------*/
.charsheet {
background-color: #fffbfb;
font-family: Futura, Copse, Arial, sans-serif;
font-size:12px;
color: black;
}
/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-section"] {
display: none;
}
.charsheet .repcontrol {
margin-top:15px;
width: 175px;
}
.charsheet button[type="roll"] {
color: red;
font-weight:bold;
}
/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-section-stats,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-combat,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-gear,
{
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
display: block;
}
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: white;
color: black;
font-weight: bold;
border-radius: 4px;
border: 1px solid #83B583;
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -101px;/*originally 91px*/
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
background: #83B583;
color: white;
border-radius: 4px;
}
/*----------- End Tab Setup -----------*/
.charsheet h3 {text-decoration: underline; padding-bottom:5px; color:black;}
.charsheet h4 {text-decoration: underline; padding-bottom:5px; color:black;}
/*-----cols and rows-----*/
.sheet-green {
background-color: #91ae7e;
}
.sheet-brown {
background-color: #a9ae7e;
}
.sheet-blue {
background-color: #7e9ad0;
}
.sheet-black {
background-color: #000000;
}
.sheet-white {
background-color: #FFFFFF;
}
.sheet-center {
text-align: center;
}
.sheet-center label {
text-align: center;
}
.charsheet .sheet-my1colrow {
}
.charsheet .sheet-my1colrow .sheet-col {
width: calc(100% - 5px);
padding: 5px;
}
.charsheet .sheet-my2colrow {
}
.charsheet .sheet-my2colrow .sheet-col {
width: calc(48% - 10px) !important;
padding: 5px;
}
.charsheet .sheet-my3colrow {
}
.charsheet .sheet-my3colrow .sheet-col {
width: calc(30% - 10px) !important;
padding: 5px;
color: black;
}
.charsheet .mysheet-row {
margin-top:15px;
}
/* character sheets */
.charsheet .sheet-my1colrow .sheet-sellsword,
.charsheet .sheet-my1colrow .sheet-knave,
.charsheet .sheet-my1colrow .sheet-philosopher,
.charsheet .sheet-my1colrow .sheet-mystic,
.charsheet .sheet-my1colrow .sheet-murk,
.charsheet .sheet-my1colrow .sheet-spriggan,
.charsheet .sheet-my1colrow .sheet-night_child,
.charsheet .sheet-my1colrow .sheet-pooka
{
margin-left: -20px;
max-width: 100%;
background-color: #f0dbb3;
}
.charsheet .sheet-my1colrow .sheet-sellsword .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-knave .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-philosopher .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-mystic .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-murk .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-spriggan .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-night_child .sheet-3colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-pooka .sheet-3colrow .sheet-col
{
color: #000000;
text-align: left;
width: calc(30% - 10px) !important;
padding: 5px;
}
.charsheet .sheet-my1colrow .sheet-sellsword .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-knave .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-philosopher .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-mystic .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-murk .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-spriggan .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-night_child .sheet-my2colrow .sheet-col,
.charsheet .sheet-my1colrow .sheet-pooka .sheet-my2colrow .sheet-col
{
width: calc(48% - 10px) !important;
padding: 5px;
}
.sheet-box {
border: 1px solid black;
padding: 7px;
margin-bottom: 15px;
min-height:66px;
}
.sheet-halfbox {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 7px;
margin-bottom: 15px;
}
/*----------- End cols -----------*/
.charsheet .sheet-inventory {
min-height: 300px;
max-width: 800px;
background-color: #f7f3f3;
margin-left: 5px;
}
.charsheet .sheet-weaponTable {
width: 100%;
margin-top:45px;
}
.charsheet .sheet-weaponTable th {
text-align:center;
}
.charsheet .sheet-weaponTable td {
text-align: center;
}
.charsheet .sheet-specialTable {
width: 50%;
}
.charsheet .sheet-specialTable input {
width: 35px;
text-align:center;
}
.charsheet .sheet-specialTable th {
text-align:center;
text-decoration: underline;
}
.charsheet .sheet-specialTable td {
padding: 5px;
text-align: center;
}
.charsheet .sheet-attributeTable td {
padding: 5px;
}
.charsheet .sheet-attributeTitle {
font-weight: bold;
}
div.sheet-circle {
width:3em;
height:3em;
border:2px solid gray;
border-radius:50%;
background:white;
}
.charsheet .sheet-subrow {
padding: 10px;
}
.charsheet .sheet-grayheader {
text-align: center;
background-color: lightgray;
min-height: 30px;
}
.ui-dialog .charsheet input[type=number] {
width: 4.5em;
}
.sheet-traitdie {
width: 45px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
margin: 0px;
}
.sheet-weaponselect {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
margin: 0px;
width:100px;
}
.sheet-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-align: center;
margin: 0px;
max-width: 190px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.charsheet label {
margin:0px;
color: black;
padding:5px;
}
/*this hides the contents of each tab by default*/
.charsheet div[class="sheet-my1colrow sheet-sellsword"],
.charsheet div[class="sheet-my1colrow sheet-knave"],
.charsheet div[class="sheet-my1colrow sheet-philosopher"],
.charsheet div[class="sheet-my1colrow sheet-mystic"],
.charsheet div[class="sheet-my1colrow sheet-murk"],
.charsheet div[class="sheet-my1colrow sheet-spriggan"],
.charsheet div[class="sheet-my1colrow sheet-night_child"],
.charsheet div[class="sheet-my1colrow sheet-pooka"]
{
display: none !important;
background-color: #FFFFFF;
}
.sheet-isSellsword:checked ~ .sheet-sellsword {
display: block !important;
}
.sheet-isKnave:checked ~ .sheet-knave {
display: block !important;
}
.sheet-isPhilosopher:checked ~ .sheet-philosopher {
display: block !important;
}
.sheet-isMystic:checked ~ .sheet-mystic {
display: block !important;
}
.sheet-isMurk:checked ~ .sheet-murk {
display: block !important;
}
.sheet-isSpriggan:checked ~ .sheet-spriggan {
display: block !important;
}
.sheet-isNightChild:checked ~ .sheet-night_child {
display: block !important;
}
.sheet-isPooka:checked ~ .sheet-pooka {
display: block !important;
}
/* I can't figure out how to do class selectors for roll templates */
/* Apparently it'll strip [class="foo"] from the start */
/* so it's just a lot of copy/paste. shitty! */
/* ROLL FIGHT */
.sheet-rolltemplate-toy-fight {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-fight {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-fight {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-fight .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-fight .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-fight .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-toy-fight .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-toy-fight .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-toy-fight .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-toy-fight .sheet-content {
display: grid;
background: #FFF;
/* 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-toy-fight .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-toy-fight .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: center;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-toy-other .sheet-content :nth-child(4n+3),
*[class^="sheet-rolltemplate-toy-"] .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-toy-fight .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-fight .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-fight .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
.sheet-rolltemplate-toy-fight .sheet-damage-crit {
grid-column: span 2;
padding: 5px;
text-align: center;
border: 1px solid green;
font-weight: bold;
}
.sheet-rolltemplate-toy-fight .sheet-damage-fumble {
grid-column: span 2;
padding: 5px;
text-align: center;
border: 1px solid red;
font-weight: bold;
}
/* ROLL TWENTY */
.sheet-rolltemplate-toy-rolltwenty {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-rolltwenty {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-rolltwenty {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-rolltwenty .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-toy-rolltwenty .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-toy-rolltwenty .sheet-content {
display: grid;
background: #FFF;
/* 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-toy-rolltwenty .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-toy-rolltwenty .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: center;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-toy-rolltwenty .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-toy-rolltwenty .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-toy-rolltwenty .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-rolltwenty .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
/* ROLL SUCCEED */
.sheet-rolltemplate-toy-rollsucceed {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-rollsucceed {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-rollsucceed {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-rollsucceed .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-toy-rollsucceed .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-toy-rollsucceed .sheet-content {
display: grid;
background: #FFF;
/* 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-toy-rollsucceed .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-toy-rollsucceed .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: center;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-toy-rollsucceed .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-toy-rollsucceed .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-toy-rollsucceed .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
.sheet-rolltemplate-toy-rollsucceed .sheet-roll {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/* BASIC */
/* ROLL FIGHT */
.sheet-rolltemplate-toy-basic {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-basic {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-basic {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-basic .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-basic .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-basic .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-toy-basic .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-toy-basic .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-toy-basic .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-toy-basic .sheet-content {
display: grid;
background: #FFF;
/* 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-toy-basic .sheet-content > div {
padding: 5px;
}
/* Left column */
.sheet-rolltemplate-toy-basic .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: center;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-toy-basic .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-toy-basic .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-toy-basic .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-basic .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-basic .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
/* USAGE DIE */
/* ROLL FIGHT */
.sheet-rolltemplate-toy-rollud {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-rollud {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-rollud {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-rollud .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-rollud .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-rollud .sheet-subtitle {
font-size:.9em;
}
/* example colors */
.sheet-rolltemplate-toy-rollud .sheet-container {
/* this is the default color */
--header-bg-color: rgba(112,32,130,1);
--header-text-color: #FFF;
}
.sheet-rolltemplate-toy-rollud .sheet-container.sheet-color-red {
--header-bg-color: #F00;
}
.sheet-rolltemplate-toy-rollud .sheet-container.sheet-color-green {
--header-bg-color: #0F0;
--header-text-color: #000;
}
/* Allprops part */
.sheet-rolltemplate-toy-rollud .sheet-content {
display: grid;
background: #FFF;
/* 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-toy-rollud .sheet-content > div {
padding: 5px;
}
.sheet-rolltemplate-toy-rollud .sheet-roll {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/* Left column */
.sheet-rolltemplate-toy-rollud .sheet-content .sheet-key {
font-weight: bold;
padding-right: 10px;
text-align: center;
}
/* Make even-numbered rows grey */
.sheet-rolltemplate-toy-rollud .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-toy-rollud .sheet-content :nth-child(4n) {
background:#EEE;
}
/* Description field */
.sheet-rolltemplate-toy-rollud .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-rollud .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-rollud .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
/* ROLL DEATH */
.sheet-rolltemplate-toy-death {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-death {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-death {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-death .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-death .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-death .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-death .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
/* ROLL KNOWLEDGE */
.sheet-rolltemplate-toy-knowledge {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-knowledge {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-knowledge {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-knowledge .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-knowledge .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
/* ROLL FIGHT */
.sheet-rolltemplate-toy-fight {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-fight {
margin-left: -7px;
}
.sheet-rt-wrapper .sheet-rolltemplate-toy-fight {
border: 5px solid;
/* by default, the border is the same color as the header. You can change this here, e.g. to black */
border-color: red;
}
/* Header formatting - title and subtitle */
.sheet-rolltemplate-toy-fight .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
/* Roll Skill */
/* The Cascading Part */
.sheet-rolltemplate-toy-skill .sheet-desc {
grid-column: span 2;
padding: 5px;
text-align: center;
}
.sheet-rolltemplate-toy-skill {
margin-left: -37px;
}
.withoutavatars .sheet-rolltemplate-toy-skill {
margin-left: -7px;
}
.sheet-rolltemplate-toy-skill .sheet-header {
background-color: #424141;
text-align: center;
font-weight:bold;
color: white;
padding: 5px;
}
.sheet-rolltemplate-toy-skill .sheet-title {
font-size:1.1em;
}
.sheet-rolltemplate-toy-skill .sheet-subtitle {
font-size:.9em;
}
.sheet-rolltemplate-toy-skill .sheet-content {
display: grid;
background: #FFF;
grid-template-columns: auto auto;
line-height:1.4em;
}
.sheet-rolltemplate-toy-skill .sheet-content > div {
padding: 5px;
}
.sheet-rolltemplate-toy-skill .sheet-failure {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: red !important;
}
.sheet-rolltemplate-toy-skill .sheet-success {
grid-column: span 2;
padding: 5px;
text-align: center;
color: white;
background-color: green !important;
}
/* Tooltip container */
.sheet-tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.sheet-tooltip .sheet-tooltiptext {
visibility: hidden;
width: 240px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.sheet-tooltip:hover .sheet-tooltiptext {
visibility: visible;
}
/* end The Cascading Part */