mirror of
https://github.com/Nighthawk42/roll20-character-sheets.git
synced 2026-08-30 19:52:29 +00:00
414 lines
8.7 KiB
CSS
414 lines
8.7 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Skranji&family=Pompiere&display=swap');
|
|
|
|
.no-spinners {
|
|
-moz-appearance: textfield;
|
|
}
|
|
.no-spinners::-webkit-outer-spin-button,
|
|
.no-spinners::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
#content input[type="number"] {
|
|
width: 5em;
|
|
padding: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
#content textarea {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
resize: vertical;
|
|
}
|
|
|
|
#content {
|
|
width: 800px;
|
|
position: relative;
|
|
border: 5px #233259 solid;
|
|
padding: 10px;
|
|
background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Kemi/images/Kemi-background.jpg');
|
|
background-size: cover;
|
|
background-position-x: right;
|
|
}
|
|
|
|
#content h1,
|
|
#content h2 {
|
|
font-family: Skranji;
|
|
font-variant: small-caps;
|
|
color: #233259;
|
|
text-shadow:
|
|
2px 0 #b39545,
|
|
-2px 0 #fce46a,
|
|
0 2px #b39545,
|
|
0 -2px #fff9d8,
|
|
1px 1px #b39545,
|
|
-1px -1px #fce46a,
|
|
1px -1px #b39545,
|
|
-1px 1px #fce46a;
|
|
}
|
|
#content {
|
|
font-family: Merriweather;
|
|
}
|
|
|
|
#content input,
|
|
#content select,
|
|
#content textarea {
|
|
border-radius: 0;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
#content input {
|
|
height: 2.2em;
|
|
}
|
|
|
|
/*****************************************************************************/
|
|
/************** LAYOUT **************/
|
|
/*****************************************************************************/
|
|
|
|
#main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
#main .col {
|
|
text-align: center;
|
|
}
|
|
|
|
.v-space {
|
|
display: block;
|
|
height: 15px;
|
|
}
|
|
|
|
#identite > div,
|
|
#inventaire > div,
|
|
#attributs {
|
|
margin: 20px 5px;
|
|
}
|
|
|
|
/*****************************************************************************/
|
|
/************** TITLE **************/
|
|
/*****************************************************************************/
|
|
|
|
#title {
|
|
text-align: center;
|
|
}
|
|
|
|
#title img {
|
|
max-height: 150px;
|
|
}
|
|
|
|
/*****************************************************************************/
|
|
/************** IDENTITY **************/
|
|
/*****************************************************************************/
|
|
|
|
#identite input,
|
|
#identite textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
#identite #nom_xp {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
#identite #nom_xp > div:first-child {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
/*****************************************************************************/
|
|
/************** INVENTORY **************/
|
|
/*****************************************************************************/
|
|
|
|
|
|
|
|
#inventaire .repitem {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
#inventaire input[type="text"] {
|
|
width: 100%
|
|
}
|
|
|
|
#equipements .repcontainer {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
#inventaire input[name="attr_arme_degats"] {
|
|
width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
#inventaire input[name="attr_armure_protection"] {
|
|
width: 70px;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*****************************************************************************/
|
|
/************** ATTRIBUTES **************/
|
|
/*****************************************************************************/
|
|
|
|
#attributs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#attributs > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
|
|
#attributs > div > div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 5px;
|
|
margin: 5px 0px;
|
|
}
|
|
|
|
#attributs h3 {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#attributs select {
|
|
min-width: auto;
|
|
width: 120px;
|
|
}
|
|
|
|
#attributs #heka_dieux {
|
|
position: relative;
|
|
}
|
|
|
|
#attributs #heka_dieux .repcontrol {
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: -50px;
|
|
width: 50px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/*****************************************************************************/
|
|
/************** POINTS **************/
|
|
/*****************************************************************************/
|
|
|
|
#points {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 5px;
|
|
}
|
|
|
|
#points > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
#points > div > input[type="number"] {
|
|
border-radius: 50%;
|
|
height: 80px;
|
|
width: 80px;
|
|
font-size: xx-large;
|
|
}
|
|
|
|
#points #points_maat {
|
|
position: relative;
|
|
}
|
|
|
|
#points input[type="checkbox"] {
|
|
position: absolute;
|
|
bottom: 40px;
|
|
right: 0px;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* ---------------- PARAMETERS --------------- */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
#show_params_button,
|
|
#close_params_button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
border: 0;
|
|
font-size: 1.8em;
|
|
}
|
|
#show_params_button {
|
|
font-family: pictos;
|
|
background: 0;
|
|
color: #233259;
|
|
}
|
|
#show_params_button:hover {
|
|
color: #2a4c94;
|
|
}
|
|
#close_params_button {
|
|
background: red;
|
|
border-radius: 3px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
#close_params_button:hover {
|
|
background: #ad0000;
|
|
}
|
|
|
|
#params {
|
|
display: none;
|
|
|
|
position: absolute;
|
|
width: 70%;
|
|
top: 50px;
|
|
right: 50%;
|
|
transform: translateX(50%);
|
|
z-index: 2;
|
|
|
|
padding: 20px;
|
|
border: 5px black solid;
|
|
border-radius: 10px;
|
|
background: white;
|
|
}
|
|
#params span {
|
|
vertical-align: middle;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
input[name="attr_show_params"][value="1"] ~ #params {
|
|
display: block;
|
|
}
|
|
|
|
input[name="attr_show_params"][value="1"] ~ #title,
|
|
input[name="attr_show_params"][value="1"] ~ #main {
|
|
z-index: 1;
|
|
-webkit-filter: blur(4px);
|
|
-moz-filter: blur(4px);
|
|
-o-filter: blur(4px);
|
|
-ms-filter: blur(4px);
|
|
filter: blur(4px);
|
|
transition: 0.5s -webkit-filter linear;
|
|
transition: 0.5s -moz-filter linear;
|
|
transition: 0.5s -o-filter linear;
|
|
transition: 0.5s filter linear;
|
|
}
|
|
|
|
input[name="attr_param_use_heka"]:not([value="true"]) ~ #main .heka_component {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* ---------------- BOUTTONS FIELDSET --------------- */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
div.repcontrol{
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: row-reverse;
|
|
padding-right: 10px;
|
|
}
|
|
.repcontrol_add,
|
|
.repcontrol_edit {
|
|
opacity: 0.8;
|
|
position: relative;
|
|
/* remove effects */
|
|
box-shadow: none;
|
|
text-shadow:none;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
/* hide the text */
|
|
color: transparent;
|
|
font-size: 0px;
|
|
/* 0 width */
|
|
width: 0px;
|
|
padding: 0px;
|
|
}
|
|
.repcontrol_add {
|
|
left: 5px;
|
|
}
|
|
.repcontrol_edit {
|
|
right: 20px;
|
|
}
|
|
.repcontrol_add:hover,
|
|
.repcontrol_edit:hover,
|
|
.repcontrol_move:hover,
|
|
.repcontrol_del:hover{
|
|
opacity: 1.0;
|
|
outline: none;
|
|
background: none;
|
|
color: transparent;
|
|
}
|
|
.repcontrol_add:focus,
|
|
.repcontrol_edit:focus,
|
|
.repcontrol_move:focus,
|
|
.repcontrol_del:focus {
|
|
outline: none;
|
|
}
|
|
.repcontrol_move {
|
|
float: left;
|
|
}
|
|
.repcontrol_del {
|
|
float: right;
|
|
z-index: 5;
|
|
}
|
|
.repcontrol_add:before {
|
|
content: '+';
|
|
}
|
|
.repcontrol_edit:before {
|
|
content: 'y';
|
|
}
|
|
.repcontrol_add:before,
|
|
.repcontrol_edit:before {
|
|
visibility: visible;
|
|
font-family: pictos;
|
|
border: none;
|
|
font-size: 18px;
|
|
height: 18px;
|
|
width: 18px;
|
|
padding: 2px 0px 0px 0px;
|
|
color: #2a4c94;
|
|
}
|
|
.editmode ~ .repcontrol .repcontrol_edit:before {
|
|
content: '2';
|
|
}
|
|
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* ---------------- SHEET TEMPLATES --------------- */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.sheet-rolltemplate-roll .sheet-template-container {
|
|
background: #efd9b0;
|
|
border-bottom-left-radius: 50% 50%;
|
|
border-bottom-right-radius: 50% 50%;
|
|
border: 2px solid #004f6e;
|
|
text-align: center;
|
|
font-family: Pompiere, Merriweather, serif;
|
|
max-width: 270px;
|
|
margin: auto;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-template-header {
|
|
background: #f4bb54;
|
|
font-weight: bold;
|
|
padding: 5px;
|
|
color: #004f6e;
|
|
border-bottom: 4px #f4bb54 ridge;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-template-result {
|
|
padding: 5px;
|
|
}
|
|
.sheet-rolltemplate-roll .sheet-template-maat {
|
|
font-style: italic;
|
|
color: #004f6e;
|
|
} |