mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 11:42:29 +00:00
1098 lines
22 KiB
CSS
1098 lines
22 KiB
CSS
@font-face {
|
||
font-family: 'ImFellEnglishRoman';
|
||
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon_Riders/Fonts/im-fell-english-roman.ttf');
|
||
}
|
||
|
||
@font-face {
|
||
font-family: 'IMFE';
|
||
src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon_Riders/Fonts/IMFE.ttf');
|
||
}
|
||
|
||
/* Defaults */
|
||
.ui-dialog .charsheet {
|
||
padding: 0;
|
||
}
|
||
|
||
.character-sheet .row {
|
||
display: flex;
|
||
max-width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.character-sheet .flex {
|
||
display: flex;
|
||
}
|
||
|
||
.col-12 {
|
||
width: 100%;
|
||
padding: 0 20px
|
||
}
|
||
|
||
.col-10 {
|
||
width: 83%;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.col-9 {
|
||
width: 75%;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.col-8 {
|
||
width: 66%;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.col-7 {
|
||
width: 58%;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.col-6 {
|
||
width: 50%;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.col-5 {
|
||
width: 41%;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.col-4 {
|
||
width: 33%;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
.col-3 {
|
||
width: 25%;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.col-2 {
|
||
width: 17%;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.center {
|
||
text-align: center;
|
||
}
|
||
|
||
.grid {
|
||
display: grid;
|
||
}
|
||
|
||
.flex {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.flex-center {
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.flex-2 {
|
||
flex: 2;
|
||
}
|
||
|
||
.flex-3 {
|
||
flex: 3;
|
||
}
|
||
|
||
.flex-4 {
|
||
flex: 4;
|
||
}
|
||
|
||
.margin-20 {
|
||
height: 20px;
|
||
}
|
||
|
||
.margin-10 {
|
||
height: 10px;
|
||
}
|
||
|
||
.character-sheet input,
|
||
.character-sheet select {
|
||
font-family: 'ImFellEnglishRoman';
|
||
text-transform: none;
|
||
background: #f1f4ff;
|
||
border: 1px solid transparent;
|
||
border-radius: 0;
|
||
transition: .3s all ease;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
color: #000;
|
||
line-height: 24px;
|
||
padding: 0 6px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 0;
|
||
height: 26px;
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet input,
|
||
.sheet-darkmode .character-sheet select {
|
||
background: #2b2b2b;
|
||
color: #fff;
|
||
font-family: 'ImFellEnglishRoman';
|
||
}
|
||
|
||
.character-sheet input.transparent {
|
||
background: transparent;
|
||
line-height: 16px;
|
||
height: auto;
|
||
padding: 5px 5px 0;
|
||
}
|
||
|
||
.character-sheet input:focus {
|
||
outline: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.character-sheet input.input-with-border {
|
||
border: 2px solid #e07072;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.character-sheet input.input-with-border:focus {
|
||
border-color: transparent;
|
||
}
|
||
|
||
.charactersheet {
|
||
padding: 0;
|
||
}
|
||
|
||
.character-sheet label {
|
||
font-weight: normal;
|
||
display: inline-block;
|
||
width: auto;
|
||
padding: 2px 6px;
|
||
color: #000;
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet label {
|
||
color: #fff;
|
||
}
|
||
|
||
.character-sheet textarea {
|
||
background-attachment: local;
|
||
background-color: #f1f4ff;
|
||
border: 2px solid #e07072;
|
||
font-family: 'ImFellEnglishRoman';
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
padding: 0 8px;
|
||
box-sizing: border-box;
|
||
height: auto;
|
||
resize: vertical;
|
||
margin: 0;
|
||
color: #000;
|
||
border-radius: 0;
|
||
transition: .3s all ease;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet textarea {
|
||
background: #2b2b2b;
|
||
color: #fff;
|
||
}
|
||
|
||
.character-sheet textarea:focus {
|
||
border-color: transparent;
|
||
outline: none;
|
||
}
|
||
|
||
.character-sheet .row--textarea-box textarea,
|
||
.character-sheet .row--textarea-box textarea:focus {
|
||
border: 0;
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="roll"],
|
||
.charsheet .character-sheet button[type="action"] {
|
||
position: relative;
|
||
cursor: pointer;
|
||
text-shadow: none;
|
||
padding: 4px 8px;
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
color: #000;
|
||
font-size: 16px;
|
||
display: block;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
transition: .3s all ease;
|
||
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="roll"]:hover,
|
||
.charsheet .character-sheet button[type="action"]:hover {
|
||
color: #d10000;
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="roll"]::before,
|
||
.charsheet .character-sheet button[type="action"]::before {
|
||
color: #ab0000;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
font-family: "dicefontd20";
|
||
content: "t";
|
||
vertical-align: middle;
|
||
margin-right: 4px;
|
||
transition: .3s all ease;
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="roll"]:hover::before,
|
||
.charsheet .character-sheet button[type="action"]:hover::before {
|
||
color: #d10000;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet button[type="roll"],
|
||
.sheet-darkmode .charsheet .character-sheet button[type="action"] {
|
||
color: #fff;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet button[type="roll"]::before,
|
||
.sheet-darkmode .charsheet .character-sheet button[type="action"]::before {
|
||
color: #fff;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet button[type="roll"]:hover,
|
||
.sheet-darkmode .charsheet .character-sheet button[type="action"]:hover {
|
||
color: #d10000;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet button[type="roll"]:hover::before,
|
||
.sheet-darkmode .charsheet .character-sheet button[type="action"]:hover::before {
|
||
color: #d10000;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"],
|
||
.charsheet .character-sheet input[type="radio"] {
|
||
width: auto;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
height: 36px;
|
||
width: 36px;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
border: 2px solid #e07072;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"]::after,
|
||
.charsheet .character-sheet input[type="radio"]::after {
|
||
content: "⤫";
|
||
position: absolute;
|
||
transform: scale(0);
|
||
color: #000;
|
||
font-size: 36px;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: block;
|
||
opacity: 0;
|
||
transition: .3s all ease;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet input[type="checkbox"]:after {
|
||
color: #fff;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"]:checked::after,
|
||
.charsheet .character-sheet input[type="radio"]:checked::after {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="number"] {
|
||
width: 100%;
|
||
padding: 0;
|
||
text-align: center;
|
||
font-family: 'Proxima Nova';
|
||
border: 2px solid #e07072;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="number"]:focus {
|
||
border-color: transparent;
|
||
}
|
||
|
||
/* Custom modules */
|
||
.character-sheet {
|
||
background-color: #fefefe;
|
||
box-sizing: border-box;
|
||
padding: 8px 12px;
|
||
color: #000;
|
||
font-family: 'IMFE';
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
min-width: 1000px;
|
||
max-width: 1150px;
|
||
margin: auto;
|
||
text-align: left;
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet {
|
||
background: #1f1f1f;
|
||
color: #fff;
|
||
}
|
||
|
||
.sheet-darkmode .sheetform {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.character-sheet .logo {
|
||
max-height: 50px;
|
||
margin: auto;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.character-sheet .logo--dark-mode {
|
||
display: none;
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet .logo {
|
||
display: none;
|
||
}
|
||
|
||
.sheet-darkmode .character-sheet .logo--dark-mode {
|
||
display: block;
|
||
}
|
||
|
||
.sygnet-background__wrapper {
|
||
position: relative;
|
||
}
|
||
|
||
.sygnet-background {
|
||
background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Dragon_Riders/Images/sygnet-red.png);
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
width: 400px;
|
||
height: 400px;
|
||
position: absolute;
|
||
z-index: -1;
|
||
opacity: .35;
|
||
}
|
||
|
||
.col-hr {
|
||
position: relative;
|
||
}
|
||
|
||
.col-hr::before,
|
||
.col-hr::after {
|
||
content: "";
|
||
width: 3px;
|
||
height: 100%;
|
||
top: 0;
|
||
bottom: 0;
|
||
position: absolute;
|
||
/* background-color: #831811; */
|
||
background-image: linear-gradient(#831811 95%, transparent);
|
||
background-size: cover;
|
||
}
|
||
|
||
.col-hr::before {
|
||
left: calc(50% - 4px);
|
||
}
|
||
|
||
.col-hr::after {
|
||
width: 2px;
|
||
left: calc(50% + 2px);
|
||
}
|
||
|
||
.col-hr .col-6 {
|
||
padding: 0 28px;
|
||
;
|
||
}
|
||
|
||
.title {
|
||
font-size: 20px;
|
||
line-height: 32px;
|
||
font-weight: normal;
|
||
position: relative;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.title::after {
|
||
content: "";
|
||
width: 200px;
|
||
height: 2px;
|
||
background-color: #e07072;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.subtitle {
|
||
font-weight: normal;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.sheet-darkmode .title,
|
||
.sheet-darkmode .subtitle {
|
||
color: #fff;
|
||
}
|
||
|
||
.input-with-label {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.input-with-label label {
|
||
margin: 2px 0 0;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.input-with-label input,
|
||
.input-with-label select {
|
||
width: 100%;
|
||
margin: 0 0 0 4px;
|
||
}
|
||
|
||
.input-with-label-textarea {
|
||
margin-bottom: 4px;
|
||
position: relative;
|
||
}
|
||
|
||
.input-with-label-textarea label {
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
top: 2px;
|
||
padding-left: 0;
|
||
left: 8px;
|
||
}
|
||
|
||
.attr-row__wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
flex-direction: column;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.attr-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.main-attr {
|
||
position: relative;
|
||
width: 68px;
|
||
height: 68px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.charsheet .character-sheet .main-attr input[type="number"] {
|
||
border-radius: 100%;
|
||
font-size: 36px;
|
||
height: 100%;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.charsheet .character-sheet .main-attr .checkbox-label {
|
||
border-radius: 100%;
|
||
position: absolute;
|
||
top: -4px;
|
||
left: -4px;
|
||
z-index: 2;
|
||
margin: 0;
|
||
}
|
||
|
||
.charsheet .character-sheet .main-attr input[type="radio"] {
|
||
border-radius: 100%;
|
||
width: 26px;
|
||
height: 26px;
|
||
background: #f1f4ff;
|
||
}
|
||
|
||
.charsheet .character-sheet .main-attr input[type="radio"]::after {
|
||
content: "";
|
||
background: #414141;
|
||
top: 4px;
|
||
left: 4px;
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet .main-attr input[type="radio"] {
|
||
background: #1f1f1f;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet .main-attr input[type="radio"]::after {
|
||
background: #fff;
|
||
}
|
||
|
||
.attr-label {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.charsheet .character-sheet .attr-label input[type="number"] {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 100%;
|
||
font-size: 16px;
|
||
padding: 0;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
line-height: 26px;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.attr-label label {
|
||
margin: 0;
|
||
}
|
||
|
||
.inputs-box {
|
||
display: flex;
|
||
border: 2px solid #e07072;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.inputs-box input {
|
||
width: 100%;
|
||
}
|
||
|
||
.charsheet .character-sheet .inputs-box input[type="number"] {
|
||
width: 50px;
|
||
border: none;
|
||
border-right: 2px solid #e07072;
|
||
}
|
||
|
||
.states-table {
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.states-table .states-table__th {
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
padding-top: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.states-table .grid-item {
|
||
font-size: 18px;
|
||
}
|
||
|
||
.states-table .states-table__th.states-table__main-title {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.charsheet .character-sheet .checkbox-label.small-checkbox input[type="checkbox"] {
|
||
width: 28px;
|
||
height: 28px;
|
||
}
|
||
|
||
.charsheet .character-sheet .checkbox-label.small-checkbox input[type="checkbox"]::after {
|
||
font-size: 28px;
|
||
line-height: 28px;
|
||
}
|
||
|
||
.charsheet .character-sheet .states-table .checkbox-label {
|
||
position: relative;
|
||
background-color: #f1f4ff;
|
||
padding: 0;
|
||
}
|
||
|
||
.sheet-darkmode .charsheet .character-sheet .states-table .checkbox-label {
|
||
background-color: #1f1f1f;
|
||
}
|
||
|
||
.charsheet .character-sheet .checkbox-label input[type="checkbox"] {
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.charsheet .character-sheet .states-table .checkbox-label--dashed input[type="checkbox"] {
|
||
border-style: dashed;
|
||
opacity: .6;
|
||
}
|
||
|
||
.charsheet .character-sheet .states-table .checkbox-label span {
|
||
position: absolute;
|
||
top: 2px;
|
||
bottom: 0px;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
opacity: .4;
|
||
z-index: 0;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"].states-table__small-checkbox {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"].states-table__small-checkbox::after {
|
||
font-size: 24px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.states-table__attr-label {
|
||
justify-content: center;
|
||
}
|
||
|
||
.states-table__attr-label input[type="checkbox"],
|
||
.states-table__attr-label input[type="checkbox"] + input {
|
||
opacity: .4;
|
||
}
|
||
|
||
.states-table__attr-label input[type="checkbox"]:checked,
|
||
.states-table__attr-label input[type="checkbox"]:checked + input {
|
||
opacity: 1;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes {
|
||
display: flex;
|
||
margin: auto;
|
||
width: 32px;
|
||
border: 2px solid #e07072;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
position: relative;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes .checkbox-label {
|
||
padding: 0;
|
||
margin: 0;
|
||
display: inherit;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes--dashed {
|
||
border-style: dashed;
|
||
opacity: .6;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes::before {
|
||
content: "";
|
||
display: block;
|
||
transform: rotate(45deg);
|
||
width: 44px;
|
||
border-bottom: 2px dashed #e07072;
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 15px;
|
||
left: -6px;
|
||
opacity: .5;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes .checkbox-label:first-child {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes input[type="checkbox"] {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes .checkbox-label:first-child input[type="checkbox"] {
|
||
border-top: 1px solid #757575;
|
||
border-right: 1px solid #757575;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes .checkbox-label:last-child input[type="checkbox"] {
|
||
border-left: 1px solid #757575;
|
||
border-bottom: 1px solid #757575;
|
||
}
|
||
|
||
.charsheet .character-sheet .double-checkboxes input[type="checkbox"]:after {
|
||
line-height: 18px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.throws-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"].throws-table__checkbox {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: inline-block;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.charsheet .character-sheet input[type="checkbox"].throws-table__checkbox::after {
|
||
font-size: 24px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.throws-table__checkbox + input[type="number"],
|
||
.throws-table__checkbox {
|
||
opacity: .4;
|
||
}
|
||
|
||
.throws-table__checkbox:checked + input[type="number"],
|
||
.throws-table__checkbox:checked {
|
||
opacity: 1;
|
||
}
|
||
|
||
.label-hover {
|
||
display: block;
|
||
position: absolute;
|
||
background: white;
|
||
color: #000;
|
||
font-weight: normal;
|
||
z-index: 10;
|
||
padding: 20px;
|
||
width: 400px;
|
||
height: fit-content;
|
||
visibility: hidden;
|
||
font-family: 'ImFellEnglishRoman';
|
||
opacity: 0;
|
||
box-shadow: 0 3px 15px rgba(0, 0, 0, .1);
|
||
transition: visibility 0s linear 0.3s, opacity 0.3s linear;
|
||
text-align: left;
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
text-overflow: ellipsis;
|
||
overflow: visible;
|
||
}
|
||
|
||
label:hover .label-hover,
|
||
button:hover .label-hover {
|
||
visibility: visible;
|
||
opacity: 1;
|
||
transition-delay: .5s;
|
||
}
|
||
|
||
.attr-buttons {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="action"].button-up::before,
|
||
.charsheet .character-sheet button[type="action"].button-down::before {
|
||
display: none;
|
||
}
|
||
|
||
.charsheet .character-sheet button[type="action"].button-up,
|
||
.charsheet .character-sheet button[type="action"].button-down {
|
||
padding: 0;
|
||
color: #e07072;
|
||
}
|
||
|
||
.button-up::after,
|
||
.button-down::after {
|
||
position:relative;
|
||
font-family:"Pictos";
|
||
content: "4";
|
||
font-size: 24px;
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.button-up::after {
|
||
-ms-transform: rotate(-90deg); /* IE 9 */
|
||
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.button-down::after {
|
||
-ms-transform: rotate(90deg); /* IE 9 */
|
||
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* Chrome, Safari, Edge, Opera */
|
||
.character-sheet .attr-row input::-webkit-outer-spin-button,
|
||
.character-sheet .attr-row input::-webkit-inner-spin-button,
|
||
.character-sheet .throws-table input::-webkit-outer-spin-button,
|
||
.character-sheet .throws-table input::-webkit-inner-spin-button,
|
||
.character-sheet .states-table input::-webkit-outer-spin-button,
|
||
.character-sheet .states-table input::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Firefox */
|
||
.character-sheet .attr-row input[type=number],
|
||
.character-sheet .throws-table input[type=number],
|
||
.character-sheet .states-table input[type=number] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
|
||
/* Roll Template */
|
||
.sheet-rolltemplate-dragonriders .sheet-template-wrap {
|
||
font-family: 'IMFE';
|
||
background-color: #fefefe;
|
||
color: #000;
|
||
position: relative;
|
||
padding: 6px;
|
||
margin-top: 38px;
|
||
margin: 0 auto 10px;
|
||
border: 2px solid #e07072;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
overflow: hidden;
|
||
z-index: 1;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-wrap::before {
|
||
content: "";
|
||
background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Velczer/CharacterSheets/master/Smoczy%2520Je%u017Adzcy/Images/sygnet-red.png);
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
opacity: .25;
|
||
left: -40%;
|
||
top: 47%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-wrap::after {
|
||
content: "";
|
||
background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/Velczer/CharacterSheets/master/Smoczy%2520Je%u017Adzcy/Images/sygnet-red.png);
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
opacity: .25;
|
||
right: -60%;
|
||
top: -24%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.sheet-rolltemplate-darkmode.sheet-rolltemplate-dragonriders .sheet-template-wrap {
|
||
background: #1f1f1f;
|
||
color: #fff;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-header {
|
||
font-size: 16px;
|
||
text-align: center;
|
||
background-position: center top;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-header span {
|
||
display: block;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-header a {
|
||
color: #000;
|
||
}
|
||
|
||
.sheet-rolltemplate-darkmode.sheet-rolltemplate-dragonriders .sheet-template-wrap .sheet-template-header a {
|
||
color: #fff;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-roll-results-title {
|
||
font-size: 20px;
|
||
text-align: center;
|
||
padding: 4px 0px;
|
||
margin-bottom: 12px;
|
||
text-shadow: 1px 1px 10px #ababab;
|
||
}
|
||
|
||
.sheet-rolltemplate-darkmode.sheet-rolltemplate-dragonriders .sheet-template-roll-results-title {
|
||
text-shadow: 1px 1px 10px #000000;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-roll-results {
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: space-between;
|
||
text-transform: uppercase;
|
||
font-size: 28px;
|
||
margin: 6px 0;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-roll-success-small-text {
|
||
text-align: center;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-roll-results span.sheet-template-base-roll {
|
||
opacity: 0;
|
||
position: absolute;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-roll-results .sheet-template-roll-success span.inlinerollresult {
|
||
width: 100%;
|
||
display: inline-block;
|
||
margin: 0;
|
||
border: 0;
|
||
padding: 0;
|
||
text-align: center;
|
||
line-height: 36px;
|
||
background: transparent;
|
||
font-size: 26px;
|
||
color: #000;
|
||
width: auto;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-circle {
|
||
position: relative;
|
||
height: 50px;
|
||
width: 50px;
|
||
margin: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
font-family: 'Proxima Nova';
|
||
border: 2px solid #e07072;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
background: #f1f4ff;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-presence,
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-powers {
|
||
display: flex;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-powers {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-presence > div {
|
||
width: 50%;
|
||
}
|
||
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-presence > div:last-child,
|
||
.sheet-rolltemplate-dragonriders .sheet-template-dragon-powers > div:last-child {
|
||
text-align: right;
|
||
}
|
||
|
||
/* Repeating sections */
|
||
|
||
.repcontrol {
|
||
display: flex;
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.repcontrol .repcontrol_edit {
|
||
margin-left: auto;
|
||
order: 1;
|
||
}
|
||
|
||
.repcontrol button {
|
||
background: #fff;
|
||
color: #e07072;
|
||
border-radius: 0;
|
||
border-color: #000;
|
||
transition: all 0.2s;
|
||
font-family: pictos;
|
||
font-size: 0;
|
||
font-weight: bold;
|
||
line-height: 8px;
|
||
padding: 6px 4px 1px;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.sheet-darkmode .repcontrol button {
|
||
background-color: #2b2b2b;
|
||
border-color: #e07072;
|
||
|
||
}
|
||
|
||
.repcontrol button:hover {
|
||
color: green;
|
||
border-color: green;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.repitem {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.repitem input,
|
||
.repitem select {
|
||
width: 100%;
|
||
margin-bottom: 6px;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
border: 2px solid #e07072;
|
||
}
|
||
|
||
.repitem input:focus,
|
||
.repitem select:focus {
|
||
border-color: transparent;
|
||
}
|
||
|
||
.charsheet .repitem input[type="number"] {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
z-index: 1;
|
||
position: relative;
|
||
line-height: 26px;
|
||
box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
|
||
}
|
||
|
||
.fieldset-labels {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.fieldset-labels .mini-title {
|
||
justify-content: flex-start;
|
||
padding-left: 5px;
|
||
}
|
||
|
||
.repitem {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.repitem input,
|
||
.repitem select {
|
||
width: 96%;
|
||
margin-right: 6px;
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
.repitem input[type="checkbox"] {
|
||
width: auto;
|
||
transform: scale(1.5);
|
||
flex: unset;
|
||
margin-right: 10px;
|
||
margin-top: 10px;
|
||
} |