mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
699 lines
13 KiB
CSS
699 lines
13 KiB
CSS
/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
|
|
@import url('https://fonts.googleapis.com/css?family=Bubbler+One|Lustria|Limelight&display=swap');
|
|
/*
|
|
Bubbler One
|
|
Limelight
|
|
Gilda Display
|
|
*/
|
|
|
|
.sheet-main-container {
|
|
min-width: 600px;
|
|
max-width: 800px;
|
|
min-height: 600px;
|
|
border: 10px double black;
|
|
padding: 20px;
|
|
}
|
|
|
|
.sheet-main-container input {
|
|
height: auto;
|
|
}
|
|
|
|
.sheet-main-container select {
|
|
width: auto;
|
|
height: auto;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-main-container input[type=text] {
|
|
width: 100%;
|
|
}
|
|
|
|
.sheet-main-container input[type=number] {
|
|
width: 4.2em;
|
|
}
|
|
|
|
.sheet-main-container textarea {
|
|
box-sizing: border-box;
|
|
margin: 0px;
|
|
}
|
|
|
|
.sheet-main-container button {
|
|
margin: 0px !important;
|
|
}
|
|
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.sheet-main-font {
|
|
/*font-family: 'Bubbler One';*/
|
|
font-family: 'Limelight';
|
|
}
|
|
|
|
.sheet-secondary-font {
|
|
font-family: 'Lustria';
|
|
}
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sheet-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-label {
|
|
text-transform: uppercase;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.sheet-row-item-margin {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.sheet-tab-panel {
|
|
/*display: flex;*/
|
|
display: none;
|
|
flex-direction: row;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-tab-panel button {
|
|
margin-right: 5px !important;
|
|
}
|
|
|
|
.sheet-footer {
|
|
text-align: right;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-box-label {
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-repeatable-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-end;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-borderless-input {
|
|
border: 0px;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
/*----------------- PROFILE TAB ------------------*/
|
|
|
|
.sheet-profilegrid {
|
|
display: grid;
|
|
grid-template-columns: 0.5fr 1fr 0.5fr;
|
|
row-gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-header {
|
|
grid-column: 2/3;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-header input[type="text"], .sheet-header select, .sheet-header .sheet-profession-problem {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.sheet-header-margin {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
button.sheet-header {
|
|
justify-self: center;
|
|
}
|
|
|
|
.sheet-passport {
|
|
text-transform: uppercase;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.sheet-mainlabel {
|
|
font-size: 15px;
|
|
}
|
|
|
|
.sheet-profession-quote {
|
|
text-transform: uppercase;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-profession-description {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.sheet-box-label {
|
|
text-transform: uppercase;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sheet-profession {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sheet-profession select {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.sheet-profession-input {
|
|
text-align: left !important;
|
|
margin-left: 10px;
|
|
border-top: 0px;
|
|
border-left: 1px solid black;
|
|
border-right: 0px;
|
|
border-bottom: 0px;
|
|
border-radius: 0px;
|
|
padding: 0px 0px 0px 10px;
|
|
}
|
|
|
|
.sheet-profession-descriptions {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sheet-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-sanity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-feature {
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-feature::before {
|
|
content: 'L ';
|
|
font-family: 'Pictos';
|
|
}
|
|
|
|
.sheet-feature-description {
|
|
height: 40px !important;
|
|
}
|
|
|
|
.sheet-equipment {
|
|
grid-column: 1/4;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-equipment input[type="text"] {
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-bottom: 2px solid black;
|
|
border-radius: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.sheet-misc-marker {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-glory-of-the-city {
|
|
text-transform: uppercase;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.sheet-glory-of-the-city-small {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.sheet-logo {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/anos20logo.png');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
height: 120px;
|
|
}
|
|
|
|
.sheet-logo2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
border: 3px solid black;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-misc {
|
|
text-align: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.sheet-misc .sheet-small-bottom-separator {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/*----------------- STYLED SEPARATOR ------------------*/
|
|
.sheet-bottom-separator {
|
|
display: block;
|
|
max-height: 2px;
|
|
height: 2px;
|
|
border-top: 2px solid black;
|
|
border-bottom: 2px solid black;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-bottom-separator::before, .sheet-bottom-separator::after {
|
|
display: inline-block;
|
|
content: ' ';
|
|
width: 15px;
|
|
height: 15px;
|
|
border: 5px double black;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
top: -11.5px;
|
|
}
|
|
|
|
.sheet-bottom-separator::before {
|
|
left: -28px;
|
|
}
|
|
|
|
.sheet-bottom-separator::after {
|
|
right: -28px;
|
|
}
|
|
|
|
/* small one */
|
|
.sheet-small-bottom-separator {
|
|
max-height: 1px;
|
|
height: 1px;
|
|
border-top: 1px solid black;
|
|
border-bottom: 1px solid black;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-small-bottom-separator::before, .sheet-small-bottom-separator::after {
|
|
display: inline-block;
|
|
content: ' ';
|
|
width: 7.5px;
|
|
height: 7.5px;
|
|
border: 2.5px double black;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
top: -6px;
|
|
}
|
|
|
|
.sheet-small-bottom-separator::before {
|
|
left: -13.5px;
|
|
|
|
}
|
|
|
|
.sheet-small-bottom-separator::after {
|
|
right: -13.5px;
|
|
}
|
|
|
|
/*----------------- PROFESSIONS PROGRAMMING ------------------*/
|
|
|
|
.sheet-profession-control:not([value="custom"]) ~ .sheet-custom,
|
|
.sheet-profession-control:not([value="retiree"]) ~ .sheet-retiree,
|
|
.sheet-profession-control:not([value="artist"]) ~ .sheet-artist,
|
|
.sheet-profession-control:not([value="scientist"]) ~ .sheet-scientist,
|
|
.sheet-profession-control:not([value="detective"]) ~ .sheet-detective,
|
|
.sheet-profession-control:not([value="engineer"]) ~ .sheet-engineer,
|
|
.sheet-profession-control:not([value="student"]) ~ .sheet-student,
|
|
.sheet-profession-control:not([value="shopkeeper"]) ~ .sheet-shopkeeper,
|
|
.sheet-profession-control:not([value="medic"]) ~ .sheet-medic,
|
|
.sheet-profession-control:not([value="worker"]) ~ .sheet-worker,
|
|
.sheet-profession-control:not([value="cop"]) ~ .sheet-cop {
|
|
|
|
display: none;
|
|
}
|
|
|
|
/*----------------- SANITY, VITALITY AND MISC RADIOS ------------------*/
|
|
.sheet-base-radio {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
-moz-appearance: none;
|
|
position: relative;
|
|
}
|
|
|
|
.sheet-radio-zero+span {
|
|
display: block;
|
|
font-family: "Pictos";
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-radio-zero+span::before {
|
|
content: 'D';
|
|
}
|
|
|
|
.sheet-radio-zero:checked+span {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.sheet-base-radio+span {
|
|
display: inline-block;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.sheet-big-radio {
|
|
margin-bottom: -60px;
|
|
}
|
|
|
|
.sheet-big-radio, .sheet-big-radio+span {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
}
|
|
|
|
.sheet-big-radio-zero, .sheet-big-radio-zero+span {
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
}
|
|
|
|
.sheet-big-radio-zero {
|
|
margin-bottom: -30px;
|
|
}
|
|
|
|
.sheet-big-radio-zero+span {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/*small radio*/
|
|
.sheet-small-radio {
|
|
margin-right: -30px;
|
|
}
|
|
|
|
.sheet-small-radio, .sheet-small-radio+span {
|
|
width: 30px !important;
|
|
height: 30px !important;
|
|
}
|
|
|
|
.sheet-small-radio-zero, .sheet-small-radio-zero+span {
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
}
|
|
|
|
.sheet-small-radio-zero {
|
|
margin-right: -25px;
|
|
}
|
|
|
|
.sheet-small-radio-zero+span {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Here it uses an inverse logic. By default, the sanity image will the the filled one.
|
|
But if it is preceded by a checked radio, then it shows a blank one. */
|
|
|
|
.sheet-sanity-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/sanity_filled.svg');
|
|
}
|
|
|
|
.sheet-base-radio:checked~.sheet-sanity-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/sanity_blank.svg');
|
|
}
|
|
|
|
.sheet-vitality-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/vitality_filled.svg');
|
|
}
|
|
|
|
.sheet-base-radio:checked~.sheet-vitality-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/vitality_blank.svg');
|
|
}
|
|
|
|
.sheet-misc-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/misc_marker_filled.svg');
|
|
}
|
|
|
|
.sheet-base-radio:checked~.sheet-misc-radio+span {
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Anos20/assets/misc_marker_blank.svg');
|
|
}
|
|
|
|
/*----------------- TAB CONTROL ------------------*/
|
|
|
|
.sheet-tab-panel input {
|
|
border: 0px;
|
|
width: 25px;
|
|
height: 25px;
|
|
background: transparent !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0px;
|
|
margin-right: -25px;
|
|
z-index: 1;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sheet-tab-panel div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Pictos';
|
|
font-size: 25px;
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sheet-tab-panel input:hover+div {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sheet-tab-panel input:checked+div {
|
|
color: gray;
|
|
}
|
|
|
|
/*Configure the tab buttons*/
|
|
|
|
.sheet-profiletab, .sheet-configurationtab, .sheet-helptab {
|
|
display: none;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
|
|
.sheet-tabcontrol[value="profile"]~div.sheet-profiletab, .sheet-tabcontrol[value="configuration"]~div.sheet-configurationtab, .sheet-tabcontrol[value="help"]~div.sheet-helptab {
|
|
display: block;
|
|
}
|
|
|
|
/*----------------- ROLL BUTTON ------------------*/
|
|
|
|
.sheet-main-container button[type=roll] {
|
|
border: 0px;
|
|
font-size: 30px;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: transparent !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-main-container button[type=roll]::before {
|
|
content: 'F';
|
|
font-family: 'dicefontd6' !important;
|
|
}
|
|
|
|
.sheet-main-container button[type=roll]:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/*------------- REPEATABLE SECTIONS BUTTONS -------------*/
|
|
|
|
.repcontrol>.btn {
|
|
background-color: transparent;
|
|
font-size: 2px;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
border: 0px;
|
|
}
|
|
|
|
.repcontrol>.btn:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_add::before {
|
|
content: "&";
|
|
color: black;
|
|
font-size: 20px;
|
|
font-family: 'Pictos' !important;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_edit::before {
|
|
content: "(";
|
|
color: black;
|
|
font-size: 20px;
|
|
font-family: 'Pictos' !important;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
/* change the 'Done' text after clicking 'Modify' */
|
|
.editmode~.repcontrol>.repcontrol_edit::before {
|
|
content: ')';
|
|
}
|
|
|
|
|
|
/*------------- REPEATABLE SECTIONS TOGGLE SHOW/HIDE -------------*/
|
|
|
|
.sheet-showhidebutton {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
}
|
|
|
|
.sheet-showhidebutton input[type=checkbox] {
|
|
width: 20px;
|
|
position: absolute;
|
|
opacity: 0;
|
|
}
|
|
|
|
.sheet-showhidebutton:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sheet-arrowtype input[type=checkbox]:checked~span::before {
|
|
content: '▲';
|
|
}
|
|
|
|
.sheet-arrowtype span::before {
|
|
content: '▼';
|
|
}
|
|
|
|
.sheet-showhidebutton span {
|
|
color: black;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.sheet-toggle-checkbox {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-showhide {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-toggle-checkbox:checked~.sheet-showhide {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .itemcontrol {
|
|
z-index: 99;
|
|
font-family: 'Pictos'
|
|
}
|
|
|
|
.sheet-main-container .repcontainer[data-groupname="repeating_equipments"]>.repitem .repcontrol_del {
|
|
font-family: 'Pictos';
|
|
background-color: #d13235;
|
|
background-image: none;
|
|
position: absolute;
|
|
z-index: 99 !important;
|
|
top: 0;
|
|
right: 0
|
|
}
|
|
|
|
/*------------- HIDDEN SELECT ITEMS -------------*/
|
|
.sheet-configtype {
|
|
font-family: 'Pictos';
|
|
}
|
|
|
|
.sheet-configtype input[type=checkbox]:checked~span::before {
|
|
content: '*';
|
|
}
|
|
|
|
.sheet-configtype span::before {
|
|
content: 'y';
|
|
}
|
|
|
|
.sheet-corner-position {
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
|
|
.sheet-add-button {
|
|
border: 0px;
|
|
font-size: 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: transparent !important;
|
|
text-shadow: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0px;
|
|
}
|
|
|
|
.sheet-add-button::before {
|
|
content: '+';
|
|
font-family: 'Pictos' !important;
|
|
}
|
|
|
|
.sheet-add-button:hover {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/*------------- SHEET ROLL TEMPLATE -------------*/
|
|
.sheet-rolltemplate-main .sheet-template-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 2px solid black;
|
|
text-align: center;
|
|
background-color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-main-font {
|
|
font-family: 'Limelight';
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-secondary-font {
|
|
font-family: 'Lustria';
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-header {
|
|
flex-direction: row !important;
|
|
background-color: black;
|
|
color: white;
|
|
font-size: 18px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-roll {
|
|
padding: 10px;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-result {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .inlinerollresult {
|
|
border: 2px solid black !important;
|
|
background-color: black !important;
|
|
color: white !important;
|
|
font-size: 20px;
|
|
font-family: 'Limelight';
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-success {
|
|
color: goldenrod;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-fail {
|
|
color: red;
|
|
} |