Files
l5rx-chiaroscuro/system/styles/scss/twentyquestions.scss
2022-02-16 17:20:56 +01:00

206 lines
5.7 KiB
SCSS

&.twenty-questions-dialog {
.sheet-tabs {
position: fixed;
flex-direction: column;
background: url("../assets/imgs/bg-20nav.webp") no-repeat;
background-size: cover;
width: 4rem;
height: 41.58rem;
margin: 1%;
line-height: 5rem;
padding: 0.25rem;
border-bottom: 0 none;
}
.errors {
position: sticky;
top: 1rem;
left: 1rem;
z-index: 999;
width: calc(100% - 1rem);
background-color: $l5r5e-red;
border: 1px solid $dark-red;
color: $white;
border-radius: 1rem;
text-align: center;
line-height: 2rem;
}
h3 {
font-size: 1.25rem;
color: $l5r5e-label;
text-shadow: 0 0 $l5r5e-black-light;
margin: 2rem 0 0.5rem 1rem;
}
nav {
.item {
color: $black;
font-size: 2rem;
font-weight: bold;
background-color: $l5r5e-white-light;
&.active,
&:hover {
color: $white;
background-color: rgba(73, 12, 11, 0.85);
--notchSize: 0.5rem;
clip-path: polygon(
0% var(--notchSize),
var(--notchSize) 0%,
calc(100% - var(--notchSize)) 0%,
100% var(--notchSize),
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
var(--notchSize) 100%,
0% calc(100% - var(--notchSize))
);
}
&:hover {
background-color: $l5r5e-label;
}
}
}
article {
padding: 2% 2% 2% 18%;
label {
&.full {
display: block;
width: 100%;
text-align: right;
font-size: 1rem;
input {
display: inline;
width: 80%;
float: right;
text-align: left;
margin-left: 0.5rem;
}
}
}
> label {
font-size: 1rem;
padding: 0 0 0 1rem;
line-height: 2rem;
> * {
line-height: 1rem;
}
}
table {
width: 100%;
text-align: center;
tr {
th {
color: $l5r5e-label;
font-weight: normal;
}
td {
vertical-align: top;
line-height: 2rem;
border: 1px solid $l5r5e-title;
font-size: 0.85rem;
padding: 0.25rem;
> * {
line-height: 1rem;
}
> ul {
li {
line-height: 2rem;
> * {
line-height: 1rem;
}
}
}
&.done {
border: 1px solid $l5r5e-earth;
box-shadow: 0 1px 5px $l5r5e-earth;
}
}
}
}
select {
height: 2rem;
color: $l5r5e-bold;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 0.25rem;
padding: 0 0.25rem;
margin: 0.25rem;
width: calc(100% - 0.5rem);
}
textarea {
color: $l5r5e-bold;
background: rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.5);
margin: 0 0.25rem 1rem;
}
hr {
border-top: 1px solid $l5r5e-black-light;
}
a.entity-link,
a.inline-roll {
color: $l5r5e-label;
background: rgba(255, 255, 255, 0.25);
border: 1px solid $l5r5e-black-light;
i {
color: $l5r5e-label;
}
}
.tq-drag-n-drop {
border: 0 none;
padding: 0;
}
.third {
width: 230px;
}
.fifty {
width: 49%;
}
.or {
width: 100px;
}
.dropbox {
min-height: 75px;
}
.checklist {
margin: 0.25rem 0.25rem 1rem;
strong {
display: block;
width: 100%;
color: $l5r5e-bold;
}
label {
font-size: 0.85rem;
flex: 0 0 auto;
margin: 0 0.25rem 0.25rem;
padding: 0 0.5rem;
color: #5a6e5a;
background: rgba(255, 255, 255, 0.5);
border: 1px solid #5a6e5a;
border-radius: 1rem;
&.technique {
padding: 0.25rem;
margin: 0.25rem;
border-radius: 0;
white-space: nowrap;
}
}
input {
margin: 0.25rem 0 0 0;
height: 0.65rem;
width: 0.65rem;
}
}
#generchar_disclaimer {
color: $l5r5e-red;
font-weight: bold;
font-size: 1.25rem;
text-align: center;
flex: 100%;
padding: 1rem 0;
}
.next {
margin: 2rem 0 4rem;
}
.autocomplete {
width: calc(100% - 2px);
}
}
}