roll20-character-sheets/Vaesen/vaesen_sheet.css

/* Configure Tab Buttons */
@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/Fonts/village.ttf');
}


.sheet-main,
.sheet-Vaesen,
.sheet-NPC,
.sheet-HQ {
    display: none;
}



/*PC Sheet Layout*/
.sheet-tabstoggle[value="main"]~div.sheet-main {
    display: block;
}

/*NPC Sheet Layout*/
.sheet-tabstoggle[value="NPC"]~div.sheet-NPC {
    display: block;
}

/*Vaesen Sheet Layout*/
.sheet-tabstoggle[value="Vaesen"]~div.sheet-Vaesen {
    display: block;
   
}

/*Vaesen HQ Layout*/
.sheet-tabstoggle[value="HQ"]~div.sheet-HQ {
    display: block;
}



/* Defaults  */
.flex {
    display: flex;
}
.sheet-main-box .row {
    display: flex;
}

.col-12 {
    width: 100%;
    padding: 0 15px;
}
.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;
}


.sheet-main-box input, .sheet-main-box select {
    font-family: 'Roboto Slab', serif;
    background: #Fff;
    border: 1px solid #483517;
    box-shadow: 4px 4px 0px 0px #00000057;
    display: inline-block;
    font-size: 16px;
    color: #000;
    box-sizing: border-box;
    padding: 6px;
    height: auto;
    line-height: 23px;
}

.sheet-main-box textarea {
    box-sizing: border-box;
    margin: 0;
    display: block;
}

.sheet-main-box input[type="checkbox"] {
    box-shadow: 2px 2px 0px 0px #00000057;
}

.charactersheet {
    padding: 0;
}

/* Custom modules */

.sheet-main-box {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/bg-card.jpg);
    background-size: cover;
    background-position: top center;
    max-width: 1400px;
	padding: 20px 30px;
    font-family: 'Roboto Slab', serif;
    border: 2px solid #483517;
    min-width: 1040px;
	position: relative;
}

.sheet-main-box .line {
    background: #483517;
    height: 5px;
    max-width: 62%;
    margin: auto;
    margin-bottom: 10px;
}



.sheet-main-box .corners .top-left {
    position: absolute;
    left: -3px;
    top: -3px;
}

.sheet-main-box .corners .top-right {
    position: absolute;
    right: -3px;
    top: -3px;
}

.sheet-main-box .corners .bottom-left {
    position: absolute;
    left: -3px;
    bottom: -5px;
}

.sheet-main-box .corners .bottom-right {
    position: absolute;
    right: -3px;
    bottom: -5px;
}

.sheet-main-box .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;
}

.sheet-main-box .title img {
    width: 64px;
    display: inline-block;
}

.sheet-main-box .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/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/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%;
    padding-bottom: 4px;
}

.sheet-main-box .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;
}



.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
.flex-3 {
	flex: 3;
}
.flex-4 {
	flex: 4;
}




.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 */

.sheet-main-box .secret-roll {
    display: inline-block;
    width: auto;
    cursor: pointer;
}

.sheet-main-box .secret-roll input {
    vertical-align: baseline;
    margin-right: 4px;
}

.sheet-main-box-table {
    margin: 0;
    width: 100%;
}

.sheet-main-box-table .table-title {
    font-weight: bold;
    color: #000;
    font-size: 18px;
    padding-top: 10px;
    text-transform: uppercase;
}

.sheet-main-box-table td {
    color: #000;
    font-size: 16px;
    line-height: 36px;
    padding: 0 3px;
    vertical-align: top;
}

.sheet-main-box-table tr.border-bottom {
    border-bottom: 2px solid #483517;
}

.sheet-main-box-table tr:nth-child(even) {
    background: rgb(0 0 0 / 7%);
}

.sheet-main-box-table.no-background tr:nth-child(even) {
    background: transparent;
}

.sheet-main-box-table td input[type="checkbox"] {
    transform: scale(1.5);
    width: auto;
}

.sheet-main-box-table td input {
    width: 100%;
}

.sheet-main-box-table .box-input {
    margin-bottom: 10px;
}

.charsheet .sheet-main-box .sheet-main-box-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/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/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 .sheet-main-box button[type="roll"] {
    background-color: #dfd9d2;
    font-size: 16px;
    text-align: left;
    padding: 3px 12px;
    line-height: normal;
    border: 1px solid #483517;
    box-shadow: 4px 4px 0px 0px #00000057;
    color: #000;
    background-image: none;
    width: 72%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.charsheet .sheet-main-box button[type="roll"]:hover {
    border-color: red;
}
.charsheet .sheet-main-box button[type="roll"]::before {
    color: #000;
	vertical-align: middle;
	margin-right: 5px;
	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesendie.png);
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
}
.charsheet .sheet-main-box button[type="roll"]:hover::before {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesendie2.png");
}

.charsheet .sheet-main-box button[type="roll"].d66::before {
	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesend66_1.png);
    width: 47px;
}
.charsheet .sheet-main-box button[type="roll"].d66:hover::before {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesend66_2.png");
}
.charsheet .sheet-main-box button[type="roll"] span {
    margin-right: 5px;
}
.charsheet .sheet-main-box button[type="roll"] span:last-child {
    margin: 0;
}

