377 lines
6.5 KiB
CSS
377 lines
6.5 KiB
CSS
/*----------------- MAIN CONTAINER DEFINITIONS ------------------*/
|
|
@import url('https://fonts.googleapis.com/css?family=Chewy|Raleway&display=swap');
|
|
|
|
.sheet-main-container {
|
|
min-width: 770px;
|
|
max-width: 1000px;
|
|
border: 1.5px solid black;
|
|
padding: 30px 30px 0px 30px;
|
|
}
|
|
|
|
.sheet-main-container * {
|
|
box-sizing: border-box !important;
|
|
}
|
|
/*----------------- GENERAL CSS ------------------*/
|
|
|
|
.sheet-main-font {
|
|
font-family: Raleway;
|
|
}
|
|
|
|
.sheet-flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.sheet-flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-main-container input:focus, .sheet-main-container {
|
|
background: white;
|
|
}
|
|
|
|
.sheet-main-container ::placeholder {
|
|
color:#604241;
|
|
font-style: italic;
|
|
}
|
|
|
|
.sheet-main-container input[type=number] {
|
|
width: 3em;
|
|
border: none;
|
|
background-color: transparent;
|
|
height: 20px;
|
|
}
|
|
|
|
.sheet-main-container fieldset {
|
|
min-width: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
|
|
.sheet-main-container textarea {
|
|
margin: 2px;
|
|
height: 100%;
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-box-border {
|
|
border: 1.5px solid black;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.sheet-black-title {
|
|
background-color: black;
|
|
color: white;
|
|
padding: 10px;
|
|
margin: 0px 0px 10px 0px;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-light-title {
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
margin: 0px 0px 10px 0px;
|
|
}
|
|
|
|
.sheet-repeatable-item input[type=text] {
|
|
border: none;
|
|
border-bottom: 1px solid black;
|
|
border-radius: 0px;
|
|
margin-bottom: 5px;
|
|
flex-grow: 1;
|
|
width: auto !important;
|
|
}
|
|
|
|
.sheet-circle {
|
|
border: 2px solid black;
|
|
border-radius: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/*------------- SHEET SECTIONS -------------*/
|
|
.sheet-header {
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.sheet-header-box {
|
|
margin: 5px;
|
|
padding: 0px 10px 0px 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-header input {
|
|
margin: 2px;
|
|
flex-grow: 1;
|
|
border: none;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
color: black;
|
|
}
|
|
|
|
.sheet-header h1 {
|
|
margin: 0px 20px 0px 0px;
|
|
text-transform: uppercase;
|
|
font-family: Chewy;
|
|
font-size: 3em;
|
|
}
|
|
|
|
.sheet-middle-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.sheet-attributes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sheet-attributes-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-attribute-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-attribute-circle-size {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.sheet-attribute-white-bg {
|
|
background-color: white;
|
|
z-index: 1;
|
|
}
|
|
|
|
.sheet-survival-used-box {
|
|
position: absolute;
|
|
margin: 60px 0px 0px 30px;
|
|
width: 40px;
|
|
height: 40px;
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
.sheet-attribute-black-bg {
|
|
background-color: black;
|
|
width: 50px;
|
|
height: 50px;
|
|
color: white;
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
font-family: Chewy;
|
|
}
|
|
|
|
.sheet-attribute-value {
|
|
margin: 15px 0px 0px 11px;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-survival-used-value {
|
|
margin: 10px 0px 0px 6px !important;
|
|
}
|
|
|
|
.sheet-attribute-label {
|
|
text-transform: uppercase;
|
|
margin: 5px;
|
|
}
|
|
|
|
.sheet-attribute-separator {
|
|
font-size: 40px;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
position: relative;
|
|
left: 15px;
|
|
font-family: Raleway;
|
|
}
|
|
|
|
.sheet-conditions-row{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.sheet-condition-label {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sheet-condition-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 10px;
|
|
}
|
|
|
|
.sheet-condition-circle-size {
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
.sheet-condition-checkbox {
|
|
opacity: 0;
|
|
z-index: 1;
|
|
position: absolute;
|
|
margin: 0px !important;
|
|
width: 25px !important;
|
|
height: 25px !important;
|
|
}
|
|
|
|
.sheet-black-circle {
|
|
display: none;
|
|
background-color: black;
|
|
}
|
|
|
|
.sheet-condition-checkbox:checked ~ div.sheet-black-circle {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sheet-condition-checkbox:checked ~ div.sheet-blank-circle {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-section-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.sheet-footer {
|
|
text-align: right;
|
|
font-style: italic;
|
|
font-size: small;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/*------------- REPEATABLE SECTIONS BUTTONS -------------*/
|
|
|
|
.repcontrol>.btn {
|
|
background-color: white;
|
|
font-size: 2px;
|
|
border: 1px solid black;
|
|
background-image: none;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
display: inline-block;
|
|
border-radius: 0 !important;
|
|
margin-left: 10px !important;
|
|
margin-right: 10px !important;
|
|
font-weight: normal;
|
|
min-height: 22px;
|
|
min-width: 22px !important;
|
|
margin-bottom: 10px !important;
|
|
position: relative
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_add::before {
|
|
position: absolute;
|
|
content: "&";
|
|
font-weight: 0;
|
|
color: black;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-family: 'Pictos' !important;
|
|
line-height: 13px;
|
|
height: 13px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%)
|
|
}
|
|
|
|
.repcontrol>.btn.repcontrol_edit::before {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
content: "l";
|
|
font-weight: 0;
|
|
color: black;
|
|
font-size: 13px;
|
|
font-family: 'Pictos' !important;
|
|
line-height: 13px;
|
|
height: 13px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%)
|
|
}
|
|
|
|
/*------------- SHEET ROLL TEMPLATE -------------*/
|
|
|
|
.sheet-rolltemplate-main .sheet-template-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 2px solid black;
|
|
font-family: Raleway;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-main p {
|
|
font-family: Raleway;
|
|
text-align: left;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: 1px solid black;
|
|
padding: 5px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-header {
|
|
flex-direction: row !important;
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-label {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-success {
|
|
color: green;
|
|
}
|
|
|
|
.sheet-rolltemplate-main .sheet-template-fail {
|
|
color: red;
|
|
}
|
|
|
|
/*------------- ROLL BUTTONS VISIBILITY CONTROL -------------*/
|
|
|
|
.sheet-rollbuttoncontrol[value=normal] ~ .sheet-normal-button,
|
|
.sheet-rollbuttoncontrol[value=disadvantage] ~ .sheet-disadvantage-button {
|
|
display: block;
|
|
}
|
|
|
|
.sheet-rollbuttoncontrol[value=normal] ~ .sheet-disadvantage-button,
|
|
.sheet-rollbuttoncontrol[value=disadvantage] ~ .sheet-normal-button {
|
|
display: none;
|
|
}
|