603 lines
13 KiB
CSS
603 lines
13 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;600&display=swap');
|
|
|
|
@font-face {
|
|
font-family: 'village';
|
|
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Fonts/village.ttf');
|
|
}
|
|
|
|
/* Defaults */
|
|
.character-sheet .row {
|
|
display: flex;
|
|
}
|
|
.col-10 {
|
|
width: 83%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-8 {
|
|
width: 75%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-8 {
|
|
width: 66%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-7 {
|
|
width: 58%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-6 {
|
|
width: 50%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-5 {
|
|
width: 41%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-4 {
|
|
width: 33%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-3 {
|
|
width: 25%;
|
|
padding: 0 15px;
|
|
}
|
|
.col-2 {
|
|
width: 17%;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
|
|
.character-sheet input {
|
|
font-family: 'Roboto Slab', serif;
|
|
background:#Fff;
|
|
border: 1px solid #483517;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
color: #000;
|
|
box-sizing: border-box;
|
|
}
|
|
.character-sheet textarea {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
.character-sheet input[type="checkbox"] {
|
|
box-shadow: 2px 2px 0px 0px #00000057;
|
|
}
|
|
|
|
.charactersheet {
|
|
padding: 0;
|
|
}
|
|
|
|
/* Custom modules */
|
|
|
|
.character-sheet {
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/bg-card.jpg);
|
|
background-size: cover;
|
|
background-position: top center;
|
|
max-width: 1310px;
|
|
padding: 20px;
|
|
font-family: 'Roboto Slab', serif;
|
|
border: 2px solid #483517;
|
|
min-width: 740px;
|
|
}
|
|
.character-sheet-inside {
|
|
padding: 27px;
|
|
border: 3px solid #483517;
|
|
position: relative;
|
|
}
|
|
.character-sheet .line {
|
|
background: #483517;
|
|
height: 5px;
|
|
max-width: 62%;
|
|
margin: auto;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.character-sheet-inside .corners .top-left {
|
|
position: absolute;
|
|
left: -3px;
|
|
top: -3px;
|
|
}
|
|
.character-sheet-inside .corners .top-right {
|
|
position: absolute;
|
|
right: -3px;
|
|
top: -3px;
|
|
}
|
|
.character-sheet-inside .corners .bottom-left {
|
|
position: absolute;
|
|
left: -3px;
|
|
bottom: -5px;
|
|
}
|
|
.character-sheet-inside .corners .bottom-right {
|
|
position: absolute;
|
|
right: -3px;
|
|
bottom: -5px;
|
|
}
|
|
.character-sheet .title {
|
|
font-family: 'Village';
|
|
font-size: 64px;
|
|
color: #483517;
|
|
text-align: center;
|
|
margin:0;
|
|
letter-spacing: 8px;
|
|
line-height: normal;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.character-sheet .title img {
|
|
width: 64px;
|
|
display: inline-block;
|
|
}
|
|
.character-sheet .subtitle {
|
|
font-family: 'Roboto Slab', serif;
|
|
font-size: 22px;
|
|
letter-spacing: 10px;
|
|
font-weight: 400;
|
|
color: #483517;
|
|
text-align: center;
|
|
margin: 0;
|
|
line-height: normal;
|
|
text-transform: uppercase;
|
|
margin-top: -8px;
|
|
}
|
|
|
|
|
|
.character-details {
|
|
background-color: rgb(0 0 0 / 7%);
|
|
position: relative;
|
|
z-index: 1;
|
|
border: 2px solid #483517;
|
|
border-radius: 51px 0 0 0;
|
|
padding: 16px 26px;
|
|
padding-bottom: 24px;
|
|
margin-bottom: 32px;
|
|
}
|
|
.character-details.with-down-corner {
|
|
border-radius: 51px 0 28px 0;
|
|
}
|
|
|
|
.character-details::before {
|
|
content: "";
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/card-element-top-2.png);
|
|
width: 100%;
|
|
height: 100%;
|
|
left: -20px;
|
|
top: -27px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.character-details.with-down-corner::after {
|
|
content: "";
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/card-element-down-2.png);
|
|
width: 100%;
|
|
height: 100%;
|
|
right: -20px;
|
|
bottom: -27px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-repeat: no-repeat;
|
|
transform: rotate(-180deg);
|
|
}
|
|
.character-details-label {
|
|
position: relative;
|
|
}
|
|
.character-details-label span {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
font-family: 'Roboto Slab', serif;
|
|
text-transform: uppercase;
|
|
position: absolute;
|
|
left: 10px;
|
|
color: #483517;
|
|
}
|
|
.character-details-label input {
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
font-size: 16px;
|
|
line-height: 27px;
|
|
width: 100%;
|
|
}
|
|
|
|
.character-sheet .details-title {
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-weight: 400;
|
|
color: #483517;
|
|
font-size: 22px;
|
|
line-height: normal;
|
|
}
|
|
.character-details .box-input {
|
|
background: #Fff;
|
|
border: 1px solid #483517;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
padding: 5px;
|
|
}
|
|
.character-details .box-input label {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
margin: 0;
|
|
border-bottom: 1px solid #483517;
|
|
padding: 0;
|
|
}
|
|
.character-details .box-input label span {
|
|
white-space: nowrap;
|
|
line-height: 36px;
|
|
padding: 0 5px;
|
|
}
|
|
.character-details .box-input label.character-details-label span {
|
|
line-height: normal;
|
|
left: 0;
|
|
}
|
|
.character-details .box-input label input, .character-details .box-input label select {
|
|
width: 100%;
|
|
border: 0;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
font-size: 16px;
|
|
line-height: 26px;
|
|
}
|
|
.character-details .box-input label select {
|
|
font-size: 13px;
|
|
}
|
|
.character-details .box-input.center-inputs input {
|
|
text-align: center;
|
|
}
|
|
|
|
.character-details .input-box input {
|
|
width: 40px;
|
|
}
|
|
|
|
.mini-title {
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
line-height: 14px;
|
|
height: 29px;
|
|
font-size: 11px;
|
|
color: #000;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title-with-input {
|
|
background-color: #b09d8d;
|
|
border: 1px solid #483517;
|
|
color: #483517;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
/* sidebar */
|
|
|
|
.character-sheet .secret-roll {
|
|
display: inline-block;
|
|
width: auto;
|
|
cursor: pointer;
|
|
}
|
|
.character-sheet .secret-roll input {
|
|
vertical-align: baseline;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.character-sheet-table {
|
|
margin:0;
|
|
width: 100%;
|
|
}
|
|
.character-sheet-table .table-title {
|
|
font-weight: bold;
|
|
color: #000;
|
|
font-size: 18px;
|
|
padding-top: 10px;
|
|
text-transform: uppercase;
|
|
}
|
|
.character-sheet-table td {
|
|
color: #000;
|
|
font-size: 16px;
|
|
line-height: 36px;
|
|
padding: 0 5px;
|
|
}
|
|
.character-sheet-table tr.border-bottom {
|
|
border-bottom: 2px solid #483517;
|
|
}
|
|
.character-sheet-table tr:nth-child(even) {
|
|
background: rgb(0 0 0 / 7%);
|
|
}
|
|
.character-sheet-table.no-background tr:nth-child(even) {
|
|
background: transparent;
|
|
}
|
|
.character-sheet-table td input[type="checkbox"] {
|
|
transform: scale(1.5);
|
|
width: auto;
|
|
}
|
|
.character-sheet-table td input {
|
|
width: 100%;
|
|
}
|
|
.character-sheet-table .box-input {
|
|
margin-bottom: 10px;
|
|
}
|
|
.charsheet .character-sheet .character-sheet-table button[type="roll"] {
|
|
width: auto;
|
|
}
|
|
|
|
.card-box {
|
|
padding: 14px;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 10px;
|
|
border-radius: 28px 0 54px 0;
|
|
background: rgb(0 0 0 / 7%);
|
|
margin-bottom: 44px;
|
|
border: 2px solid #483517;
|
|
}
|
|
.card-box:before {
|
|
content: "";
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/card-element-top.png');
|
|
width: calc(100% + 29px);
|
|
height: calc(100% + 28px);
|
|
left: -29px;
|
|
top: -28px;
|
|
position: absolute;
|
|
z-index: -1;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.card-box:after {
|
|
content: "";
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/card-element-down.png');
|
|
width: calc(100% + 20px);
|
|
height: calc(100% + 25px);
|
|
right: -20px;
|
|
bottom: -25px;
|
|
position: absolute;
|
|
transform: rotate(-180deg);
|
|
z-index: -1;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.card-box .card-title {
|
|
background-color: #b09d8d;
|
|
border: 1px solid #483517;
|
|
color: #483517;
|
|
padding: 0 18px;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
|
|
.attribute-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
.charsheet .character-sheet button[type="roll"] {
|
|
background-color: #dfd9d2;
|
|
font-size: 16px;
|
|
text-align: left;
|
|
padding: 6px 12px;
|
|
line-height: normal;
|
|
border: 1px solid #483517;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
color: #000;
|
|
background-image: none;
|
|
width: 72%;
|
|
overflow: hidden;
|
|
}
|
|
.charsheet .character-sheet button[type="roll"]::before {
|
|
color: #000;
|
|
font-size: 20px;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
.attribute-box input {
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
.charsheet .attribute-box input[type="number"] {
|
|
width: 55px;
|
|
}
|
|
.attribute-box button span.small {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.character-sheet textarea {
|
|
background-attachment: local;
|
|
background-color: #Fff;
|
|
background-image:
|
|
linear-gradient(to right, white 5px, transparent 5px),
|
|
linear-gradient(to left, white 5px, transparent 5px),
|
|
repeating-linear-gradient(white, white 35px, #483517 35px, #483517 36px, white 36px);
|
|
line-height: 36px;
|
|
font-size: 16px;
|
|
padding: 5px;
|
|
border: 1px solid #483517;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
height: 300px;
|
|
resize: vertical;
|
|
}
|
|
|
|
|
|
.label-with-checkboxes {
|
|
background: #dfd9d2;
|
|
border: 1px solid #483517;
|
|
box-shadow: 4px 4px 0px 0px #00000057;
|
|
border-radius: 5px;
|
|
padding: 5px 10px;
|
|
text-align: center;
|
|
padding-bottom: 15px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.label-with-checkboxes span {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
color: #483517;
|
|
line-height: normal;
|
|
}
|
|
.label-with-checkboxes input {
|
|
transform: scale(1.5);
|
|
margin: 5px;
|
|
}
|
|
|
|
|
|
|
|
/* Roll Template */
|
|
.sheet-rolltemplate-vaesen .sheet-template-wrap {
|
|
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/vaesen-castle.jpg);
|
|
background-position: top center;
|
|
background-size: cover;
|
|
border: 3px solid #483517;
|
|
padding-top: 8px;
|
|
margin: 0 5px;
|
|
counter-reset: hit;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen .sheet-template-header {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
justify-self: center;
|
|
width: 105%;
|
|
margin: 2px -9px 2px -9px;
|
|
padding: 0 5px 0 5px;
|
|
word-break: break-word;
|
|
color: #fff;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 9px;
|
|
border-bottom-left-radius: 9px;
|
|
background-color: #000;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-grid-item.sheet-template-span-six.sheet-template-header {
|
|
margin-bottom: 5px;
|
|
box-shadow: 0 2px 7px #000;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-grid-item.sheet-template-span-six.sheet-template-header a {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-subtitle {
|
|
font-family: 'Village';
|
|
color: #fff;
|
|
font-size: 22px;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen .sheet-template-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-dice-grid .sheet-template-grid-item {
|
|
margin: 4px;
|
|
}
|
|
|
|
.sheet-rolltemplate-vaesen .sheet-template-base-between {
|
|
height: 35px;
|
|
width: 35px;
|
|
background-color:#f1f0ee;
|
|
border: 1px solid #483517;
|
|
border-radius: 5px;
|
|
background-size: cover;
|
|
box-shadow: 4px 4px 0px 0px rgb(0 0 0 / 60%);
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-base-between > span, .sheet-rolltemplate-vaesen .sheet-template-base-success > span {
|
|
width: 100%;
|
|
display: inline-block;
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
background: transparent;
|
|
font-family: 'Village';
|
|
font-size: 18px;
|
|
/* color: #483517; */
|
|
color: #f1f0ee;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-base-success > span {
|
|
font-size: 11px;
|
|
text-align: left;
|
|
line-height: normal;
|
|
height: 35px;
|
|
padding-left: 3px;
|
|
margin-top: 0;
|
|
display: block;
|
|
color: #483517;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-template-base-success {
|
|
height: 35px;
|
|
width: 35px;
|
|
border-radius: 5px;
|
|
border: 1px solid #483517;
|
|
background-color: #f1f0ee;
|
|
background-image: url(https://imgsrv.roll20.net?src=https%3A//raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen%20PDF%20Version/Images/symbol.png);
|
|
background-size: 90%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
box-shadow: 4px 4px 0px 0px rgb(0 0 0 / 60%);
|
|
}
|
|
.sheet-rolltemplate-vaesen span.inlinerollresult.fullcrit {
|
|
border: 0;
|
|
counter-increment: hit;
|
|
}
|
|
.sheet-rolltemplate-vaesen span.inlinerollresult.fullfail {
|
|
border: 0;
|
|
}
|
|
|
|
|
|
.sheet-rolltemplate-vaesen .sheet-dice-stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-dice-stats > div {
|
|
width: 50%;
|
|
padding: 6px;
|
|
background-color: rgb(0 0 0 / 60%);
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-dice-stats span {
|
|
display: inline;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0;
|
|
font-weight: bold;
|
|
}
|
|
.sheet-rolltemplate-vaesen .sheet-success-stat::after {
|
|
content: counter(hit);
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* Display variants */
|
|
|
|
input.tab-sheet[value="Headquarter"] ~ .character-tab,
|
|
input.tab-sheet[value="Character"] ~ .headquarter-tab {
|
|
display: none;
|
|
}
|
|
|
|
input.tab-sheet[value="Character"] ~ .character-tab,
|
|
input.tab-sheet[value="Headquarter"] ~ .headquarter-tab {
|
|
display: block;
|
|
} |