uberwald/l5rx-chiaroscuro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'better_select_for_combat_tracker' into 'dev'

Browse Source 
Adding compendium style select circle for combat encounter. Removed styling...

See merge request teaml5r/l5r5e!62
This commit is contained in:
Litasa
2026-03-01 07:12:33 +00:00
parent 6ba5137ea1 cb98d721c5
commit 40afa53337
4 changed files with 141 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
system/assets/icons/circle.svg
View File

@@ -8,7 +8,7 @@
Created by potrace 1.15, written by Peter Selinger 2001-2017 Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata> </metadata>
<g transform="translate(0.000000,1264.000000) scale(0.100000,-0.100000)" <g transform="translate(0.000000,1264.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none"> fill="currentColor" stroke="none">
<path d="M5925 12625 c-248 -21 -380 -39 -378 -51 1 -7 -56 -18 -148 -29 -83 <path d="M5925 12625 c-248 -21 -380 -39 -378 -51 1 -7 -56 -18 -148 -29 -83
-9 -190 -25 -237 -35 -244 -53 -454 -105 -602 -151 -91 -28 -210 -64 -264 -81 -9 -190 -25 -237 -35 -244 -53 -454 -105 -602 -151 -91 -28 -210 -64 -264 -81
-465 -138 -1038 -415 -1493 -719 -234 -157 -585 -429 -773 -600 -215 -196 -465 -138 -1038 -415 -1493 -719 -234 -157 -585 -429 -773 -600 -215 -196
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.0 KiB

After

Width:  |  Height:  |  Size: 6.0 KiB

2
system/styles/l5r5e.css
View File

File diff suppressed because one or more lines are too long

3
system/styles/scss/colors.scss
View File

@@ -53,6 +53,9 @@ $l5r5e-chat-color-roll: rgba(225, 215, 200, 0.75);
$l5r5e-chat-color-blind: transparent; $l5r5e-chat-color-blind: transparent;
$l5r5e-chat-color-whisper: rgba(225, 200, 225, 0.75); $l5r5e-chat-color-whisper: rgba(225, 200, 225, 0.75);
// Misc
$l5r5e-selection-circle-color: #8a1a00;
// -- Rings // -- Rings
// Earth // Earth

465
system/styles/scss/ui.scss
View File

