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

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

Browse Source
This commit is contained in:
Litasa
2026-03-01 07:12:32 +00:00
parent 6ba5137ea1
commit cb98d721c5
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
</metadata>
<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
-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
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-whisper: rgba(225, 200, 225, 0.75);
// Misc
$l5r5e-selection-circle-color: #8a1a00;
// -- Rings
// Earth

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

@@ -1,5 +1,36 @@
/* 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 {
// Restricted entries
--l5r5e-restricted-opacity: 0.6;
@@ -17,11 +48,8 @@
--l5r5e-chip-bg: rgba(93, 20, 43, 0.12);
--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-combat-tracker-encounter-icon: #{$l5r5e-white};
}
@mixin theme-light {
@@ -41,11 +69,8 @@
--l5r5e-chip-bg: rgba(93, 20, 43, 0.08);
--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-combat-tracker-encounter-icon: #{$l5r5e-black};
}
body.theme-light {
@@ -75,7 +100,6 @@ button {
cursor: url("../assets/cursors/pointer.webp"), pointer;
}
// System title was too long and merge version with module number
#game-details {
.system {
overflow: auto;
@@ -103,117 +127,6 @@ button {
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 {
.playlist {
.playlist-header {
@@ -235,10 +148,12 @@ button {
}
ul {
display: flex;
color: $l5r5e-white;
color: var(--l5r5e-combat-tracker-encounter-icon);
&.encounter {
border-right: 1px solid $l5r5e-white-light;
}
li {
cursor: url("../assets/cursors/pointer.webp"), pointer;
}
@@ -248,18 +163,24 @@ button {
}
.encounter {
justify-content: space-between;
i {
font-size: 23px;
vertical-align: middle;
&:hover {
text-shadow: 0 0 8px $red;
}
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; }
}
.active {
color: $l5r5e-maho;
&:hover {
text-shadow: none;
text-shadow: 0 0 8px $red;
}
}
@@ -301,8 +222,7 @@ button {
}
.compendium-directory {
min-width: 350px; //Default size set as min
min-width: 350px;
.directory-item {
.ring-rarity-rank {
@@ -338,7 +258,7 @@ button {
align-items: center;
gap: 0.35rem;
margin: 0.35rem 0.5rem;
padding-right: 1.5rem; // space for the clear filter x
padding-right: 1.5rem;
&.source-filter {
padding-right: 0;
@@ -346,7 +266,7 @@ button {
label {
flex-shrink: 0;
width: 3.5rem; // same column alignment
width: 3.5rem;
font-size: 0.8rem;
line-height: 1;
margin-right: 0.25rem;
@@ -357,7 +277,6 @@ button {
flex-wrap: nowrap;
}
// ── Filter buttons (<a> and <i>)
.number-filter a,
.rank-filter a,
.rarity-filter a,
@@ -377,26 +296,12 @@ button {
z-index: 1;
}
// ── Selected state circle
.rank-filter a.selected::before,
.rarity-filter a.selected::before,
.ring-filter i.selected::after {
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;
.rank-filter a,
.rarity-filter a,
.ring-filter i {
@include l5r5e-selection-circle-state("selected", -4px);
}
// Ring-specific adjustment for circle
.ring-filter i.selected::after {
inset: -4px;
}
// ── Inline clear button
a[data-clear] {
position: absolute;
display: inline-flex;
@@ -423,26 +328,49 @@ button {
width: 100%;
}
}
button.gm.applyPlayerFilter {
margin-left: 0.5rem;
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 {
cursor: url("../assets/cursors/pointer.webp"), pointer;
.l5r5e-tooltip-ct,
&.l5r5e-tooltip-ct {
@include l5r5e-card-base;
visibility: hidden;
min-height: fit-content;
width: 600px;
height: auto;
max-height: 100%;
background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat;
color: $black-light;
font-size: 0.8rem;
text-align: left;
border: 0 none;
border-radius: 0;
@@ -450,21 +378,15 @@ button {
display: block;
position: absolute;
z-index: 9999;
* {
color: $black-light;
}
section > ul {
display: flex;
flex-flow: row wrap;
padding: 0.25rem 0 0.25rem 1rem;
li {
section > ul li {
flex: 50%;
padding: 0;
padding-right: 1rem;
margin: 0;
list-style-type: square;
}
}
&:before {
z-index: -2;
content: "";
@@ -477,6 +399,7 @@ button {
left: 0.25rem;
background: #3e3a30 url("../assets/imgs/bg-l5r.webp") no-repeat;
}
&:after {
z-index: -1;
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 {
color: $black-light;
font-size: 0.8rem;
@include l5r5e-card-base;
* {
color: $black-light;
}
h2 {
font-size: 1.1rem;
}
section > ul {
display: flex;
flex-flow: row wrap;
padding: 0.25rem 0 0.25rem 1rem;
li {
section > ul 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;
padding: 0;
}
.reference {
display: flex;
flex-wrap: nowrap;
}
.page {
margin-left: 1ch;
}
@@ -577,8 +477,7 @@ button {
color: $l5r5e-void-light;
}
}
th,
td {
th, td {
border: 1px solid #5a6e5a50;
padding: 0.25em;
}
@@ -600,7 +499,7 @@ button {
color: var(--l5r5e-gm-monitor-void-icon);
}
}
// hide "search anywhere" draggable icon
.window-draggable-handle {
display: none;
}
@@ -610,9 +509,11 @@ button {
display: flex;
border: 1px solid rgb(195, 165, 130);
margin: 0.5rem;
.window-header {
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 {
text-align: center;
}
@@ -624,8 +525,10 @@ button {
padding-top: 1ch;
}
}
.window-content {
padding: 0;
.gm-tools-container {
color: var(--color-text-primary);
display: flex;
@@ -634,6 +537,7 @@ button {
min-height: 2rem;
margin: 0;
padding: 0;
li {
flex: 1;
display: flex;
@@ -641,14 +545,17 @@ button {
padding: 0;
border-right: 1px solid #c3a582;
cursor: url("../assets/cursors/pointer.webp"), pointer;
&:last-child {
margin: 0;
border: 0 none;
}
:hover {
text-shadow: 0px 0px 5px $red;
}
}
.difficulty_hidden {
.fa {
width: 3rem;
@@ -662,9 +569,11 @@ button {
padding: 0.5rem;
}
}
.fa {
padding: 0.5rem;
}
.fa-bed,
.fa-star-half-alt,
.fa-table,
@@ -674,14 +583,13 @@ button {
}
}
}
// hide "search anywhere" draggable icon
.window-draggable-handle {
display: none;
}
}
form#settings-config {
div.form-group:has(l5r5e-multi-select) {
.form-fields {
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) {
// Move the tags and input fields to a similar place as for the multiselect
.form-fields {
order: 3;
.tags {
@@ -699,8 +606,14 @@ form#settings-config {
}
}
l5r5e-multi-select,
l5r5e-combo-box {
// Reset li rules
display: block;
position: relative;
}
l5r5e-combo-box {
// Reset inherited li/input rules
li {
flex: none !important;
margin: 0 !important;
@@ -713,111 +626,10 @@ l5r5e-combo-box {
height: auto !important;
}
display: block;
flex: 1;
min-width: 0; // prevents flex overflow
min-width: 0;
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-combo-box {
display: block;
position: relative;
}
l5r5e-combo-box {
.wrapper {
position: relative;
display: block;
@@ -865,7 +677,6 @@ l5r5e-multi-select {
gap: 0.25rem;
padding: 0.3125rem 0.5rem;
min-height: 2.25rem;
border: 1px solid var(--color-border, #6e7e6b);
border-radius: 4px;
cursor: text;
@@ -896,12 +707,10 @@ l5r5e-multi-select {
align-items: center;
gap: 0.1875rem;
padding: 0.0625rem 0.3125rem;
border: 1px solid var(--l5r5e-chip-border-color);
border-radius: 3px;
background: var(--l5r5e-chip-bg);
color: var(--l5r5e-chip-color);
font-size: 0.8em;
line-height: 1.4;
white-space: nowrap;
@@ -921,11 +730,10 @@ l5r5e-multi-select {
}
}
/* Auto-sizing input */
.input-sizer {
display: inline-grid;
flex: 1 1 auto;
min-width: 4ch; // never collapse
min-width: 4ch;
max-width: 100%;
&::after {
@@ -941,7 +749,7 @@ l5r5e-multi-select {
input.input {
grid-area: 1 / 1;
width: 100%;
min-width: 0; // allow flexbox to shrink
min-width: 0;
padding: 0.125rem 0;
border: none;
background: transparent;
@@ -955,10 +763,9 @@ l5r5e-multi-select {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto; // pushes it to the end
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
padding: 0 0.125rem;
border: none;
background: none;