300 lines
5.8 KiB
CSS
300 lines
5.8 KiB
CSS
/*MAIN*/
|
|
|
|
|
|
.charsheet{
|
|
border-radius: 16px;
|
|
background: rgb(147, 112, 219);
|
|
background: linear-gradient(180deg, rgba(173,216,230,1) 0%, rgba(147,112,219,1) 36%,
|
|
rgba(219,112,147,1) 56%, rgba(147,112,219,1) 76%, rgba(173,216,230,1) 100%);
|
|
width: 100%;
|
|
color: indigo;
|
|
|
|
}
|
|
|
|
|
|
h1{
|
|
font-size: 40px;
|
|
color: indigo;
|
|
}
|
|
|
|
h2{
|
|
color: indigo;
|
|
}
|
|
|
|
h3{
|
|
color: indigo;
|
|
}
|
|
|
|
h4{
|
|
color: indigo;
|
|
}
|
|
|
|
/*CONTAINMENT*/
|
|
.row{
|
|
display: flex;
|
|
height: 180 px;
|
|
margin: auto;
|
|
color: indigo;
|
|
justify-content: space-between;
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
.first{
|
|
width: 100%;
|
|
min-width: 800px;
|
|
}
|
|
|
|
.second{
|
|
width: 80%;
|
|
min-width: 772px;
|
|
}
|
|
|
|
.third{
|
|
width: 70%;
|
|
min-width: 716px;
|
|
}
|
|
|
|
|
|
.enclosure{
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.wrapper{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
min-height:180px;
|
|
}
|
|
|
|
.inner{
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
|
|
.box{
|
|
display: flex;
|
|
direction: ltr;
|
|
resize: none;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
max-width: 250px;
|
|
min-width: 250px;
|
|
width: 100%;
|
|
max-height: 150px;
|
|
min-height: 150px;
|
|
padding: 5px;
|
|
border: 5px solid rebeccapurple;
|
|
border-radius: 12px;
|
|
font-size: 100%;
|
|
line-height: 115%;
|
|
color: black;
|
|
font-family: candal;
|
|
}
|
|
|
|
/*CONTAINER FORMATTING*/
|
|
|
|
|
|
.empty{
|
|
display: block;
|
|
|
|
}
|
|
|
|
.center{
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.flex-end{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
.flex-space-between{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.flex-space-evenly{
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
}
|
|
|
|
.flex-start{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.flex-column{
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.align-center{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
|
|
/*LABELING*/
|
|
|
|
|
|
|
|
/*INTERFACES*/
|
|
.cardpicker{
|
|
overflow: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*TEXT FIELDS*/
|
|
|
|
.cardtext{
|
|
padding: 3px;
|
|
text-align: center;
|
|
}
|
|
|
|
.phys.apt{
|
|
background: rgb(255,182,193);
|
|
background: linear-gradient(310deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%);
|
|
}
|
|
|
|
.phys.fort{
|
|
background: rgb(176,196,222);
|
|
background: linear-gradient(130deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%);
|
|
}
|
|
|
|
|
|
.ment.apt{
|
|
background: rgb(176,196,222);
|
|
background: linear-gradient(40deg, rgba(255,228,225,.6) 10%, rgba(176,196,222,.6) 40%, rgba(153,102,204,.6) 100%);
|
|
}
|
|
|
|
.ment.fort{
|
|
background: rgb(255,182,193);
|
|
background: linear-gradient(220deg, rgba(230,230,250,.6) 10%, rgba(255,182,193,.6) 40%, rgba(153,102,204,.6) 100%);
|
|
}
|
|
|
|
|
|
|
|
|
|
.perm{
|
|
background: rgb(216,191,216);
|
|
background: radial-gradient(circle, rgba(220,20,60,.6) 10%, rgba(221, 160, 221,.6) 50%, rgba(201,112,165,0) 90%)rgba(153,102,204,.6) 100%;
|
|
background-position: center;
|
|
}
|
|
|
|
/*FACE CARD TEXT CONTROL*/
|
|
|
|
/* hides the face card text*/
|
|
.charsheet .sheet-default,
|
|
.charsheet .sheet-thefool,
|
|
.charsheet .sheet-themagician,
|
|
.charsheet .sheet-thehighpriestess,
|
|
.charsheet .sheet-theempress,
|
|
.charsheet .sheet-theemperor,
|
|
.charsheet .sheet-thehierophant,
|
|
.charsheet .sheet-thelovers,
|
|
.charsheet .sheet-thechariot,
|
|
.charsheet .sheet-strength,
|
|
.charsheet .sheet-thehermit,
|
|
.charsheet .sheet-wheeloffortune,
|
|
.charsheet .sheet-justice,
|
|
.charsheet .sheet-thehangedman,
|
|
.charsheet .sheet-death,
|
|
.charsheet .sheet-temperance,
|
|
.charsheet .sheet-thedevil,
|
|
.charsheet .sheet-thetower,
|
|
.charsheet .sheet-thestar,
|
|
.charsheet .sheet-themoon,
|
|
.charsheet .sheet-thesun,
|
|
.charsheet .sheet-judgement,
|
|
.charsheet .sheet-theworld
|
|
{
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
/* show the selected face card */
|
|
.charsheet .sheet-facecardtoggle[value="default"] ~ div.sheet-default,
|
|
.charsheet .sheet-facecardtoggle[value="thefool"] ~ div.sheet-thefool,
|
|
.charsheet .sheet-facecardtoggle[value="themagician"] ~ div.sheet-themagician,
|
|
.charsheet .sheet-facecardtoggle[value="thehighpriestess"] ~ div.sheet-thehighpriestess,
|
|
.charsheet .sheet-facecardtoggle[value="theempress"] ~ div.sheet-theempress,
|
|
.charsheet .sheet-facecardtoggle[value="theemperor"] ~ div.sheet-theemperor,
|
|
.charsheet .sheet-facecardtoggle[value="thehierophant"] ~ div.sheet-thehierophant,
|
|
.charsheet .sheet-facecardtoggle[value="thelovers"] ~ div.sheet-thelovers,
|
|
.charsheet .sheet-facecardtoggle[value="thechariot"] ~ div.sheet-thechariot,
|
|
.charsheet .sheet-facecardtoggle[value="strength"] ~ div.sheet-strength,
|
|
.charsheet .sheet-facecardtoggle[value="thehermit"] ~ div.sheet-thehermit,
|
|
.charsheet .sheet-facecardtoggle[value="wheeloffortune"] ~ div.sheet-wheeloffortune,
|
|
.charsheet .sheet-facecardtoggle[value="justice"] ~ div.sheet-justice,
|
|
.charsheet .sheet-facecardtoggle[value="thehangedman"] ~ div.sheet-thehangedman,
|
|
.charsheet .sheet-facecardtoggle[value="death"] ~ div.sheet-death,
|
|
.charsheet .sheet-facecardtoggle[value="temperance"] ~ div.sheet-temperance,
|
|
.charsheet .sheet-facecardtoggle[value="thedevil"] ~ div.sheet-thedevil,
|
|
.charsheet .sheet-facecardtoggle[value="thetower"] ~ div.sheet-thetower,
|
|
.charsheet .sheet-facecardtoggle[value="thestar"] ~ div.sheet-thestar,
|
|
.charsheet .sheet-facecardtoggle[value="themoon"] ~ div.sheet-themoon,
|
|
.charsheet .sheet-facecardtoggle[value="thesun"] ~ div.sheet-thesun,
|
|
.charsheet .sheet-facecardtoggle[value="judgement"] ~ div.sheet-judgement,
|
|
.charsheet .sheet-facecardtoggle[value="theworld"] ~ div.sheet-theworld
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
/*for showing and changing elements*/
|
|
|
|
|
|
.charsheet .input-menu {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.charsheet .input-menu > * {
|
|
flex: 1;
|
|
}
|
|
|
|
.charsheet input.sheet-toggle-show:not(:checked) ~ div.sheet-body,
|
|
.charsheet input.sheet-toggle-hide:checked ~ div.sheet-body {
|
|
display: none;
|
|
}
|
|
|
|
.console {
|
|
|
|
box-sizing: content-box;
|
|
display: flex;
|
|
flex-wrap:wrap;
|
|
gap: 10px;
|
|
justify-content: space-evenly;
|
|
|
|
}
|
|
|
|
.text-input {
|
|
max-width: 300px;
|
|
margin: 2px;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.submit {
|
|
max-width: 200 px;
|
|
align-self: center;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|