@@ -1,5 +1,36 @@
/* SCSS */ /* SCSS */
$l5r5e-selection-circle-svg: "../assets/icons/circle.svg";
@mixin l5r5e-selection-circle($inset: -8px) {
position: relative;
&::before {
position: relative;
z-index: 1;
}
&::after {
content: "";
position: absolute;
inset: $inset;
-webkit-mask: url("#{$l5r5e-selection-circle-svg}") center / contain no-repeat;
mask: url("#{$l5r5e-selection-circle-svg}") center / contain no-repeat;
background-color: $l5r5e-selection-circle-color;
pointer-events: none;
z-index: 0;
}
}
@mixin l5r5e-selection-circle-state($state, $inset: -8px) {
&.#{$state} {
@include l5r5e-selection-circle($inset);
}
}
// ─────────────────────────────────────────────────────────────
// Themes
// ─────────────────────────────────────────────────────────────
@mixin theme-dark { @mixin theme-dark {
// Restricted entries // Restricted entries
--l5r5e-restricted-opacity: 0.6; --l5r5e-restricted-opacity: 0.6;
@@ -17,11 +48,8 @@
--l5r5e-chip-bg: rgba(93, 20, 43, 0.12); --l5r5e-chip-bg: rgba(93, 20, 43, 0.12);
--l5r5e-chip-color: var(--color-light-2, #efe6d8); --l5r5e-chip-color: var(--color-light-2, #efe6d8);
// selection ring
--l5r5e-filter-selected-opacity: 0.6;
--l5r5e-filter-selected-tint: invert(1) sepia(1) saturate(4) hue-rotate(5deg); // → gold
--l5r5e-gm-monitor-void-icon: #{$l5r5e-void-light}; --l5r5e-gm-monitor-void-icon: #{$l5r5e-void-light};
--l5r5e-combat-tracker-encounter-icon: #{$l5r5e-white};
} }
@mixin theme-light { @mixin theme-light {
@@ -41,11 +69,8 @@
--l5r5e-chip-bg: rgba(93, 20, 43, 0.08); --l5r5e-chip-bg: rgba(93, 20, 43, 0.08);
--l5r5e-chip-color: var(--color-dark-2, #222); --l5r5e-chip-color: var(--color-dark-2, #222);
// selection ring
--l5r5e-filter-selected-opacity: 0.45;
--l5r5e-filter-selected-tint: invert(0.15) sepia(1) saturate(6) hue-rotate(295deg) brightness(0.7); // → deep red
--l5r5e-gm-monitor-void-icon: #{$l5r5e-void}; --l5r5e-gm-monitor-void-icon: #{$l5r5e-void};
--l5r5e-combat-tracker-encounter-icon: #{$l5r5e-black};
} }
body.theme-light { body.theme-light {
@@ -75,7 +100,6 @@ button {
cursor: url("../assets/cursors/pointer.webp"), pointer; cursor: url("../assets/cursors/pointer.webp"), pointer;
} }
// System title was too long and merge version with module number
#game-details { #game-details {
.system { .system {
overflow: auto; overflow: auto;
@@ -88,7 +112,7 @@ button {
} }
.chat-message { .chat-message {
ul,li { ul, li {
list-style: none; list-style: none;
margin: unset; margin: unset;
padding: unset; padding: unset;
@@ -103,117 +127,6 @@ button {
opacity: 0.8; opacity: 0.8;
} }
#navigation {
left: 120px;
#nav-toggle,
#scene-list .scene.nav-item {
cursor: default;
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
#scene-list {
.scene.nav-item.active {
background: linear-gradient(
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
.scene.view,
.scene.context {
cursor: default;
color: #fff;
background: linear-gradient(
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
box-shadow: 0 0 20px red;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
}
}
#controls {
top: 100px;
ol {
.scene-control.active,
.control-tool.active,
.scene-control:hover,
.control-tool:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
box-shadow: 0 0 10px $red;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
.scene-control,
.control-tool {
color: $white;
background: linear-gradient(
$l5r5e-linear-gradient-second,
$l5r5e-linear-gradient-second-dark,
$l5r5e-linear-gradient-second
);
background-origin: padding-box;
border-image: url("../assets/ui/macro-button.webp") 10 repeat;
border-image-width: 0.25rem;
border-image-outset: 0px;
&:hover {
background: linear-gradient(
$l5r5e-linear-gradient-first-dark,
$l5r5e-linear-gradient-first,
$l5r5e-linear-gradient-first-dark
);
}
}
}
}
#playlists { #playlists {
.playlist { .playlist {
.playlist-header { .playlist-header {
@@ -235,10 +148,12 @@ button {
} }
ul { ul {
display: flex; display: flex;
color: $l5r5e-white; color: var(--l5r5e-combat-tracker-encounter-icon);
&.encounter { &.encounter {
border-right: 1px solid $l5r5e-white-light; border-right: 1px solid $l5r5e-white-light;
} }
li { li {
cursor: url("../assets/cursors/pointer.webp"), pointer; cursor: url("../assets/cursors/pointer.webp"), pointer;
} }
@@ -248,21 +163,27 @@ button {
} }
.encounter { .encounter {
justify-content: space-between; justify-content: space-between;
i { i {
font-size: 23px; font-size: 23px;
vertical-align: middle; vertical-align: middle;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
@include l5r5e-selection-circle-state("active");
&.active {
color: $l5r5e-maho;
&:hover { text-shadow: none; }
}
&:hover { &:hover {
text-shadow: 0 0 8px $red; text-shadow: 0 0 8px $red;
} }
} }
.active {
color: $l5r5e-maho;
&:hover {
text-shadow: none;
}
}
&-icon { &-icon {
font-weight: 900; font-weight: 900;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -301,8 +222,7 @@ button {
} }
.compendium-directory { .compendium-directory {
min-width: 350px;
min-width: 350px; //Default size set as min
.directory-item { .directory-item {
.ring-rarity-rank { .ring-rarity-rank {
@@ -338,7 +258,7 @@ button {
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
margin: 0.35rem 0.5rem; margin: 0.35rem 0.5rem;
padding-right: 1.5rem; // space for the clear filter x padding-right: 1.5rem;
&.source-filter { &.source-filter {
padding-right: 0; padding-right: 0;
@@ -346,7 +266,7 @@ button {
label { label {
flex-shrink: 0; flex-shrink: 0;
width: 3.5rem; // same column alignment width: 3.5rem;
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1; line-height: 1;
margin-right: 0.25rem; margin-right: 0.25rem;
@@ -357,7 +277,6 @@ button {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
// ── Filter buttons (<a> and <i>)
.number-filter a, .number-filter a,
.rank-filter a, .rank-filter a,
.rarity-filter a, .rarity-filter a,
@@ -377,26 +296,12 @@ button {
z-index: 1; z-index: 1;
} }
// ── Selected state circle .rank-filter a,
.rank-filter a.selected::before, .rarity-filter a,
.rarity-filter a.selected::before, .ring-filter i {
.ring-filter i.selected::after { @include l5r5e-selection-circle-state("selected", -4px);
content: "";
position: absolute;
inset: 0;
background: url("../assets/icons/circle.svg") center / contain no-repeat;
opacity: var(--l5r5e-filter-selected-opacity);
filter: var(--l5r5e-filter-selected-tint);
pointer-events: none;
z-index: -1;
} }
// Ring-specific adjustment for circle
.ring-filter i.selected::after {
inset: -4px;
}
// ── Inline clear button
a[data-clear] { a[data-clear] {
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
@@ -423,26 +328,49 @@ button {
width: 100%; width: 100%;
} }
} }
button.gm.applyPlayerFilter { button.gm.applyPlayerFilter {
margin-left: 0.5rem; margin-left: 0.5rem;
margin-bottom: 0.3rem; margin-bottom: 0.3rem;
} }
} }
// global tooltip @mixin l5r5e-card-base {
color: $black-light;
font-size: 0.8rem;
* {
color: $black-light;
}
section > ul {
display: flex;
flex-flow: row wrap;
padding: 0.25rem 0 0.25rem 1rem;
}
.card-header img {
display: inline-block;
background: transparent;
border: 0 none;
width: 20px;
margin: 0;
padding: 0;
}
}
.l5r5e-tooltip { .l5r5e-tooltip {
cursor: url("../assets/cursors/pointer.webp"), pointer; cursor: url("../assets/cursors/pointer.webp"), pointer;
.l5r5e-tooltip-ct, .l5r5e-tooltip-ct,
&.l5r5e-tooltip-ct { &.l5r5e-tooltip-ct {
@include l5r5e-card-base;
visibility: hidden; visibility: hidden;
min-height: fit-content; min-height: fit-content;
width: 600px; width: 600px;
height: auto; height: auto;
max-height: 100%; max-height: 100%;
background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat; background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat;
color: $black-light;
font-size: 0.8rem;
text-align: left; text-align: left;
border: 0 none; border: 0 none;
border-radius: 0; border-radius: 0;
@@ -450,21 +378,15 @@ button {
display: block; display: block;
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
* {
color: $black-light; section > ul li {
} flex: 50%;
section > ul { padding: 0;
display: flex; padding-right: 1rem;
flex-flow: row wrap; margin: 0;
padding: 0.25rem 0 0.25rem 1rem; list-style-type: square;
li {
flex: 50%;
padding: 0;
padding-right: 1rem;
margin: 0;
list-style-type: square;
}
} }
&:before { &:before {
z-index: -2; z-index: -2;
content: ""; content: "";
@@ -477,6 +399,7 @@ button {
left: 0.25rem; left: 0.25rem;
background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat; background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat;
} }
&:after { &:after {
z-index: -1; z-index: -1;
content: ""; content: "";
@@ -501,51 +424,28 @@ button {
} }
} }
} }
.card-header img {
display: inline-block;
background: transparent;
border: 0 none;
width: 20px;
margin: 0;
padding: 0;
}
} }
// Send to chat
.l5r5e-chat-item { .l5r5e-chat-item {
color: $black-light; @include l5r5e-card-base;
font-size: 0.8rem;
* {
color: $black-light;
}
h2 { h2 {
font-size: 1.1rem; font-size: 1.1rem;
} }
section > ul {
display: flex; section > ul li {
flex-flow: row wrap; flex: 100%;
padding: 0.25rem 0 0.25rem 1rem; padding: 1px !important;
li {
flex: 100%;
padding: 1px !important;
margin: 0;
border: 0 none !important;
list-style-type: square;
}
}
.card-header img {
display: inline-block;
background: transparent;
border: 0 none;
width: 20px;
margin: 0; margin: 0;
padding: 0; border: 0 none !important;
list-style-type: square;
} }
.reference { .reference {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.page { .page {
margin-left: 1ch; margin-left: 1ch;
} }
@@ -577,8 +477,7 @@ button {
color: $l5r5e-void-light; color: $l5r5e-void-light;
} }
} }
th, th, td {
td {
border: 1px solid #5a6e5a50; border: 1px solid #5a6e5a50;
padding: 0.25em; padding: 0.25em;
} }
@@ -600,7 +499,7 @@ button {
color: var(--l5r5e-gm-monitor-void-icon); color: var(--l5r5e-gm-monitor-void-icon);
} }
} }
// hide "search anywhere" draggable icon
.window-draggable-handle { .window-draggable-handle {
display: none; display: none;
} }
@@ -610,9 +509,11 @@ button {
display: flex; display: flex;
border: 1px solid rgb(195, 165, 130); border: 1px solid rgb(195, 165, 130);
margin: 0.5rem; margin: 0.5rem;
.window-header { .window-header {
border-bottom: 1px solid rgb(195, 165, 130); border-bottom: 1px solid rgb(195, 165, 130);
background: none; //keep the same background as the toolbox, not the default black opaque background: none;
.window-title { .window-title {
text-align: center; text-align: center;
} }
@@ -624,8 +525,10 @@ button {
padding-top: 1ch; padding-top: 1ch;
} }
} }
.window-content { .window-content {
padding: 0; padding: 0;
.gm-tools-container { .gm-tools-container {
color: var(--color-text-primary); color: var(--color-text-primary);
display: flex; display: flex;
@@ -634,6 +537,7 @@ button {
min-height: 2rem; min-height: 2rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
li { li {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -641,14 +545,17 @@ button {
padding: 0; padding: 0;
border-right: 1px solid #c3a582; border-right: 1px solid #c3a582;
cursor: url("../assets/cursors/pointer.webp"), pointer; cursor: url("../assets/cursors/pointer.webp"), pointer;
&:last-child { &:last-child {
margin: 0; margin: 0;
border: 0 none; border: 0 none;
} }
:hover { :hover {
text-shadow: 0px 0px 5px $red; text-shadow: 0px 0px 5px $red;
} }
} }
.difficulty_hidden { .difficulty_hidden {
.fa { .fa {
width: 3rem; width: 3rem;
@@ -662,9 +569,11 @@ button {
padding: 0.5rem; padding: 0.5rem;
} }
} }
.fa { .fa {
padding: 0.5rem; padding: 0.5rem;
} }
.fa-bed, .fa-bed,
.fa-star-half-alt, .fa-star-half-alt,
.fa-table, .fa-table,
@@ -674,14 +583,13 @@ button {
} }
} }
} }
// hide "search anywhere" draggable icon
.window-draggable-handle { .window-draggable-handle {
display: none; display: none;
} }
} }
form#settings-config { form#settings-config {
div.form-group:has(l5r5e-multi-select) { div.form-group:has(l5r5e-multi-select) {
.form-fields { .form-fields {
order: 3; // Move the multiselect to be below the title and description for nicer ui order: 3; // Move the multiselect to be below the title and description for nicer ui
@@ -689,7 +597,6 @@ form#settings-config {
} }
div.form-group:has(#settings-config-l5r5e\.compendium-unofficial-content-for-players) { div.form-group:has(#settings-config-l5r5e\.compendium-unofficial-content-for-players) {
// Move the tags and input fields to a similar place as for the multiselect
.form-fields { .form-fields {
order: 3; order: 3;
.tags { .tags {
@@ -699,118 +606,6 @@ form#settings-config {
} }
} }
l5r5e-combo-box {
// Reset li rules
li {
flex: none !important;
margin: 0 !important;
padding: 0 !important;
}
input {
margin: 0 !important;
flex: none !important;
height: auto !important;
}
display: block;
flex: 1;
min-width: 0; // prevents flex overflow
width: 100%;
.wrapper {
display: block;
position: relative;
width: 100%;
}
.input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid #6e7e6b;
font-family: inherit;
font-size: inherit;
color: inherit;
padding: 2px 4px;
&:focus {
outline: none;
border-bottom-color: #8b0000;
}
&:disabled {
opacity: 0.45;
cursor: not-allowed;
}
}
.dropdown {
// Reset any inherited text styles from parent label
text-shadow: none;
color: #333;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100; /* floats above everything */
max-height: 200px; /* scrollable */
overflow-y: auto;
background: #f4efe6; /* matches parchment */
border: 1px solid #6e7e6b;
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
margin: 0;
padding: 0;
list-style: none;
text-align: center;
font-size: var(--font-size-16);
font-family: $font-primary;
}
.option {
display: block; // override list-item
margin: 0; // reset any inherited li margins
flex: none; // reset any inherited li flex
padding: 4px 8px;
cursor: pointer;
font-size: 0.85em;
color: #333;
text-transform: uppercase; /* matches the label style in your sheet */
letter-spacing: 0.05em;
border-bottom: 1px solid rgba(110, 126, 107, 0.3);
&:hover,
&.active {
background: #8b0000;
color: #f4efe6;
}
}
.option:last-child,
.group:last-child {
border-bottom: none;
}
.group {
padding: 4px 8px 2px;
font-size: 0.7em;
font-weight: bold;
color: #6e7e6b;
text-transform: uppercase;
letter-spacing: 0.08em;
background: rgba(110, 126, 107, 0.15);
cursor: default;
}
.no-results {
padding: 6px 8px;
color: #999;
font-style: italic;
font-size: 0.85em;
}
}
l5r5e-multi-select, l5r5e-multi-select,
l5r5e-combo-box { l5r5e-combo-box {
display: block; display: block;
@@ -818,6 +613,23 @@ l5r5e-combo-box {
} }
l5r5e-combo-box { l5r5e-combo-box {
// Reset inherited li/input rules
li {
flex: none !important;
margin: 0 !important;
padding: 0 !important;
}
input {
margin: 0 !important;
flex: none !important;
height: auto !important;
}
flex: 1;
min-width: 0;
width: 100%;
.wrapper { .wrapper {
position: relative; position: relative;
display: block; display: block;
@@ -865,7 +677,6 @@ l5r5e-multi-select {
gap: 0.25rem; gap: 0.25rem;
padding: 0.3125rem 0.5rem; padding: 0.3125rem 0.5rem;
min-height: 2.25rem; min-height: 2.25rem;
border: 1px solid var(--color-border, #6e7e6b); border: 1px solid var(--color-border, #6e7e6b);
border-radius: 4px; border-radius: 4px;
cursor: text; cursor: text;
@@ -896,12 +707,10 @@ l5r5e-multi-select {
align-items: center; align-items: center;
gap: 0.1875rem; gap: 0.1875rem;
padding: 0.0625rem 0.3125rem; padding: 0.0625rem 0.3125rem;
border: 1px solid var(--l5r5e-chip-border-color); border: 1px solid var(--l5r5e-chip-border-color);
border-radius: 3px; border-radius: 3px;
background: var(--l5r5e-chip-bg); background: var(--l5r5e-chip-bg);
color: var(--l5r5e-chip-color); color: var(--l5r5e-chip-color);
font-size: 0.8em; font-size: 0.8em;
line-height: 1.4; line-height: 1.4;
white-space: nowrap; white-space: nowrap;
@@ -921,11 +730,10 @@ l5r5e-multi-select {
} }
} }
/* Auto-sizing input */
.input-sizer { .input-sizer {
display: inline-grid; display: inline-grid;
flex: 1 1 auto; flex: 1 1 auto;
min-width: 4ch; // never collapse min-width: 4ch;
max-width: 100%; max-width: 100%;
&::after { &::after {
@@ -941,7 +749,7 @@ l5r5e-multi-select {
input.input { input.input {
grid-area: 1 / 1; grid-area: 1 / 1;
width: 100%; width: 100%;
min-width: 0; // allow flexbox to shrink min-width: 0;
padding: 0.125rem 0; padding: 0.125rem 0;
border: none; border: none;
background: transparent; background: transparent;
@@ -955,10 +763,9 @@ l5r5e-multi-select {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-left: auto; // pushes it to the end margin-left: auto;
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
padding: 0 0.125rem; padding: 0 0.125rem;
border: none; border: none;
background: none; background: none;
@@ -1056,4 +863,4 @@ l5r5e-combo-box {
color: var(--l5r5e-dropdown-no-results-color); color: var(--l5r5e-dropdown-no-results-color);
} }
} }
} }