918 lines
28 KiB
SCSS
918 lines
28 KiB
SCSS
|
@use "colors" as *;
|
||
|
|
@use "utility" as *;
|
||
|
|
@use "mixins" as *;
|
||
|
|
@import "_variables";
|
||
|
|
:root {
|
||
|
|
--box-shadow-inset: 1px 1px 3px 1px rgba(0, 0, 0, 0.36) inset;
|
||
|
|
--box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.36);
|
||
|
|
}
|
||
|
|
$tile-types: ("frame", "art", "unlinked", "default");
|
||
|
|
#slideshow-config,
|
||
|
|
.clickableImageContainer {
|
||
|
|
.empty-state {
|
||
|
|
@extend .padding-small;
|
||
|
|
background-color: var(--JTCS-elevation-BG-color);
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
text-align: center;
|
||
|
|
span.accent {
|
||
|
|
padding-inline: 0.15rem;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
&[data-type="art"] {
|
||
|
|
span.accent {
|
||
|
|
color: var(--data-art-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&[data-type="frame"] {
|
||
|
|
span.accent {
|
||
|
|
color: var(--data-frame-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#JTCSSettingsApplication,
|
||
|
|
#slideshow-config,
|
||
|
|
#JTCS-custom-dialog {
|
||
|
|
button > i {
|
||
|
|
margin-right: unset;
|
||
|
|
}
|
||
|
|
.window-content {
|
||
|
|
--color-shadow-primary: var(--JTCS-accent-color);
|
||
|
|
background: var(--JTCS-background-color);
|
||
|
|
.container {
|
||
|
|
border-bottom-left-radius: 5px;
|
||
|
|
border-bottom-right-radius: 5px;
|
||
|
|
border: 1px solid var(--JTCS-background-color-30);
|
||
|
|
}
|
||
|
|
|
||
|
|
--flow-space: 2em;
|
||
|
|
.flow {
|
||
|
|
@extend .flow;
|
||
|
|
}
|
||
|
|
.elevation-1 {
|
||
|
|
background: var(--JTCS-background-color);
|
||
|
|
}
|
||
|
|
.form-group,
|
||
|
|
.form-group-stacked,
|
||
|
|
.input-span {
|
||
|
|
button {
|
||
|
|
&.danger,
|
||
|
|
&.theme {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 300px;
|
||
|
|
margin-inline: auto;
|
||
|
|
// margin-right: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.has-floating-label {
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.file-picker-group {
|
||
|
|
align-items: stretch;
|
||
|
|
input {
|
||
|
|
flex: 1;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 450px;
|
||
|
|
border: 1px solid var(--JTCS-accent-color-20);
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
flex: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.color-picker-container {
|
||
|
|
input {
|
||
|
|
width: 100%;
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
align-items: stretch;
|
||
|
|
.color-picker-group {
|
||
|
|
flex: 0;
|
||
|
|
min-width: fit-content;
|
||
|
|
}
|
||
|
|
.color-actions {
|
||
|
|
flex: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group-stacked {
|
||
|
|
--flow-space: 1em;
|
||
|
|
p.notes {
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
select,
|
||
|
|
input,
|
||
|
|
label,
|
||
|
|
button {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
$selectors: (
|
||
|
|
"p:not(.inline-notification)",
|
||
|
|
".file-picker-group > label",
|
||
|
|
".color-picker-group > label",
|
||
|
|
"span:not(.input-span) label",
|
||
|
|
"li:not(.accent) label",
|
||
|
|
".icon-button:not(.danger):not(.danger-text)"
|
||
|
|
);
|
||
|
|
$selectors: join($selectors, returnAllHeadings());
|
||
|
|
// $headers: returnAllHeadings();
|
||
|
|
$properties: (
|
||
|
|
color: var(--JTCS-text-color-on-bg),
|
||
|
|
);
|
||
|
|
@include printSelectors($selectorList: $selectors, $propertyMap: $properties);
|
||
|
|
|
||
|
|
// remove all border-bottoms on headings
|
||
|
|
|
||
|
|
@include printSelectors(
|
||
|
|
$selectorList: returnAllHeadings(),
|
||
|
|
$propertyMap: (
|
||
|
|
border-bottom: unset,
|
||
|
|
color: var(--JTCS-accent-color),
|
||
|
|
)
|
||
|
|
);
|
||
|
|
|
||
|
|
// have labels highlight with accent color
|
||
|
|
.form-group,
|
||
|
|
.color-picker-group,
|
||
|
|
.file-picker-group,
|
||
|
|
.input-span {
|
||
|
|
&.has-floating-label {
|
||
|
|
input {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
--accent-color: var(--JTCS-accent-color);
|
||
|
|
label {
|
||
|
|
white-space: nowrap;
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:focus {
|
||
|
|
outline: 1px solid var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.form-group,
|
||
|
|
.form-group-stacked {
|
||
|
|
.input-span {
|
||
|
|
flex: 1;
|
||
|
|
width: fit-content;
|
||
|
|
max-width: fit-content;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// remove borders from spans and list items
|
||
|
|
span:not(.input-span):not(.tick-box):not(.tick-circle) {
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
li.tile-list-item:not(.new-tile-list-item) {
|
||
|
|
box-shadow: var(--JTCS-box-shadow-color) 0px 1px 3px;
|
||
|
|
background-color: var(--JTCS-tile-item-bg-color);
|
||
|
|
.actions .icon-button {
|
||
|
|
box-shadow: unset;
|
||
|
|
outline: unset;
|
||
|
|
background-color: unset;
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
transition: color 150ms ease-in-out;
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
box-shadow: unset;
|
||
|
|
outline: unset;
|
||
|
|
background-color: unset;
|
||
|
|
color: var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
&.active {
|
||
|
|
color: var(--JTCS-accent-color);
|
||
|
|
filter: drop-shadow(0px 0px 2px var(--JTCS-accent-color));
|
||
|
|
transform: scale(1);
|
||
|
|
transition: transform 150ms ease-in-out;
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
transform: scale(1.12);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// box-shadow: var(--JTCS-background-color-40) 0px 0px 0px 2px,
|
||
|
|
// var(--JTCS-background-color-60) 0px 4px 6px -1px, var(--JTCS-background-color-10) 0px 1px 0px inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="text"],
|
||
|
|
select {
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
border: 1px solid var(--JTCS-border-color);
|
||
|
|
background-color: var(--JTCS-input-background-color);
|
||
|
|
option {
|
||
|
|
background-color: var(--JTCS-input-background-color);
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
background-color: var(--JTCS-accent-color);
|
||
|
|
color: var(--JTCS-text-color-on-fill);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
border-color: var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.color-picker-group {
|
||
|
|
label {
|
||
|
|
background-color: var(--JTCS-background-color);
|
||
|
|
padding-inline: 0.15rem;
|
||
|
|
border-radius: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
input[data-responsive-color]#backgroundColor {
|
||
|
|
border: 1px solid var(--JTCS-accent-color-20);
|
||
|
|
}
|
||
|
|
|
||
|
|
//for neutral text
|
||
|
|
input[type="radio"],
|
||
|
|
input[type="text"],
|
||
|
|
select {
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
}
|
||
|
|
// for the list items in the slideshow config
|
||
|
|
[data-type="art"] {
|
||
|
|
--accent-color: var(--data-art-color);
|
||
|
|
// border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-in;
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-type="frame"] {
|
||
|
|
--accent-color: var(--data-frame-color);
|
||
|
|
// border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-in;
|
||
|
|
}
|
||
|
|
[data-type="unlinked"] {
|
||
|
|
--accent-color: var(--data-unlinked-color);
|
||
|
|
// border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-in;
|
||
|
|
}
|
||
|
|
[data-is-default] {
|
||
|
|
--accent-color: var(--data-default-color);
|
||
|
|
border-color: var(--accent-color);
|
||
|
|
border: 2px solid var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-in, border-style 150ms ease-in;
|
||
|
|
&:not(.accent) {
|
||
|
|
// outline: 1px solid var(--accent-color);
|
||
|
|
border: 2px dotted var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-out, border-style 150ms ease-in;
|
||
|
|
}
|
||
|
|
.badge {
|
||
|
|
background-color: var(--accent-color);
|
||
|
|
color: var(--JTCS-text-color-on-fill);
|
||
|
|
}
|
||
|
|
&:span {
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
[data-type] {
|
||
|
|
&:hover,
|
||
|
|
&:focus,
|
||
|
|
&:focus-within {
|
||
|
|
color: var(--accent-color);
|
||
|
|
transition: color 150ms ease-in, border-color 150 ease-in;
|
||
|
|
.form-group.has-floating-label {
|
||
|
|
> label.floating-label {
|
||
|
|
transition: color 150ms ease-in;
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
> input,
|
||
|
|
> select {
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-out;
|
||
|
|
::placeholder {
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.border-accent {
|
||
|
|
border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-out;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//for all things with a "data-type" (referring to tile), and an accent class on them
|
||
|
|
[data-type].accent {
|
||
|
|
color: var(--accent-color);
|
||
|
|
transition: color 150ms ease-in, border-color 150 ease-in;
|
||
|
|
|
||
|
|
.form-group.has-floating-label {
|
||
|
|
> label.floating-label {
|
||
|
|
transition: color 150ms ease-in;
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
> input,
|
||
|
|
> select {
|
||
|
|
// border: unset;
|
||
|
|
// border-bottom: 2px solid;
|
||
|
|
|
||
|
|
font-family: Arial, Helvetica, sans-serif;
|
||
|
|
border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-out;
|
||
|
|
::placeholder {
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&.border-accent {
|
||
|
|
border-color: var(--accent-color);
|
||
|
|
transition: border-color 150ms ease-out;
|
||
|
|
}
|
||
|
|
[data-type="unlinked"] {
|
||
|
|
--accent-color: var(--data-unlinked-color);
|
||
|
|
+ label {
|
||
|
|
--accent-color: var(--data-unlinked-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.primary {
|
||
|
|
@include JTCS-accent-fill($hoverStyle: "border");
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
&.file-picker,
|
||
|
|
&[type="button"]:not(.danger):not([data-action="scrollTo"]):not(.new-tile-button):not(.secondary):not([data-button="danger"]):not([data-button="reset"]):not(.icon-button):not(.instructions__button) {
|
||
|
|
@include JTCS-accent-fill();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.secondary {
|
||
|
|
@include JTCS-accent-ghost();
|
||
|
|
}
|
||
|
|
.primary,
|
||
|
|
.secondary {
|
||
|
|
max-width: 300px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#JTCSSettingsApplication {
|
||
|
|
// min-height: 50vh;
|
||
|
|
height: clamp(50vh, 530px, 80vh);
|
||
|
|
max-width: 60vw;
|
||
|
|
header,
|
||
|
|
footer {
|
||
|
|
position: relative;
|
||
|
|
&:after {
|
||
|
|
position: absolute;
|
||
|
|
pointer-events: none;
|
||
|
|
content: "";
|
||
|
|
z-index: 1;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
box-shadow: 0px 2px 8px var(--JTCS-box-shadow-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
footer {
|
||
|
|
&:after {
|
||
|
|
box-shadow: 0px -2px 8px var(--JTCS-box-shadow-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.color-picker-group {
|
||
|
|
position: relative;
|
||
|
|
.picker_wrapper {
|
||
|
|
position: absolute;
|
||
|
|
/* top: -50%; */
|
||
|
|
z-index: 800;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
left: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.window-content {
|
||
|
|
padding: unset;
|
||
|
|
// overflow: hidden;
|
||
|
|
form {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
.form-content {
|
||
|
|
flex: 1 1 0;
|
||
|
|
> .form-group,
|
||
|
|
> .form-group-stacked {
|
||
|
|
img.demo-img {
|
||
|
|
min-width: 200px;
|
||
|
|
width: 60%;
|
||
|
|
object-fit: contain;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
margin-block: 1rem;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
select {
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
fieldset {
|
||
|
|
border: unset;
|
||
|
|
}
|
||
|
|
border-radius: 8px;
|
||
|
|
background-color: var(--JTCS-elevation-BG-color);
|
||
|
|
box-shadow: 1px 0px 8px 2px var(--JTCS-box-shadow-color);
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
input[type="range"]::-webkit-slider-thumb {
|
||
|
|
background-color: var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
.range-value {
|
||
|
|
color: var(--JTCS-accent-color);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
p.notes {
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: unset;
|
||
|
|
span.accent {
|
||
|
|
--accent-color: var(--JTCS-accent-color);
|
||
|
|
color: var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sheet-footer {
|
||
|
|
flex: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#sheet-controls {
|
||
|
|
z-index: 100;
|
||
|
|
position: absolute;
|
||
|
|
&[data-position="bottom-right"] {
|
||
|
|
bottom: 5px;
|
||
|
|
right: 30px;
|
||
|
|
flex-direction: row-reverse;
|
||
|
|
}
|
||
|
|
&[data-position="top-left"] {
|
||
|
|
top: 5px;
|
||
|
|
left: 5px;
|
||
|
|
}
|
||
|
|
&[data-position="bottom-left"] {
|
||
|
|
bottom: 5px;
|
||
|
|
left: 5px;
|
||
|
|
}
|
||
|
|
&[data-position="top-right"] {
|
||
|
|
bottom: 5px;
|
||
|
|
left: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// transform: translateX(-50%);
|
||
|
|
min-width: 65px;
|
||
|
|
button {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
--color-shadow-primary: var(--JTCS-accent-color);
|
||
|
|
@include JTCS-accent-fill(
|
||
|
|
$include-shadow: false,
|
||
|
|
$is-icon-button: true,
|
||
|
|
$primary-color: var(--JTCS-accent-color)
|
||
|
|
);
|
||
|
|
// background-color: var(--JTCS-accent-color);
|
||
|
|
&.active {
|
||
|
|
@include JTCS-accent-fill($include-shadow: true, $is-icon-button: true);
|
||
|
|
}
|
||
|
|
&.JTCS-hidden {
|
||
|
|
@extend .JTCS-hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#slideshow-config {
|
||
|
|
width: min(600px, 45vw);
|
||
|
|
max-width: min(600px, 55vw);
|
||
|
|
|
||
|
|
.window-content {
|
||
|
|
--flow-space: 0.5rem;
|
||
|
|
color: var(--color-text-primary);
|
||
|
|
scrollbar-color: var(--JTCS-accent-color) var(--JTCS-accent-color-70);
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
background-color: var(--JTCS-accent-color-70);
|
||
|
|
}
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--JTCS-accent-color);
|
||
|
|
border-color: var(--JTCS-accent-color-50);
|
||
|
|
}
|
||
|
|
|
||
|
|
// max-height: calc(100vh - 200px);
|
||
|
|
// width: min(600px, 45vw);
|
||
|
|
// max-width: min(600px, 45vw);
|
||
|
|
header .wrapper {
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
.form-group {
|
||
|
|
flex: 2;
|
||
|
|
}
|
||
|
|
.actions {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 66px;
|
||
|
|
max-width: 108px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#JTCS-config-instructions {
|
||
|
|
position: relative;
|
||
|
|
margin-top: unset;
|
||
|
|
|
||
|
|
min-width: 200px;
|
||
|
|
max-width: 250px;
|
||
|
|
font-size: var(--font-size-12);
|
||
|
|
// width: clamp(200px, 40ch, 250px);
|
||
|
|
|
||
|
|
background-color: transparent;
|
||
|
|
flex-shrink: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 20%;
|
||
|
|
left: calc(100%);
|
||
|
|
|
||
|
|
.instructions__content {
|
||
|
|
border-radius: 5px;
|
||
|
|
border-top-left-radius: 0px;
|
||
|
|
border-top-right-radius: 0px;
|
||
|
|
background-color: transparent;
|
||
|
|
width: 100%;
|
||
|
|
p,
|
||
|
|
ul,
|
||
|
|
ol,
|
||
|
|
li {
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
}
|
||
|
|
$list: ("art", "frame", "unlinked", "default");
|
||
|
|
@each $var in $list {
|
||
|
|
.#{$var}-color {
|
||
|
|
color: var(--data-#{$var}-color);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: -1;
|
||
|
|
border-top: 2px solid var(--JTCS-box-shadow-color);
|
||
|
|
background-color: var(--JTCS-background-color-00);
|
||
|
|
opacity: 95%;
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
border-radius: 5px;
|
||
|
|
border-top-left-radius: 0px;
|
||
|
|
border-left: 0.25rem solid var(--JTCS-accent-color);
|
||
|
|
border-bottom-left-radius: 0px;
|
||
|
|
// filter: blur(3px);
|
||
|
|
}
|
||
|
|
&:not(.JTCS-hidden) {
|
||
|
|
padding: 1rem;
|
||
|
|
min-height: 10em;
|
||
|
|
// max-height
|
||
|
|
}
|
||
|
|
// opacity: 0%;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
background-color: var(--JTCS-background-color);
|
||
|
|
border: 2px solid var(--JTCS-accent-color);
|
||
|
|
color: var(--JTCS-accent-color);
|
||
|
|
&.active {
|
||
|
|
@include JTCS-accent-fill(
|
||
|
|
$include-shadow: true,
|
||
|
|
$is-icon-button: true
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// @include JTCS-accent-fill($include-shadow: true);
|
||
|
|
position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
bottom: 100%;
|
||
|
|
left: 0;
|
||
|
|
// right: 100%;
|
||
|
|
max-width: 2rem;
|
||
|
|
max-height: 2rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
form {
|
||
|
|
height: 100%;
|
||
|
|
// max-height: 80vh;
|
||
|
|
}
|
||
|
|
.tilesInScene {
|
||
|
|
.wrapper {
|
||
|
|
$tile-types: (
|
||
|
|
art: "art-tiles",
|
||
|
|
frame: "frame-tiles",
|
||
|
|
);
|
||
|
|
$tile-type-colors: ();
|
||
|
|
@each $type, $selector in $tile-types {
|
||
|
|
&.#{$selector} {
|
||
|
|
h3 {
|
||
|
|
background-color: var(--data-#{$type}-color);
|
||
|
|
width: 100%;
|
||
|
|
color: var(--JTCS-text-color-on-fill);
|
||
|
|
border-top-left-radius: 8px;
|
||
|
|
border-top-right-radius: 8px;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: unset;
|
||
|
|
}
|
||
|
|
.item-wrapper {
|
||
|
|
border-color: var(--data-#{$type}-color);
|
||
|
|
ul {
|
||
|
|
scrollbar-color: var(--data-#{$type}-color)
|
||
|
|
var(--data-#{$type}-color);
|
||
|
|
&::-webkit-scrollbar-track {
|
||
|
|
background-color: var(--JTCS-background-color-30);
|
||
|
|
}
|
||
|
|
&::-webkit-scrollbar-thumb {
|
||
|
|
background-color: var(--data-#{$type}-color);
|
||
|
|
border-color: var(--data-#{$type}-color);
|
||
|
|
box-shadow: 0px 0px 4px var(--data-#{$type}-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.new-tile-list-item {
|
||
|
|
button {
|
||
|
|
border-radius: unset;
|
||
|
|
border-bottom-left-radius: 5px;
|
||
|
|
border-bottom-right-radius: 5px;
|
||
|
|
@include JTCS-accent-ghost(
|
||
|
|
$primary-color: var(--data-#{$type}-color),
|
||
|
|
$border-side: "-top"
|
||
|
|
);
|
||
|
|
border-width: 1px;
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
box-shadow: unset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font-size: min(1.25em, 100%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
height: 95%;
|
||
|
|
position: relative;
|
||
|
|
.wrapper {
|
||
|
|
overflow: hidden;
|
||
|
|
.item-wrapper {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
// background-color: var(--JTCS-background-color-10);
|
||
|
|
// box-shadow: 1px 0px 8px 2px var(--JTCS-box-shadow-color);
|
||
|
|
// max-height: 90%;
|
||
|
|
ul {
|
||
|
|
flex: 1 0 0;
|
||
|
|
// max-height: 90%;
|
||
|
|
}
|
||
|
|
.new-tile-list-item {
|
||
|
|
flex: 0;
|
||
|
|
height: 100%;
|
||
|
|
button {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tile-list-item {
|
||
|
|
&:focus-within {
|
||
|
|
outline: 2px solid var(--accent-color);
|
||
|
|
}
|
||
|
|
select {
|
||
|
|
height: var(--form-field-height);
|
||
|
|
}
|
||
|
|
// &[data-is-default] {
|
||
|
|
// border-width: 5px;
|
||
|
|
// border-color: hotpink !important;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
--flow-space: 0.25em;
|
||
|
|
}
|
||
|
|
li .actions {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex: 0 0 50px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
h1,
|
||
|
|
h2,
|
||
|
|
h3 {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// --color-text-primary: ;
|
||
|
|
}
|
||
|
|
|
||
|
|
.clickableImageContainer {
|
||
|
|
display: inline-flex;
|
||
|
|
@extend .padding-medium;
|
||
|
|
width: -webkit-fit-content;
|
||
|
|
width: -moz-fit-content;
|
||
|
|
width: fit-content;
|
||
|
|
align-items: center;
|
||
|
|
width: fit-content;
|
||
|
|
@extend .reset-margin;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
.clickableImageControls {
|
||
|
|
opacity: 0%;
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
z-index: 400;
|
||
|
|
left: 5px;
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
// width: 100%;
|
||
|
|
height: fit-content;
|
||
|
|
|
||
|
|
transition: opacity 100ms ease-in;
|
||
|
|
pointer-events: none;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
opacity: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.displayLocations {
|
||
|
|
* {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.displayTiles {
|
||
|
|
pointer-events: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
button {
|
||
|
|
width: fit-content;
|
||
|
|
white-space: nowrap;
|
||
|
|
border: unset;
|
||
|
|
box-shadow: var(--box-shadow);
|
||
|
|
@include JTCS-accent-fill($primary-color: var(--data-art-color));
|
||
|
|
&[data-is-default] {
|
||
|
|
@include JTCS-accent-fill($primary-color: var(--data-default-color));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
legend {
|
||
|
|
background-color: inherit;
|
||
|
|
padding: 0.5rem;
|
||
|
|
}
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
border: none;
|
||
|
|
color: white;
|
||
|
|
padding: 0rem 0rem;
|
||
|
|
min-width: 50%;
|
||
|
|
label:first-of-type {
|
||
|
|
border-top-left-radius: 8px;
|
||
|
|
border-bottom-left-radius: 8px;
|
||
|
|
}
|
||
|
|
label:last-of-type {
|
||
|
|
border-top-right-radius: 8px;
|
||
|
|
border-bottom-right-radius: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.sheet.actor,
|
||
|
|
.sheet.item {
|
||
|
|
.clickableImageContainer {
|
||
|
|
padding: unset;
|
||
|
|
margin: unset;
|
||
|
|
max-width: fit-content;
|
||
|
|
max-height: fit-content;
|
||
|
|
// flex: 0 !important;
|
||
|
|
|
||
|
|
.clickableImageControls {
|
||
|
|
top: 0%;
|
||
|
|
transform: translateY(0%);
|
||
|
|
button.floating-control {
|
||
|
|
background: var(--bg-color);
|
||
|
|
border: unset;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.clickableImage,
|
||
|
|
.rightClickableImage {
|
||
|
|
border: 0px solid transparent;
|
||
|
|
box-shadow: inset 0px 0px 2px transparent;
|
||
|
|
outline: 2px dotted transparent;
|
||
|
|
transition: all 100ms ease-out;
|
||
|
|
flex: 1;
|
||
|
|
&:hover {
|
||
|
|
border: 2px solid var(--JTCS-accent-color);
|
||
|
|
box-shadow: inset 2px 2px 8px rgba(50, 51, 59, 0.5);
|
||
|
|
// outline: 2px dotted var(--JTCS-accent-color);
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 100ms ease-out;
|
||
|
|
& ~ .clickableImageControls {
|
||
|
|
opacity: 100%;
|
||
|
|
// pointer-events: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:active {
|
||
|
|
box-shadow: inset 4px 4px 16px rgba(50, 51, 59, 0.5);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.error {
|
||
|
|
&::before {
|
||
|
|
content: "⚠";
|
||
|
|
color: var(--JTCS-danger-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
[data-missing="true"] {
|
||
|
|
&:hover {
|
||
|
|
color: var(--JTCS-warning-color);
|
||
|
|
}
|
||
|
|
color: var(--JTCS-danger-color);
|
||
|
|
|
||
|
|
button:disabled {
|
||
|
|
opacity: 50%;
|
||
|
|
&:hover {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.unlinked-tiles-list {
|
||
|
|
padding-block: 2em;
|
||
|
|
h3 {
|
||
|
|
color: var(--accent-color);
|
||
|
|
}
|
||
|
|
ul {
|
||
|
|
background-color: var(--JTCS-elevation-BG-color);
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
margin: unset;
|
||
|
|
list-style-type: none;
|
||
|
|
padding: unset;
|
||
|
|
.input-span[data-variant="visible-tick"] {
|
||
|
|
display: flex;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
align-items: center;
|
||
|
|
input[type="radio"] {
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
padding: 1rem;
|
||
|
|
& + label {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
color: var(--JTCS-text-color-on-bg);
|
||
|
|
border: unset;
|
||
|
|
border-bottom: 1px solid var(--JTCS-accent-color);
|
||
|
|
--border-color: var(--data-unlinked-color);
|
||
|
|
transition: color 150ms ease-in, background-color 150ms ease-in,
|
||
|
|
border-color 150ms ease-in;
|
||
|
|
.tick-box,
|
||
|
|
.tick-circle {
|
||
|
|
border-color: var(--JTCS-accent-color);
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background-color: var(--data-unlinked-color);
|
||
|
|
color: var(--JTCS-text-color-on-fill);
|
||
|
|
border-color: var(--data-unlinked-color);
|
||
|
|
.tick-box,
|
||
|
|
.tick-circle {
|
||
|
|
transition: border-color 150ms ease-in;
|
||
|
|
border-color: var(--data-unlinked-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
padding: 1rem;
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|