mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 03:40:32 +00:00
Medieve
1eca222947
* New Sheet - Magical Land of Yeld * Rename magical-land-of-yeld.json to sheet.json * Update magical-land-of-yeld.css Bugfix to remove spinner wheels on inputs in firefox
350 lines
7.5 KiB
CSS
350 lines
7.5 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Bungee+Inline|Coming+Soon|Miltonian|Sedgwick+Ave&display=swap');
|
|
|
|
.sheet-characterwrapper {
|
|
|
|
}
|
|
.sheet-maintitle {
|
|
font-size: 55px;
|
|
color: #348b71;
|
|
display: block;
|
|
text-align:center;
|
|
font-family: 'Bungee Inline', cursive;
|
|
}
|
|
/*-------------- Sheet Tabs --------------*/
|
|
/*Configure the tab buttons*/
|
|
.sheet-front,
|
|
.sheet-side,
|
|
.sheet-back {
|
|
display: none;
|
|
margin: auto;
|
|
}
|
|
|
|
/* show the selected tab */
|
|
.sheet-tabstoggle[value="front"] ~ div.sheet-front,
|
|
.sheet-tabstoggle[value="side"] ~ div.sheet-side,
|
|
.sheet-tabstoggle[value="back"] ~ div.sheet-back {
|
|
display: block;
|
|
}
|
|
.sheet-front {
|
|
width: calc(100% - 40px);
|
|
margin: auto;
|
|
}
|
|
/*-------------- Green Border ------------*/
|
|
.sheet-green-border {
|
|
font-family: 'Sedgwick Ave', cursive;
|
|
background: #348b71;
|
|
border: 8px double white;
|
|
border-bottom-color: #b7e3d6;
|
|
border-radius: 15px;
|
|
padding: 5px 8px;
|
|
color: white;
|
|
font-size: 14px;
|
|
z-index: 1;
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.sheet-green-border input[type="text"] {
|
|
flex: 2;
|
|
padding-left: 15px;
|
|
}
|
|
.sheet-green-border input {
|
|
padding: 0px 5px;
|
|
background: none;
|
|
border: none;
|
|
color: #ffccff;
|
|
font-size: 14px;
|
|
}
|
|
.sheet-green-border input:hover {
|
|
background-color: #006666;
|
|
}
|
|
/*----------- Table CSS ---------------*/
|
|
.sheet-greenzebra {
|
|
border: 2px solid black;
|
|
margin-top: -2px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
.sheet-greenzebra th {
|
|
background-color: black;
|
|
color: white;
|
|
font-size: .8em;
|
|
text-align: center;
|
|
}
|
|
.sheet-greenzebra tr:nth-child(odd) {
|
|
background-color: #b7e3d6;
|
|
}
|
|
.sheet-friendtable tr td:first-child {
|
|
border-right: 2px solid #348b71;
|
|
}
|
|
.sheet-friendtable tr td:last-child {
|
|
border-left: 2px solid #348b71;
|
|
}
|
|
.sheet-blacktable td {
|
|
border-right: 2px solid #348b71;
|
|
border-left: 2px solid #348b71;
|
|
}
|
|
.sheet-blacktable td:last-child {border-right-color: black;}
|
|
.sheet-blacktable td:first-child {border-left-color: black;}
|
|
.sheet-blacktable tr:last-child td {border-bottom-color: black;}
|
|
|
|
.sheet-blacktable table {
|
|
border: 2px solid black;
|
|
}
|
|
.sheet-blacktable td:first-child {width: 30%;}
|
|
.sheet-blacktable td:last-child {width: 30px;}
|
|
.sheet-blacktable td:nth-child(3) {width: 100px;}
|
|
.sheet-greenzebra td {padding: 0px 5px;}
|
|
.sheet-greenzebra input[type="text"] {
|
|
font-family: 'Coming Soon', cursive;
|
|
padding: 0px 5px;
|
|
background: none;
|
|
border: none;
|
|
color: black;
|
|
font-size: 14px;
|
|
width: 100%;
|
|
}
|
|
.sheet-greenzebra input[type=number] {
|
|
background: none;
|
|
font-family: 'Sedgwick Ave', cursive;
|
|
font-size: 14px;
|
|
font-weight: bolder;
|
|
border: none;
|
|
text-align: center;
|
|
width: 30px;
|
|
height: 18px;
|
|
line-height: normal;
|
|
}
|
|
.sheet-shepherdtable td {
|
|
|
|
}
|
|
/*----------- Flexbox CSS --------------*/
|
|
|
|
.sheet-flexrow {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
}
|
|
.sheet-flexcol {
|
|
display: flex;
|
|
flex-flow: column;
|
|
flex: 1;
|
|
}
|
|
.sheet-largeflex {
|
|
flex: 2;
|
|
}
|
|
|
|
.sheet-flexjustify {
|
|
justify-content: space-around;
|
|
}
|
|
.sheet-subcontent {width: calc(100% - 24px); margin-left: auto; margin-right: auto; text-align: center;}
|
|
|
|
textarea {
|
|
font-family: 'Coming Soon', cursive;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
#b7e3d6,
|
|
#b7e3d6 18px,
|
|
white 18px,
|
|
white);
|
|
background-size: 100% 36px;
|
|
width:100%;
|
|
border: 2px solid #006666;
|
|
position: relative;
|
|
z-index:0;
|
|
margin-top: -2px;
|
|
resize: none;
|
|
padding: 0px 5px;
|
|
box-sizing : border-box;
|
|
}
|
|
textarea:hover {
|
|
border: 2px solid #39a887;
|
|
}
|
|
.sheet-green-border input[type="number"] {
|
|
flex: 0;
|
|
width: 50px;
|
|
text-align: center;
|
|
}
|
|
/*------------------- Input Styling ---------------- */
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance:textfield;
|
|
margin: 0;
|
|
}
|
|
.charsheet input[type='number'] {
|
|
-moz-appearance:textfield !important;
|
|
}
|
|
|
|
textarea.sheet-smalltext {height: calc(calc(4 * calc(1em + 6px)) + 4px);}
|
|
textarea.sheet-largetext {height: calc(calc(21 * calc(1em + 6px)) + 4px);}
|
|
|
|
/*--------------- Attribute Styling ------------------- */
|
|
.sheet-attribute-wrapper {
|
|
width: 80px;
|
|
padding-top: 5px;
|
|
border: 8px double white;
|
|
border-radius: 0 0 50px 50px;
|
|
background-color: #348b71;
|
|
text-align: center;
|
|
}
|
|
.charsheet .sheet-attribute-wrapper button[type=roll]:before {content:"";}
|
|
.charsheet .sheet-attribute-wrapper button[type=roll] {
|
|
font-family: 'Sedgwick Ave', cursive;
|
|
font-size: 18px;
|
|
border: none;
|
|
color: white;
|
|
background: none;
|
|
padding: 4px 8px;
|
|
}
|
|
.sheet-bubble-wrapper {
|
|
border-radius: 100%;
|
|
background: white;
|
|
text-align: center;
|
|
height: 50px;
|
|
width: 50px;
|
|
margin: auto;
|
|
margin-top: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.sheet-bubble-wrapper input[type=number] {
|
|
font-family: 'Sedgwick Ave', cursive;
|
|
font-size: 18px;
|
|
font-weight: bolder;
|
|
border: none;
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
width: 30px;
|
|
}
|
|
.sheet-bubble-wrapper .sheet-subscript {
|
|
font-family: 'Sedgwick Ave', cursive;
|
|
margin-top: -5px;
|
|
}
|
|
/*--------------- Equipment Styling -------------------*/
|
|
.sheet-equipmentwrapper {
|
|
text-align: left;
|
|
justify-content: start;
|
|
width: 200px;
|
|
padding: 5px;
|
|
flex-basis: 170px;
|
|
flex-grow: 1;
|
|
}
|
|
.sheet-equipmentwrapper input[type=text] {width: 100%;}
|
|
.sheet-equipmentwrapper input[type=number] {width: 30px;}
|
|
.sheet-equipmentwrapper table {border-collapse:collapse;}
|
|
.sheet-equipmentwrapper table td {padding:0px; text-align: center;}
|
|
.sheet-equipmentwrapper textarea {margin:0px; display: block;}
|
|
.sheet-equipmentwrapper input[type=number] {
|
|
border-radius: 100%;
|
|
background: black;
|
|
text-align: center;
|
|
height: 40px;
|
|
width: 40px;
|
|
margin: auto;
|
|
font-size: 20px;
|
|
padding-top: 4px;
|
|
}
|
|
/*--------------- Proficiency Icons -----------------------*/
|
|
.sheet-but_weaponprof {
|
|
display: inline-block;
|
|
width: auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
.sheet-but_weaponprof input {
|
|
display: none;
|
|
}
|
|
.sheet-but_weaponprof {
|
|
border: 2px solid black;
|
|
}
|
|
.sheet-but_weaponprof input[type="checkbox"] + img {
|
|
filter: contrast(50%);
|
|
opacity: .3;
|
|
}
|
|
.sheet-but_weaponprof input[type="checkbox"]:checked + img {
|
|
filter: contrast(100%);
|
|
opacity: 1;
|
|
}
|
|
|
|
/*-------------- Key Icons -----------------*/
|
|
.sheet-keys-table {
|
|
background: repeating-linear-gradient(
|
|
to right,
|
|
#b7e3d6,
|
|
#b7e3d6 40px,
|
|
white 40px,
|
|
white);
|
|
padding: 0px;
|
|
background-size: 80px 100%;
|
|
width: 280px;
|
|
height: 90px;
|
|
margin: auto;
|
|
border: 2px solid #006666;
|
|
margin-top: -2px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.sheet-keylabel {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 90px;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
.sheet-keylabel input {
|
|
display: none;
|
|
}
|
|
|
|
.sheet-keylabel input[type="checkbox"] + img {
|
|
opacity: .5;
|
|
}
|
|
.sheet-keylabel input[type="checkbox"]:checked + img {
|
|
opacity: 1;
|
|
}
|
|
/*--------------- Miscellaneous Styling --------------- */
|
|
.sheet-full {color: #348b71;}
|
|
.sheet-subscript {font-size: .8em;}
|
|
.sheet-equipicon {
|
|
position: absolute;
|
|
right: -5px;
|
|
top: -5px;
|
|
width: 30px;
|
|
height: 30px;
|
|
border: 2px solid #348b71;
|
|
}
|
|
.sheet-greenzebra input[type=number].sheet-shepherddice {
|
|
border-radius: 100%;
|
|
background: white;
|
|
color: black;
|
|
text-align: center;
|
|
height: 40px;
|
|
width: 40px;
|
|
margin: auto;
|
|
font-size: 20px;
|
|
padding-top: 4px;
|
|
}
|
|
.charsheet button.sheet-tabbutton {
|
|
font-family: Miltonian;
|
|
font-size: 20px;
|
|
color: white;
|
|
background: black;
|
|
width: 100px;
|
|
border: 5px double white;
|
|
margin-bottom: 20px;
|
|
}
|
|
.charsheet input[type=number].sheet-dice-full {
|
|
background: black;
|
|
color: #348b71;
|
|
width:30px;
|
|
}
|
|
.charsheet input[type=number].sheet-dice-now {
|
|
background: white;
|
|
color: black;
|
|
width:30px;
|
|
} |