mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
Marcos Eduardo Crivellaro
f248decd17
Sets the global width classes as "!important" for their properties to be respected for text inputs.
621 lines
14 KiB
CSS
621 lines
14 KiB
CSS
/*** Global HTML Components ***/
|
|
select { margin: 5px; }
|
|
input[type=checkbox] { margin: 0 3px; }
|
|
|
|
input[type=text] {
|
|
border: none;
|
|
border-bottom: 1px solid #2d4c45;
|
|
border-radius: 0;
|
|
background-color: white;
|
|
width: 100%;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
/*** General stuff ***/
|
|
input[type=number].circle-container {
|
|
width: 50px !important;
|
|
height: 50px !important;
|
|
padding: 5px;
|
|
border: 2px solid #9caca4;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
input[type=number].round-container {
|
|
width: 100px !important;
|
|
height: 50px !important;
|
|
padding: 5px;
|
|
border: 2px solid #9caca4;
|
|
border-radius: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
input.sheet-arrow[type="checkbox"] {
|
|
color: #E0E0E0;
|
|
opacity: 0;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: relative;
|
|
top: 17px;
|
|
right: 10px;
|
|
margin: -10px;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
input.sheet-arrow[type="checkbox"] + span::before {
|
|
margin-top: 8px;
|
|
margin-right: 4px;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
float: left;
|
|
width: 14px;
|
|
height: 14px;
|
|
content: "▼";
|
|
color: #E0E0E0;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
input.sheet-arrow[type="checkbox"]:checked + span::before {
|
|
width: 14px;
|
|
height: 14px;
|
|
content: "▼";
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
div.label-button-display { display: inline-flex; }
|
|
|
|
.button-label {
|
|
width: fit-content !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.button-fix { margin: -3px 3px 8px 0 !important; }
|
|
|
|
button.act-roll{
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 2px 3px;
|
|
font-size: 1.3em;
|
|
margin: 0 3px 0 3px;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
background-image: none;
|
|
display: inline-block;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
|
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
|
|
background-repeat: repeat-x;
|
|
border-bottom-color: #bbb;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
cursor: pointer;
|
|
}
|
|
button.act-roll:hover{
|
|
color: #333333;
|
|
text-decoration: none;
|
|
background-color: #e6e6e6;
|
|
background-position: 0 -15px;
|
|
transition: background-position 0.1s linear;
|
|
}
|
|
button.act-roll::before{
|
|
font-family: "dicefontd20";
|
|
content: "t";
|
|
}
|
|
|
|
div.sheet-hidden-content,
|
|
div.sheet-hidden-flex {
|
|
display: none;
|
|
}
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-hidden-content { display: block; }
|
|
|
|
input.sheet-arrow:checked ~ div.sheet-hidden-flex { display: flex; }
|
|
|
|
img.line-img{ margin: auto 0; }
|
|
img.affinity-img{ margin: -4px 0 0 5px; }
|
|
|
|
.column{ padding: 0 5px }
|
|
|
|
.justify-element {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
option.fake-optgroup{
|
|
background:gray;
|
|
font-weight:bold;
|
|
color:white;
|
|
}
|
|
|
|
.charBonds hr{
|
|
margin-top: 5px !important;
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
.charBonds select{
|
|
height: 24px !important;
|
|
max-width: 150px;
|
|
margin: 0 0 3px 10px !important;
|
|
}
|
|
|
|
.charBonds div.tab:first-child select{ margin: 0 10px 3px !important; }
|
|
|
|
.charBonds div.tab:first-child .textarea-wrapper{ padding-right: 10px; }
|
|
|
|
.skill { margin-top: 5px; }
|
|
|
|
.largedialog textarea {
|
|
box-sizing: border-box;
|
|
height: 65px;
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-dialog .charsheet input[type=number] { margin: 2px; }
|
|
|
|
.tab ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: "";
|
|
}
|
|
|
|
.tab li { padding-left: 16px; }
|
|
|
|
.tab li::before {
|
|
content: "✦";
|
|
padding-right: 8px;
|
|
color: #2d4c45;
|
|
}
|
|
|
|
label {
|
|
color: #2d4c45;
|
|
text-align: center;
|
|
}
|
|
|
|
.tabs-title { text-align: center; }
|
|
|
|
.sheet-tab-buttons {
|
|
padding-top: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-img{ width: 155px; }
|
|
|
|
.frame {
|
|
border: 2px solid #9caca4;
|
|
border-radius: 20px;
|
|
padding: 15px;
|
|
margin: 15px 5px 5px;
|
|
height: fit-content;
|
|
}
|
|
.no-frame { padding: 15px; }
|
|
|
|
.toggle-button {
|
|
background-color: white;
|
|
border: 2px solid #9caca4;
|
|
border-radius: 5px;
|
|
}
|
|
.toggle-button:hover {
|
|
border: 2px solid #6c9c74;
|
|
background-color: #dcfcdc;
|
|
}
|
|
|
|
.swap-btn-wpn { margin: 6px 0 3px; }
|
|
.swap-btn-equip { margin: 5px 0 0; }
|
|
.swap-button {
|
|
background-color: white;
|
|
border: 2px solid #CCCCCC;
|
|
border-radius: 5px;
|
|
}
|
|
.swap-button:hover {
|
|
border: 2px solid #BBBBBB;
|
|
background-color: #F9F9F9;
|
|
}
|
|
.swap-btn-armor,
|
|
.swap-btn-shield {
|
|
display: none;
|
|
}
|
|
input[type="hidden"][value="Armor"].swap-toggle ~ button.swap-btn-armor,
|
|
input[type="hidden"][value="Shield"].swap-toggle ~ button.swap-btn-shield {
|
|
display: inline-block;
|
|
}
|
|
|
|
.side-padding {
|
|
margin: 10px;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.half-width {
|
|
width: 50%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.separation-line {
|
|
width: 100%;
|
|
border-bottom: 2px solid #9caca4;
|
|
}
|
|
|
|
.inline-display {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
}
|
|
|
|
/**** Tabs handler ***/
|
|
.charsheet .sheet-character,
|
|
.charsheet .sheet-stats,
|
|
.charsheet .sheet-equipment,
|
|
.charsheet .sheet-backpack,
|
|
.charsheet .sheet-classes,
|
|
.charsheet .sheet-magic,
|
|
.charsheet .sheet-journal,
|
|
.charsheet .sheet-ahf,
|
|
.charsheet .sheet-rolls {
|
|
display: none;
|
|
}
|
|
/* Shows selected tab */
|
|
.charsheet .sheet-tabstoggle[value="character"]~div.sheet-character,
|
|
.charsheet .sheet-tabstoggle[value="stats"]~div.sheet-stats,
|
|
.charsheet .sheet-tabstoggle[value="equipment"]~div.sheet-equipment,
|
|
.charsheet .sheet-tabstoggle[value="backpack"]~div.sheet-backpack,
|
|
.charsheet .sheet-tabstoggle[value="classes"]~div.sheet-classes,
|
|
.charsheet .sheet-tabstoggle[value="magic"]~div.sheet-magic,
|
|
.charsheet .sheet-tabstoggle[value="journal"]~div.sheet-journal,
|
|
.charsheet .sheet-tabstoggle[value="ahf"]~div.sheet-ahf,
|
|
.charsheet .sheet-tabstoggle[value="rolls"]~div.sheet-rolls{
|
|
display: block;
|
|
}
|
|
|
|
/**** Traits and Bonds *****/
|
|
.charTraits {
|
|
margin: 15px 5px 5px;
|
|
display: grid;
|
|
}
|
|
|
|
.charTraits * {
|
|
margin: 5px;
|
|
padding: unset;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.charTraits .name {
|
|
grid-row: row;
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
}
|
|
|
|
.charTraits .identity {
|
|
grid-column-start: 3;
|
|
grid-column-end: 12;
|
|
grid-row: row;
|
|
}
|
|
|
|
.charTraits .theme {
|
|
grid-column-start: 1;
|
|
grid-column-end: 6;
|
|
grid-row: row 2;
|
|
}
|
|
|
|
.charTraits .origin {
|
|
grid-column-start: 6;
|
|
grid-column-end: 12;
|
|
grid-row: row 2;
|
|
}
|
|
|
|
.charBonds .grid {
|
|
margin: 5px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 50%);
|
|
gap: 1px #2d4c45;
|
|
}
|
|
|
|
/**** FABULA POINT *****/
|
|
.charFabula label { grid-area: label; }
|
|
.charFabula .circle-container { grid-area: fabula-points; }
|
|
.charFabula .info-left { grid-area: info-left; }
|
|
.charFabula .info-right { grid-area: info-right; }
|
|
.charFabula .grid {
|
|
margin: 5px;
|
|
display: grid;
|
|
grid-template-areas:
|
|
'fabula-points label label'
|
|
'fabula-points info-left info-right';
|
|
grid-template-columns: 65px 1.2fr 1fr;
|
|
}
|
|
|
|
/**** EXPERIENCE POINT *****/
|
|
.charExperience label { grid-area: label; }
|
|
.charExperience input { grid-area: input; }
|
|
.charExperience div { grid-area: infos; }
|
|
.charExperience .grid {
|
|
margin: 5px;
|
|
display: grid;
|
|
grid-template-areas:
|
|
'input label'
|
|
'input infos';
|
|
grid-template-columns: 65px 1fr;
|
|
}
|
|
|
|
/**** ATTRIBUTES *****/
|
|
.charAttribute { margin: 15px 5px 5px; }
|
|
|
|
.charAttribute .grid {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'grid-dex grid-rage'
|
|
'grid-ins grid-rage'
|
|
'grid-might grid-pois'
|
|
'grid-will grid-pois';
|
|
grid-template-columns: 1fr 0.25fr;
|
|
}
|
|
|
|
.innerGrid {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr;
|
|
}
|
|
|
|
.charAttribute input[type="text"] { width: 65px; }
|
|
|
|
.charAttribute.char-dex {
|
|
margin: 5px 5px 5px !important;
|
|
grid-area: grid-dex
|
|
}
|
|
|
|
.charAttribute.char-ins {
|
|
margin: 5px 5px 5px !important;
|
|
grid-area: grid-ins
|
|
}
|
|
|
|
.charAttribute.char-migth {
|
|
margin: 5px 5px 5px !important;
|
|
grid-area: grid-migth
|
|
}
|
|
|
|
.charAttribute.char-will {
|
|
margin: 5px 5px 5px !important;
|
|
grid-area: grid-will
|
|
}
|
|
|
|
.charAttribute.char-rage {
|
|
grid-area: grid-rage;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.charAttribute.char-pois {
|
|
grid-area: grid-pois;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
select[name="attr_dexterity"],
|
|
select[name="attr_insight"],
|
|
select[name="attr_might"],
|
|
select[name="attr_willpower"] {
|
|
width: 65px;
|
|
}
|
|
|
|
/**** GAUGES *****/
|
|
.magic { max-width: 70%; }
|
|
|
|
.charGauges .grid {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-areas:
|
|
'grid-current-hp grid-add-hp grid-crisis grid-hp'
|
|
'grid-current-mp grid-add-mp empty grid-mp'
|
|
'grid-current-ip grid-add-ip empty grid-ip';
|
|
grid-template-columns: 1.2fr 1.15fr 1.1fr 0.7fr;
|
|
}
|
|
|
|
.grid-hp { grid-area: grid-hp; }
|
|
.grid-add-hp { grid-area: grid-add-hp; }
|
|
.grid-crisis { grid-area: grid-crisis; }
|
|
.grid-current-hp { grid-area: grid-current-hp; }
|
|
|
|
.grid-mp { grid-area: grid-mp; }
|
|
.grid-add-mp { grid-area: grid-add-mp; }
|
|
.grid-current-mp { grid-area: grid-current-mp; }
|
|
|
|
.grid-ip { grid-area: grid-ip; }
|
|
.grid-add-ip { grid-area: grid-add-ip; }
|
|
.grid-current-ip { grid-area: grid-current-ip; }
|
|
|
|
/*** DEFENSES ***/
|
|
.charDefenses .inline-display div { min-width: 15%; }
|
|
.charDefenses .grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.charDefenses .grid > div:nth-child(-n+4) { margin-bottom: 25px; }
|
|
|
|
.charAffinities .grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
margin-top: 15px;
|
|
}
|
|
.charAffinities select { max-width: 115px; }
|
|
.charAffinities select:nth-child(-n+6) { margin-bottom: 15px; }
|
|
|
|
.charStatusImmunities { margin-top: 10px; }
|
|
|
|
/**** EQUIPMENT ***/
|
|
.repeating_weapons.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.spare-equipments-initiative {
|
|
margin: 10px 5px 0 5px;
|
|
width: 220px;
|
|
}
|
|
|
|
.weapon .repcontainer .repitem,
|
|
.spells .repcontainer .repitem {
|
|
display: inline-block;
|
|
width: 50%;
|
|
vertical-align: top;
|
|
}
|
|
.weapon .repcontainer .repitem:nth-child(odd) { padding: 15px 20px 15px 0; }
|
|
.weapon .repcontainer .repitem:nth-child(even) { right: 0; padding: 15px 0 15px 20px; }
|
|
.spells .repcontainer .repitem { padding: 15px; }
|
|
|
|
/*** RITUAL ***/
|
|
.rituals .repcontainer .repitem {
|
|
width: 25%;
|
|
display: inline-block;
|
|
padding: 7px;
|
|
}
|
|
|
|
/*** Rolltemplate ***/
|
|
.sheet-rolltemplate-Attack .sheet-template-nameplate,
|
|
.sheet-rolltemplate-Magic .sheet-template-nameplate,
|
|
.sheet-rolltemplate-Checks .sheet-template-nameplate,
|
|
.sheet-rolltemplate-Generic .sheet-template-nameplate {
|
|
background-color: white;
|
|
border: 2px solid #9CACA4;
|
|
border-bottom: 1px dotted #9CACA4;
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack .sheet-frame,
|
|
.sheet-rolltemplate-Magic .sheet-frame,
|
|
.sheet-rolltemplate-Checks .sheet-frame,
|
|
.sheet-rolltemplate-Generic .sheet-frame {
|
|
border: 2px solid #9caca4;
|
|
border-top: 0;
|
|
border-radius: 0 0 20px 20px;
|
|
padding: 10px 10px 12px;
|
|
background-color: white;
|
|
background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Fabula%20Ultima/images/fabula-ultima-transparent-logo.png");
|
|
background-position: top 5px right 5px;
|
|
background-repeat: no-repeat;
|
|
background-size: 95px;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack .sheet-text-center,
|
|
.sheet-rolltemplate-Magic .sheet-text-center,
|
|
.sheet-rolltemplate-Checks .sheet-text-center,
|
|
.sheet-rolltemplate-Generic .sheet-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack hr,
|
|
.sheet-rolltemplate-Magic hr,
|
|
.sheet-rolltemplate-Checks hr,
|
|
.sheet-rolltemplate-Generic hr {
|
|
margin-top: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack h2,
|
|
.sheet-rolltemplate-Magic h2,
|
|
.sheet-rolltemplate-Checks h2,
|
|
.sheet-rolltemplate-Generic h2 {
|
|
line-height: normal !important;
|
|
font-size: 16px !important;
|
|
color: #4d4c45;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack h3,
|
|
.sheet-rolltemplate-Magic h3,
|
|
.sheet-rolltemplate-Checks h3,
|
|
.sheet-rolltemplate-Generic h3 {
|
|
line-height: normal !important;
|
|
margin-top: 15px;
|
|
font-size: 16px !important;
|
|
color: #000000;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack h4,
|
|
.sheet-rolltemplate-Magic h4,
|
|
.sheet-rolltemplate-Checks h4,
|
|
.sheet-rolltemplate-Generic h4 {
|
|
line-height: normal !important;
|
|
font-weight: normal !important;
|
|
font-size: 14px !important;
|
|
color: #777777;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack h5,
|
|
.sheet-rolltemplate-Magic h5,
|
|
.sheet-rolltemplate-Checks h5,
|
|
.sheet-rolltemplate-Generic h5 {
|
|
line-height: normal !important;
|
|
font-weight: normal !important;
|
|
font-size: 14px !important;
|
|
color: #000000;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack h6,
|
|
.sheet-rolltemplate-Magic h6,
|
|
.sheet-rolltemplate-Checks h6,
|
|
.sheet-rolltemplate-Generic h6 {
|
|
font-weight: normal !important;
|
|
font-size: 12px !important;
|
|
color: #777777;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack div.description,
|
|
.sheet-rolltemplate-Magic div.description,
|
|
.sheet-rolltemplate-Generic div.description {
|
|
text-align: justify;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack div.sheet-critical-success,
|
|
.sheet-rolltemplate-Magic div.sheet-critical-success,
|
|
.sheet-rolltemplate-Generic div.sheet-critical-success {
|
|
color: #009900;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack div.sheet-critical-fail,
|
|
.sheet-rolltemplate-Magic div.sheet-critical-fail,
|
|
.sheet-rolltemplate-Generic div.sheet-critical-fail {
|
|
color: #cc0000;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack div.sheet-doubles-indicator,
|
|
.sheet-rolltemplate-Magic div.sheet-doubles-indicator,
|
|
.sheet-rolltemplate-Generic div.sheet-doubles-indicator {
|
|
color: #0088DD;
|
|
}
|
|
|
|
.sheet-rolltemplate-Attack span.sheet-gray-text,
|
|
.sheet-rolltemplate-Magic span.sheet-gray-text,
|
|
.sheet-rolltemplate-Checks span.sheet-gray-text,
|
|
.sheet-rolltemplate-Generic span.sheet-gray-text {
|
|
color: #777777;
|
|
}
|
|
|
|
/*** Multi-use Classes ***/
|
|
.small-width { width: 45px !important; }
|
|
.medium-width { width: 100px !important; }
|
|
.full-width { width: 100% !important; }
|
|
.w9p{ width: 9% !important; }
|
|
.w23p{ width: 23% !important; }
|
|
.w68p{ width: 68% !important; }
|
|
.width150 { width: 150px !important; }
|
|
.width220 { width: 220px !important; }
|
|
.width250 { width: 250px !important; }
|
|
.width255 { width: 255px !important; }
|
|
.width365 { width: 365px !important; }
|
|
.width400 { width: 400px !important; }
|
|
.top-m10{ margin-top: 10px !important; }
|
|
.bottom-m10{ margin-bottom: 10px !important; }
|
|
.indent-left{ padding-left: 30px !important; }
|
|
.indent-right{ padding-right: 35px !important; }
|
|
.leftfloat{ float: left; }
|
|
.rightfloat{ float: right; }
|
|
.clearfloat { clear: both; }
|
|
.text-center { text-align: center; }
|