1253 lines
26 KiB
SCSS
1253 lines
26 KiB
SCSS
@use "variables" as *;
|
|
@use "mixins" as *;
|
|
@use "animations" as *;
|
|
@use "sass:string";
|
|
|
|
:root {
|
|
//foundry colors
|
|
|
|
// --foundry-default-background-texture: url("/ui/parchment.jpg") repeat;
|
|
--bg-color-hover: var(--color-border-dark-primary);
|
|
--bg-color: hsla(0, 0%, 20%, 0.9);
|
|
--bg-color-toggle: var(--foundry-purple-background);
|
|
--bg-color-toggle-hover: var(--foundry-purple-background-hover);
|
|
--border-color-toggle: var(--foundry-purple-border);
|
|
--shadow-color-toggle-hover: var(--foundry-purple-shadow-hover);
|
|
--color-text-primary: var(--color-text-dark-primary);
|
|
--color-text-secondary: var(--color-text-light-0);
|
|
--color-text-secondary-hover: var(--color-text-light-highlight);
|
|
--shadow-color: var(--color-shadow-dark);
|
|
--shadow-color-hover: var(--color-shadow-highlight);
|
|
--border-color: var(--color-border-dark);
|
|
--border-color-hover: var(--color-border-highlight);
|
|
--border-color-hover-alt: var(--color-border-highlight-alt);
|
|
--accent-color-1: var(--foundry-purple-shadow-hover, #9b8dff);
|
|
--accent-color-2: var(--color-border-highlight);
|
|
--color-accent: var(--foundry-purple-background);
|
|
}
|
|
|
|
.popover {
|
|
// animation: fade 0.3s linear;
|
|
position: absolute;
|
|
border-top: 4px solid var(--JTCS-accent-color);
|
|
|
|
padding: var(--padding-small);
|
|
background-color: var(--JTCS-elevation-BG-color);
|
|
color: var(--JTCS-text-color-on-bg);
|
|
top: 100%;
|
|
min-width: max-content;
|
|
box-shadow: var(--box-shadow);
|
|
select {
|
|
color: var(--color-text-light-0);
|
|
}
|
|
input[type="text"] {
|
|
color: var(--color-text-dark-primary, black) !important;
|
|
}
|
|
&[data-variant="over"] {
|
|
bottom: 100%;
|
|
}
|
|
}
|
|
|
|
.fill-parent {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.reset-margin {
|
|
margin: 0;
|
|
}
|
|
.reset-padding {
|
|
padding: 0;
|
|
}
|
|
.full-parent-height {
|
|
height: 100%;
|
|
}
|
|
|
|
.flow > * + * {
|
|
margin-top: var(--flow-space, 1em);
|
|
}
|
|
|
|
.img-button {
|
|
background: none;
|
|
background-color: transparent;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
img {
|
|
max-width: 3rem;
|
|
// filter: inherit;
|
|
// filter: drop-shadow(2px 4px 6px black);
|
|
// transition: filter 150ms ease-in;
|
|
}
|
|
&.framed {
|
|
position: relative;
|
|
img {
|
|
clip-path: circle(50%);
|
|
}
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url("/modules/hud-and-trackers/images/Button Badges/Frames & Borders/circle-frame.webp");
|
|
}
|
|
}
|
|
}
|
|
.danger {
|
|
background-color: var(--JTCS-danger-color);
|
|
color: var(--JTCS-text-color-on-fill);
|
|
}
|
|
.danger-text {
|
|
color: var(--JTCS-danger-color);
|
|
}
|
|
|
|
.toggle,
|
|
.toggle.active {
|
|
--bg-color: var(--bg-color-toggle);
|
|
--shadow-color-hover: var(--shadow-color-toggle-hover);
|
|
--border-color-hover: var(--border-color-toggle);
|
|
&:focus {
|
|
--color-shadow-primary: #3a00ae;
|
|
}
|
|
}
|
|
|
|
.button-container {
|
|
position: relative;
|
|
list-style-type: none;
|
|
.nested-buttons {
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
button {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.floating-control {
|
|
color: var(--color-text-secondary);
|
|
background-color: var(--bg-color);
|
|
box-shadow: 0 0 10px var(--shadow-color);
|
|
border: 1px solid var(--border-color);
|
|
i {
|
|
margin: 0;
|
|
}
|
|
&:hover,
|
|
&.active {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 10px var(--shadow-color-hover);
|
|
border: 1px solid var(--border-color-hover);
|
|
color: var(--color-text-secondary-hover);
|
|
}
|
|
}
|
|
.toggle-visible {
|
|
// opacity: 100%;
|
|
// transition: opacity 500ms ease-in;
|
|
}
|
|
.fade-to-hidden {
|
|
opacity: 0%;
|
|
transition: opacity 500ms ease-out;
|
|
}
|
|
.JTCS-hidden {
|
|
// opacity: 0%;
|
|
// transition: opacity 500ms ease-out;
|
|
transform: scale(0);
|
|
position: absolute;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
width: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
input:is([type="radio"], [type="checkbox"]).hidden-input {
|
|
@extend .JTCS-hidden;
|
|
|
|
& + label {
|
|
transform: scale(1);
|
|
color: var(--color-text-secondary);
|
|
background-color: var(--bg-color);
|
|
box-shadow: 0 0 10px transparent;
|
|
border: 1px solid var(--border-color);
|
|
padding: 0.5rem 0.5rem;
|
|
overflow: visible;
|
|
width: fit-content;
|
|
width: max-content;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: background-color 150ms ease-out transform 150ms ease-out;
|
|
&:hover {
|
|
cursor: pointer;
|
|
border: 1px solid var(--border-color-hover);
|
|
color: var(--color-text-secondary-hover);
|
|
box-shadow: 0 0 10px var(--shadow-color-hover);
|
|
}
|
|
}
|
|
&:checked + label {
|
|
transform: scale(1.04);
|
|
z-index: 1;
|
|
// --bg-color-hover: var(--color-deep-purple-600);
|
|
color: var(--color-text-secondary-hover);
|
|
box-shadow: 0px 0px 10px var(--shadow-color-hover);
|
|
border: 1px solid var(--color-border-highlight-alt);
|
|
transition: background-color 250ms ease-out;
|
|
&:hover {
|
|
color: var(--shadow-color-hover);
|
|
}
|
|
.tooltip {
|
|
box-shadow: 0px 0px 10px var(--shadow-color-hover);
|
|
border: 1px solid var(--color-border-highlight-alt);
|
|
}
|
|
// &:not(:hover) {
|
|
// // background-color: var(--color-deep-purple-700);
|
|
// }
|
|
}
|
|
}
|
|
|
|
.minimize {
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
height: fit-content;
|
|
pointer-events: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transform-origin: top center;
|
|
transition: transform 100ms ease-out, opacity 100ms ease-out;
|
|
}
|
|
|
|
.input-span {
|
|
@include JTCS-accent-ghost-input-span();
|
|
}
|
|
p.inline-notification {
|
|
display: inline-flex;
|
|
$variants: (info, warning, danger, success);
|
|
@each $type in $variants {
|
|
&[data-variant="#{$type}"] {
|
|
// color: var(--color-#{$type}-dark);
|
|
color: var(--JTCS-text-color-on-fill);
|
|
background-color: var(--JTCS-#{$type}-color); //var(--color-#{$type}-light);
|
|
.icon-span i {
|
|
color: var(--color-#{$type}-dark);
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type="radio"]:checked.accent-input {
|
|
--accent-color: var(--accent-color-1);
|
|
accent-color: var(--accent-color);
|
|
filter: unset;
|
|
-webkit-filter: unset;
|
|
}
|
|
|
|
.fit-content-width {
|
|
width: fit-content;
|
|
}
|
|
.hover-reveal {
|
|
position: relative;
|
|
& > &--child {
|
|
opacity: 0;
|
|
transition: opacity 250ms ease-in;
|
|
}
|
|
&:hover {
|
|
.hover-reveal--child {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
}
|
|
.hover-reveal-right {
|
|
position: relative;
|
|
&:hover {
|
|
.hover-reveal-right-child {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
&-child {
|
|
position: absolute;
|
|
opacity: 0;
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
}
|
|
.hover-reveal-up {
|
|
position: relative;
|
|
&:hover,
|
|
&.open {
|
|
.hover-reveal-up-child {
|
|
opacity: 1;
|
|
// transform: scale(1);
|
|
}
|
|
}
|
|
&-child {
|
|
position: absolute;
|
|
bottom: 100%;
|
|
left: 0;
|
|
transform-origin: bottom center;
|
|
// transform: scale(0);
|
|
opacity: 0;
|
|
transition: opacity 150ms ease-out backdrop-filter 150ms ease-out;
|
|
// transition: transform 150ms ease-out;
|
|
}
|
|
}
|
|
fieldset.toggle-button-group {
|
|
max-width: fit-content;
|
|
box-shadow: var(--box-shadow);
|
|
pointer-events: auto;
|
|
* {
|
|
pointer-events: auto;
|
|
}
|
|
legend {
|
|
background-color: inherit;
|
|
padding: 0.5rem;
|
|
}
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: none;
|
|
color: currentColor;
|
|
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;
|
|
}
|
|
}
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.interactive {
|
|
cursor: pointer;
|
|
}
|
|
.fade {
|
|
background: rgba(255, 255, 255, var(--journal-fade, 50%)) !important;
|
|
&[data-fade-all] {
|
|
opacity: var(--journal-fade, 50%);
|
|
.editor-content {
|
|
img {
|
|
opacity: var(--journal-fade, 50%) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#slideshow-config {
|
|
.fade {
|
|
background: var(--JTCS-background-color) !important;
|
|
}
|
|
}
|
|
$sizes: (
|
|
"small": 0.5rem,
|
|
"medium": 1rem,
|
|
"large": 1.5rem,
|
|
);
|
|
$directions: ("top", "left", "bottom", "right", "inline", "block");
|
|
@each $size, $value in $sizes {
|
|
@each $direction in $directions {
|
|
.padding-#{$direction}-#{$size} {
|
|
padding-#{$direction}: $value;
|
|
}
|
|
}
|
|
}
|
|
|
|
.padding-small {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.padding-medium {
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
.padding-large {
|
|
padding: 1rem 1.5rem;
|
|
}
|
|
.padding-none {
|
|
padding: 0;
|
|
}
|
|
.margin-none {
|
|
margin: 0;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
button.icon-button {
|
|
height: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: none;
|
|
background: none;
|
|
background-color: transparent;
|
|
width: 35%;
|
|
padding-bottom: 35%;
|
|
position: relative;
|
|
i {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
&[data-variant="small"] {
|
|
width: 5%;
|
|
padding-bottom: 5%;
|
|
}
|
|
&.active {
|
|
@include JTCS-accent-fill($include-shadow: true, $is-icon-button: true);
|
|
}
|
|
}
|
|
$text-align-directions: ("left", "center", "right");
|
|
|
|
@each $direction in $text-align-directions {
|
|
.text-align-#{$direction} {
|
|
text-align: #{$direction};
|
|
}
|
|
}
|
|
|
|
.hover-text-color {
|
|
&:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
}
|
|
.bg-fill {
|
|
background-color: var(--bg-color);
|
|
color: var(--text-color);
|
|
}
|
|
.bg-ghost {
|
|
background-color: transparent;
|
|
border: 2px solid var(--border-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.bg-dark {
|
|
background-color: var(--bg-color);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.bg-hover {
|
|
background-color: var(--bg-color-hover);
|
|
}
|
|
.bg-hover-toggle {
|
|
background-color: var(--bg-color-toggle-hover);
|
|
}
|
|
|
|
.bg-none {
|
|
background: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bg-neutral-base {
|
|
background-color: var(--color-neutral-base);
|
|
}
|
|
.bg-neutral-darkest {
|
|
background-color: var(--color-neutral-darkest);
|
|
}
|
|
.bg-neutral-lightest {
|
|
background-color: var(--color-neutral-lightest);
|
|
}
|
|
.bg-glass {
|
|
transition: background-color 100ms ease-in backdrop-filter 100ms ease-in;
|
|
background-color: var(--color-glass-no-blur);
|
|
@supports (backdrop-filter: blur(12px)) {
|
|
background-color: var(--color-glass-blur);
|
|
backdrop-filter: blur(12px) opacity(1);
|
|
}
|
|
border: 1px solid var(--color-glass-border);
|
|
}
|
|
|
|
.hover-grow {
|
|
transition: transform 150ms ease-in;
|
|
&:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
}
|
|
.hover-bg-primary {
|
|
transition: background-color 150ms ease-in;
|
|
&:hover {
|
|
background-color: var(--color-secondary-base);
|
|
}
|
|
}
|
|
.hover-bg-secondary {
|
|
transition: background-color 150ms ease-in;
|
|
&:hover {
|
|
background-color: var(--color-secondary-base);
|
|
}
|
|
}
|
|
.hover-bg-removable {
|
|
transition: background-color 150ms ease-in;
|
|
&:hover {
|
|
background-color: var(--JTCS-danger-color);
|
|
}
|
|
}
|
|
.hover-bg-none {
|
|
&:hover {
|
|
background: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
.hover-bg-dynamic {
|
|
transition: background-color 150ms ease-in;
|
|
&:hover {
|
|
background-color: var(--bg-color);
|
|
}
|
|
}
|
|
.hover-border {
|
|
border: 2px solid transparent;
|
|
&[data-variant="bottom"] {
|
|
border: unset;
|
|
transition: border-color 150ms ease-in;
|
|
border-bottom: 2px solid var(--JTCS-background-color-10);
|
|
}
|
|
transition: border-color 150ms ease-in;
|
|
&:hover {
|
|
border-color: var(--accent-color);
|
|
&[data-variant="bottom"] {
|
|
border: unset;
|
|
border-bottom: 2px solid;
|
|
}
|
|
transition: border-color 150ms ease-out;
|
|
}
|
|
}
|
|
.border-bottom {
|
|
border: unset;
|
|
border-bottom: 2px solid var(--JTCS-background-color-20);
|
|
}
|
|
.focus-border {
|
|
outline: 3px solid transparent;
|
|
transition: outline-color 150ms ease-in;
|
|
&:focus,
|
|
&:focus-within {
|
|
outline-color: var(--accent-color);
|
|
transition: outline-color 150ms ease-out;
|
|
}
|
|
}
|
|
|
|
.focus-bg-none {
|
|
&:focus {
|
|
background: none;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.hover-disabled {
|
|
&:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
.brighten-on-open {
|
|
&.open {
|
|
filter: brightness(1.2);
|
|
}
|
|
}
|
|
.glow-on-open {
|
|
&.open {
|
|
filter: drop-shadow(0 0 0.75rem crimson);
|
|
}
|
|
}
|
|
.child-glow-on-open {
|
|
&.open {
|
|
> img {
|
|
filter: drop-shadow(0 0 0.75rem crimson);
|
|
}
|
|
}
|
|
}
|
|
.drop-shadow {
|
|
filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.35));
|
|
}
|
|
|
|
.max-height-full-parent {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.text-shadow {
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.shadow-none {
|
|
box-shadow: var(--shadow-none);
|
|
}
|
|
|
|
.shadow-lowest {
|
|
box-shadow: var(--shadow-lowest);
|
|
}
|
|
.shadow-base {
|
|
box-shadow: var(--shadow-base);
|
|
}
|
|
|
|
.shadow-highest {
|
|
box-shadow: var(--shadow-highest);
|
|
}
|
|
.shadow-circle {
|
|
filter: drop-shadow(2px 4px 6px black);
|
|
transition: filter 150ms ease-in;
|
|
}
|
|
|
|
.shadow-inset {
|
|
box-shadow: var(--box-shadow-inset);
|
|
}
|
|
.overflow {
|
|
$types: (auto, scroll, hidden);
|
|
@each $type in $types {
|
|
&-#{$type} {
|
|
overflow: $type;
|
|
&-x {
|
|
overflow-x: $type;
|
|
}
|
|
&-y {
|
|
overflow-y: $type;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.overflow-auto-y {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scroll-y {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.scroll-x {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.hidden-overflow-y {
|
|
overflow-y: hidden;
|
|
}
|
|
.hidden-overflow-x {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.border-color-shadow {
|
|
--border-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.border-block {
|
|
border-block: 2px solid var(--border-color);
|
|
}
|
|
.border-inline {
|
|
border-inline: 2px solid var(--border-color);
|
|
}
|
|
.border-full {
|
|
border: 2px solid var(--border-color);
|
|
}
|
|
|
|
.square {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
.square-medium {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
}
|
|
.square-large {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
.before-color-overlay {
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--bg-color);
|
|
mix-blend-mode: color;
|
|
opacity: 20%;
|
|
transition: opacity 100ms ease-in;
|
|
}
|
|
}
|
|
.before-hover-opacity {
|
|
&:hover {
|
|
&:before {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
}
|
|
.rounded-outer-children {
|
|
&:first-child button {
|
|
border-top-left-radius: 8px;
|
|
border-bottom-left-radius: 8px;
|
|
}
|
|
&:last-child button {
|
|
border-top-right-radius: 8px;
|
|
border-bottom-right-radius: 8px;
|
|
}
|
|
}
|
|
|
|
.horizontal-button-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.button-list {
|
|
display: flex;
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
.sub-section {
|
|
background-color: var(--bg-color);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
[data-title] {
|
|
position: relative;
|
|
.tooltip {
|
|
font-size: var(--font-size-12);
|
|
transition-delay: 0ms;
|
|
transition: opacity 170ms ease-out;
|
|
pointer-events: none;
|
|
opacity: 0%;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
|
|
min-width: calc(100% + 10ch);
|
|
max-width: 210%;
|
|
&.tooltip-right {
|
|
left: unset;
|
|
top: 100%;
|
|
right: 100%;
|
|
}
|
|
&.tooltip-wide {
|
|
width: fit-content;
|
|
max-width: unset;
|
|
}
|
|
span {
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
span:first-of-type {
|
|
color: var(--accent-color-1);
|
|
}
|
|
span:last-of-type {
|
|
color: var(--accent-color-2);
|
|
}
|
|
|
|
// max-width: 200%;
|
|
}
|
|
&:hover {
|
|
.tooltip {
|
|
opacity: 100%;
|
|
|
|
transition: opacity 320ms ease-out;
|
|
transition-delay: 500ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.config-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.drawer-visible {
|
|
right: unset;
|
|
left: 0px;
|
|
}
|
|
|
|
.side-drawer {
|
|
position: absolute;
|
|
right: 100%;
|
|
z-index: 200;
|
|
width: 50%;
|
|
|
|
.tab {
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 50%;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
background-color: var(--color-secondary-base);
|
|
color: white;
|
|
z-index: 200;
|
|
}
|
|
}
|
|
|
|
.justify-self-right {
|
|
margin-left: auto;
|
|
}
|
|
.justify-self-left {
|
|
margin-right: auto;
|
|
}
|
|
.justify-self-center {
|
|
@extend .justify-self-left;
|
|
@extend .justify-self-right;
|
|
}
|
|
|
|
.has-floating-label {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
--form-field-height: fit-content;
|
|
.floating-label {
|
|
color: var(--foundry-dark-gray);
|
|
position: absolute;
|
|
top: 0.1em;
|
|
left: 0.5em;
|
|
background: inherit;
|
|
font-size: smaller;
|
|
}
|
|
input,
|
|
select {
|
|
padding-top: 1.25em;
|
|
padding-bottom: 0.25em;
|
|
}
|
|
}
|
|
|
|
.flex-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.flex {
|
|
&-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
&-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
}
|
|
|
|
.flex-centered {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.flex-justify {
|
|
&-center {
|
|
justify-content: center;
|
|
}
|
|
&-stretch {
|
|
justify-content: stretch;
|
|
}
|
|
|
|
&-space-between {
|
|
justify-content: space-between;
|
|
}
|
|
&-space-evenly {
|
|
justify-content: space-evenly;
|
|
}
|
|
&-start {
|
|
justify-content: flex-start;
|
|
}
|
|
&-end {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
.flex-align {
|
|
&-center {
|
|
align-items: center;
|
|
}
|
|
&-start {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
.gap-small {
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.gap-medium {
|
|
gap: 0.5rem;
|
|
}
|
|
.gap-large {
|
|
gap: 1rem;
|
|
}
|
|
// .hover-reveal {
|
|
// > &--child {
|
|
// opacity: 0;
|
|
// // transform: scale(0);
|
|
// }
|
|
// &:hover {
|
|
// > .hover-reveal--child {
|
|
// opacity: 100%;
|
|
// // transform: scale(1);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.has-absolute-child {
|
|
position: relative;
|
|
.absolute--child {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.focus-reveal {
|
|
& > &--child {
|
|
opacity: 0;
|
|
&[data-variant="scale"] {
|
|
transform: scale(0);
|
|
transition: transform scale 150ms;
|
|
}
|
|
}
|
|
&:focus,
|
|
&:focus-within {
|
|
> .focus-reveal--child {
|
|
opacity: 100%;
|
|
&[data-variant="scale"] {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.chip-span {
|
|
display: inline-flex;
|
|
justify-content: space-evenly;
|
|
height: fit-content;
|
|
width: 100%;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
label {
|
|
border-radius: 999px;
|
|
min-width: 13ch;
|
|
}
|
|
}
|
|
|
|
.wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
//text
|
|
.text-centered {
|
|
text-align: center;
|
|
}
|
|
|
|
//wether filled or ghost
|
|
//what color the background is
|
|
//what color the border is
|
|
//what color the text is
|
|
|
|
.ghost {
|
|
background-color: transparent;
|
|
color: var(--color-primary-base);
|
|
border: 1px solid white;
|
|
border-color: var(--color-primary-base);
|
|
|
|
&:hover {
|
|
border-color: var(--color-secondary-base);
|
|
color: var(--color-secondary-base);
|
|
}
|
|
}
|
|
|
|
.filled {
|
|
background-color: var(--color-primary-base);
|
|
border-color: var(--color-primary-base);
|
|
color: white;
|
|
transition: border-color 100ms ease-in, background-color 100ms ease-in;
|
|
|
|
&:hover {
|
|
background-color: var(--color-secondary-base);
|
|
border-color: var(--color-secondary-base);
|
|
}
|
|
}
|
|
|
|
//for things like removing tags with a click
|
|
.remove-on-click {
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background-color: rgb(255, 92, 63);
|
|
content: "Remove?";
|
|
opacity: 0;
|
|
transition: opacity 100ms ease-in;
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg-accent {
|
|
background-color: var(--accent-color);
|
|
// border-color: var(--color-primary-base);
|
|
}
|
|
|
|
.sharp-corners {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.rounded {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.slight-rounded {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.cap-rounded {
|
|
border-radius: 999px;
|
|
}
|
|
.single-sharp-corner {
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
// #region Colors
|
|
|
|
.text-white {
|
|
color: white;
|
|
}
|
|
|
|
.text-warning {
|
|
color: rgb(255, 92, 63);
|
|
}
|
|
|
|
.text-danger {
|
|
color: rgb(255, 92, 63);
|
|
}
|
|
|
|
.text-primary {
|
|
color: var(--color-primary-base);
|
|
}
|
|
|
|
.text-accent {
|
|
color: var(--color-accent);
|
|
}
|
|
.text-heavy {
|
|
font-weight: bold;
|
|
}
|
|
.border-styled {
|
|
border: 2px solid var(--border-color);
|
|
&[data-variant="bottom"] {
|
|
border: unset;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
}
|
|
|
|
.border-primary {
|
|
border-color: var(--color-primary-base);
|
|
}
|
|
|
|
.border-accent {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.max-height-50 {
|
|
max-height: 50%;
|
|
}
|
|
|
|
// #endregion
|
|
|
|
.hover-shadow {
|
|
&:before {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
content: "";
|
|
border-radius: inherit;
|
|
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
|
|
opacity: 0%;
|
|
transition: opacity 100ms ease-out;
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.window-padding {
|
|
padding: clamp(0.5rem, 0.5rem + 1vw, 1rem) clamp(0.5rem, 0.5rem + 1vh, 1rem);
|
|
}
|
|
|
|
.window-gap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.input-and-label-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.file-input-wrapper {
|
|
display: flex;
|
|
max-width: 100%;
|
|
|
|
button {
|
|
//grow none, shrink normal scale
|
|
flex: 1 1 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
height: 100%;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
input {
|
|
//max, min, ideal
|
|
//grow normal scale, shrink none
|
|
flex: 1 0 auto;
|
|
max-width: 60%;
|
|
height: 100%;
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
.capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
.item-menu {
|
|
@extend .overflow-hidden;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
hr.list-divider {
|
|
width: 100%;
|
|
border-bottom: unset;
|
|
border-top: unset;
|
|
border: 1px solid var(--JTCS-accent-color);
|
|
@extend .reset-margin;
|
|
margin-top: unset;
|
|
margin-bottom: unset;
|
|
}
|
|
li {
|
|
color: var(--JTCS-text-color-on-bg);
|
|
background-color: var(--JTCS-elevation-BG-color);
|
|
&:first-child {
|
|
margin-top: 1em;
|
|
// padding-top: 2em;
|
|
}
|
|
&:last-child {
|
|
padding-top: 1em;
|
|
padding-bottom: 1em;
|
|
}
|
|
width: 100%;
|
|
--bg-color: var(--JTCS-accent-color);
|
|
--text-color: var(--JTCS-text-color-on-fill);
|
|
@extend .hover-bg-dynamic;
|
|
&:hover {
|
|
color: var(--JTCS-text-color-on-fill);
|
|
}
|
|
i {
|
|
display: grid;
|
|
place-content: center;
|
|
margin-right: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
#JTCS-custom-dialog {
|
|
height: fit-content;
|
|
.window-content {
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
border-bottom: unset;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.dialog-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
@extend .padding-large;
|
|
color: var(--JTCS-text-color-on-bg);
|
|
}
|
|
.dialog-buttons {
|
|
flex: 0;
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
&.dialog-grid {
|
|
.dialog-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
&.dialog-grid-3 {
|
|
.dialog-buttons {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
.dialog-buttons .dialog-button {
|
|
[data-button="delete"],
|
|
[data-button="reset"] {
|
|
background: var(--JTCS-danger-color);
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.dialog-buttons .dialog-button {
|
|
@include JTCS-accent-ghost;
|
|
@extend .blank-button;
|
|
&[data-button="delete"],
|
|
&[data-button="reset"] {
|
|
@include JTCS-accent-fill($primary-color: var(--JTCS-danger-color));
|
|
// background: var(--JTCS-danger-color);
|
|
color: var(--JTCS-text-color-on-fill);
|
|
font-weight: bold;
|
|
}
|
|
$buttonTypes: (
|
|
delete: var(--JTCS-danger-color),
|
|
reset: var(--JTCS-danger-color),
|
|
cancel: transparent,
|
|
"window": pink,
|
|
journalEntry: rgb(94, 169, 226),
|
|
artScene: cyan,
|
|
);
|
|
@each $type, $color in list {
|
|
&[data-button="#{$type}"] {
|
|
background: $color !important;
|
|
}
|
|
}
|
|
}
|
|
.destructive-action-prompt {
|
|
@extend .flex-centered;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1 0 0;
|
|
h1 {
|
|
display: inline-flex;
|
|
gap: 1rem;
|
|
}
|
|
h1 {
|
|
font-size: 2rem;
|
|
}
|
|
h1,
|
|
.destructive-action-text {
|
|
color: var(--JTCS-danger-color);
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|