.charsheet .sheet-main-box button[type="action"] {
    background-color: #dfd9d2;
    font-size: 16px;
    padding: 3px 12px;
    line-height: normal;
    border: 1px solid #483517;
    box-shadow: 4px 4px 0px 0px #00000057;
    color: #000;
    background-image: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    line-height: 29px;
    border-radius: 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;
}

.sheet-main-box 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;
}

.diemod {
    display: flex;
    margin-bottom: 8px;
}

.diemod input {
    margin-right: 5px;
}

.charsheet .diemod .clear-btn[type="action"] {
    font-size: 13px;
    padding: 3px 6px;
}



/* Roll Template */
.sheet-rolltemplate-vaesen .sheet-template-wrap {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/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-wrap.sheet-npc {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/npc-bg.jpg);
}
.sheet-rolltemplate-vaesen .sheet-template-wrap.sheet-vaesen {
    background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesen-bg.jpg);
}

.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-result-skill span {
    background-color: rgb(0 0 0 / 60%);
	border: 0;
	padding: 5px 10px;
	font-weight: normal;
}

.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/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-between;
    background-color: rgb(0 0 0 / 60%);
    margin-top: 10px;
}

.sheet-rolltemplate-vaesen .sheet-dice-stats>div {
    padding: 6px;
    color: #fff;
    text-align: center;
    font-size: 12px;
}

.sheet-rolltemplate-vaesen .sheet-dice-stats span {
    display: inline;
    border: 0;
    background: transparent;
    padding: 0;
    font-weight: bold;
}
.sheet-rolltemplate-vaesen .sheet-dice-stats span:first-child:after {
    content: ":";
}

.sheet-rolltemplate-vaesen .sheet-success-stat span:first-child:after {
    content: ": "counter(hit);
    font-weight: bold;
}

/*Repeating Setions*/
.repcontrol {
    display: flex;
    margin-top: 3px;
}
  
.repcontrol .repcontrol_edit {
    margin-left: auto;
    order: 1;
}
  
.repcontrol button {
    background: transparent;
    color: #555;
    border-radius: 0;
    border-color: #999;
    transition: all 0.2s;
    font-family: pictos;
    font-size: 0;
    font-weight: bold;
    padding: 5px 3px 2px;
    line-height: 8px;
}
  
.repcontrol button:hover {
    color: green;
    border-color: green;
    background: #ddd;
}
  
.repcontrol button.repcontrol_edit::after {
    content: "(";
}
  
.repcontrol button.repcontrol_add::after {
    content: "&";
}
  
.repcontrol button.repcontrol_edit::after, .repcontrol button.repcontrol_add::after {
    font-size: 20px;
}
  
.repcontainer.editmode + .repcontrol button.repcontrol_edit::after {
    content: ")";
}

.itemcontrol {
    z-index: 20;
}

.fieldset-labels {
	display: flex;
	flex-wrap: nowrap;
}
.fieldset-labels .mini-title {
	justify-content: flex-start;
	margin-right: 6px;
	height: 14px;
}
.repitem {
	display: flex;
    align-items: flex-start;
}
.repitem input, .repitem select {
	width: 100%;
	margin-right: 6px;
	margin-bottom: 7px;
}
.repitem input[type="checkbox"] {
    width: auto;
	transform: scale(1.5);
	flex: unset;
	margin-right: 10px;
	margin-top: 10px;
}
.rep-box-vertical .repitem {
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.rep-box-vertical .repitem label {
    margin-bottom: 0;
}
.rep-box-vertical .repitem input {
    margin-bottom: 0;
    border-radius: 0;
}
.rep-box-vertical .repitem textarea {
    height: 78px;
    border-radius: 0;
    border-top: 0;
    border-bottom: 0;
}

/*Roll Button Styling*/

/*Basic d6 Vaesen Roll Button */
button[type="roll"].vaesendie:before {
    content: '';
}

button[type="roll"].vaesendie {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesendie.png");
    background-size: 26px 26px;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
    background-position: 0;
}

button[type="roll"].vaesendie:hover {
    background-position: 0;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesendie2.png");
    background-color: transparent;
}

button[type="roll"].vaesendie:active {
    background-position: 0;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesendie3.png");
    background-color: transparent;
}


/*Basic d66 Vaesen Roll Button */
button[type="roll"].vaesend66:before {
    content: '';
}

button[type="roll"].vaesend66 {
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesend66_1.png");
    background-size: 41px 26px;
    background-repeat: no-repeat;
    width: 41px;
    height: 26px;
    border-style: none;
    background-color: transparent;
    margin-left: 5px;
    background-position: 0;
}

button[type="roll"].vaesend66:hover {
    background-position: 0;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesend66_2.png");
    background-color: transparent;
}

button[type="roll"].vaesend66:active {
    background-position: 0;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Vaesen/Images/vaesend66_3.png");
    background-color: transparent;
}