Skip to content

Commit

Permalink
[Hot Cards] Add Holo style preset and fix display on mobile (stashapp…
Browse files Browse the repository at this point in the history 
…#371)
  • Loading branch information
@HandyRandyx
HandyRandyx authored Jul 24, 2024
1 parent 495c14a commit 11042b3
Show file tree
Hide file tree
Showing 6 changed files with 317 additions and 47 deletions.
74 changes: 41 additions & 33 deletions plugins/hotCards/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,54 +29,52 @@ _[criterion]\_[value]\_[style]\_[gradient-opts]\_[hover-opts]\_[card-opts]_
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<criterion>` | Defines the basis for applying styles. Use `t` for tag-based criteria, `r` for rating-based criteria, or `d` to disable. | If left empty, it will default to the global _Tag ID_ or _Rating Threshold_ as configured. If both options are enabled and unspecified, ~~the Tag ID will be used by default~~ both criteria will be used. |
| `<value>` | Specifies the exact value for the Tag ID or Rating Threshold to be used.<br><br>_Multiple values can be specified using a comma-separated list and slashes to delimit each set of criteria:_ `<tag_id>,.../<tag_id>,.../...` or `<rating>/<rating>/...` | Defaults to the global _Tag ID_ or _Rating Threshold_ value.<br><br>**Important**: When dealing with tenths precision (e.g. 4.8, 3.25), map these to the 6-100 range and set the _Rating Threshold_ in that range. Thus, 4.8 would be 96, 3.25 would be 65, and so on.<br><br>See [this additional information](#regarding-multiple-values) on multiple values. |
| `<style>` | Defines the styling options as a comma-separated list of colors or a style preset.</br></br>Options include: a fixed color (e.g., #5ff2a2), a style preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... hex color codes or color names).<br><br>_A style can be specified for each set of values using a slash-separated list:_ `<style>/<style>/...` | Defaults to **default** (basic style preset)<br><br>Style Presets available: **default**, **hot**, **gold**. |
| `<style>` | Defines the styling options as a comma-separated list of colors or a style preset.</br></br>Options include: a fixed color (e.g., #5ff2a2), a style preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... hex color codes or color names).<br><br>_A style can be specified for each set of values using a slash-separated list:_ `<style>/<style>/...` | Defaults to **default** (basic style preset)<br><br>Style Presets available: [**default**](#default), [**hot**](#hot), [**gold**](#gold), and [**holo**](#holo). |
| `<gradient_opts>` | Specifies gradient options as a comma-separated list: `<type>,<angle>,<animation>`.</br></br> Example: **linear,35deg,4s alternate infinite** for a linear gradient with a 35-degree angle and a 4-second alternating infinite animation.</br></br>_Gradient options can be specified for each set of values using a slash-separated list:_ `<gradient_opts>/<gradient_opts>/...` | `<type>` Defaults to **linear**</br></br>Refer to [Using CSS gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) to see all types you can use.</br></br>`<angle>` Defaults to **0deg**</br></br>`<animation>` Defaults to **none**</br></br>Note that you can only configure the animation properties of the element. See [Using CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) for additional information. |
| `<hover_opts>` | Specifies hover options as a comma-separated list: `<color>,<animation>`.</br></br>Example: **#ff0000,2s ease infinite** for a hover effect with a color of #ff0000 and a 2-second ease infinite animation.</br></br>_Hover options can be specified for each set of values using a slash-separated list:_ `<hover_opts>/<hover_opts>/...` | `<color>` Defaults to **transparent**</br></br>`<animation>` Defaults to **none**</br></br>Similar to the gradient animation, you can only configure the animation properties of the element. |
| `<card_opts>` | Specifies the general options for the card as a comma-separated list: `<fill>,<opacity>`.</br></br>_Card options can be specified for each set of values using a slash-separated list:_ `<card_opts>/<card_opts>/...` | `fill` Defaults to **true**<br>_Indicates whether the card should be filled._</br></br>Tip: You can set this to **false** to color only the border of the card.</br></br>`opacity` Defaults to **80**<br>_Represents the opacity for the card background. Range from 0 to 100._ |

<br>
| `<card_opts>` | Specifies the general options for the card as a comma-separated list: `<fill>,<opacity>,<animation>`.</br></br>_Card options can be specified for each set of values using a slash-separated list:_ `<card_opts>/<card_opts>/...` | `fill` Defaults to **true**<br>_Indicates whether the card should be filled._</br></br>Tip: You can set this to **false** to color only the border of the card.</br></br>`opacity` Defaults to **80**<br>_Represents the opacity for the card background. Range from 0 to 100._</br></br>`animation` Defaults to **false**<br>_Only used for [**holo**](#holo) style preset._ |

**Note**: _It is recommended to refresh the page once you are done configuring for the changes to take effect and the previous style to be overwritten._

### Regarding multiple values

In scenarios where multiple values are specified, the rules for how these values are processed can get complex. Below is a detailed explanation of how to handle multiple values.

#### 1. **Tag IDs**
1. **Tag IDs**

Corresponding styles _(style, gradient_opts, hover_opts, card_opts)_ are applied only if **ALL** tags in a set match.
Corresponding styles _(style, gradient_opts, hover_opts, card_opts)_ are applied only if **ALL** tags in a set match.

The tags are prioritized from **left to right**, meaning if it finds a match for a tag list, the corresponding style is applied and subsequent sets that may also match are ignored.
The tags are prioritized from **left to right**, meaning if it finds a match for a tag list, the corresponding style is applied and subsequent sets that may also match are ignored.

For example:
For example:

`t_201,202/202_red/blue`
`t_201,202/202_red/blue`

- A card with tags 201 and 202 will be painted red.
- A card with tag 202 will be painted blue (only if it does not have tag 201).
- A card with tags 201 and 202 will be painted red.
- A card with tag 202 will be painted blue (only if it does not have tag 201).

Conversely, `t_202/201,202_blue/red`
Conversely, `t_202/201,202_blue/red`

- A card with tag 202 will be painted blue, regardless of the presence of tag 201. Therefore, there will be no cards painted red.
- A card with tag 202 will be painted blue, regardless of the presence of tag 201. Therefore, there will be no cards painted red.

#### 2. **Ratings**
2. **Ratings**

The same left-to-right prioritization applies.
The same left-to-right prioritization applies.

Consider the declaration:
Consider the declaration:

`r_4/2_red/blue`
`r_4/2_red/blue`

- A card with a rating >= 4 will be painted red.
- A card with a rating >= 2 but < 4 will be painted blue.
- A card with a rating >= 4 will be painted red.
- A card with a rating >= 2 but < 4 will be painted blue.

<br>
<br>

You can also specify multiple ratings in a single value if you wish to target multiple specific ratings, though such scenarios are rare and generally not as useful. For instance:
You can also specify multiple ratings in a single value if you wish to target multiple specific ratings, though such scenarios are rare and generally not as useful. For instance:

`r_2,4_blue`
`r_2,4_blue`

- Targets cards with exact ratings of 4 or 2. Here, the order does not matter.
- Targets cards with exact ratings of 4 or 2. Here, the order does not matter.

## Examples

Expand Down Expand Up @@ -166,7 +164,7 @@ You can also specify multiple ratings in a single value if you wish to target mu
| criterion | t | Tag-based |
| value | 111,116,78,87 | Use tags 111, 116, 78, 87 |
| style | blue | Set fixed color |
| gradient-opts | | No animation |
| gradient-opts | | No gradient |
| hover-opts | green | Set hover effect color |
| card-opts | | Use default values |

Expand All @@ -182,7 +180,7 @@ You can also specify multiple ratings in a single value if you wish to target mu
| value | 111,116,78,87/105 | Use tags 111, 116, 78, 87 or 105 |
| style | pink,red,white/orange,white | Apply pink, red, white gradient for first set of tags; orange, white for tag 105 |
| gradient-opts | /,70deg,4s alternate infinite | No animation for first set of tags; 70deg, 4s alternate infinite for tag 105 |
| hover-opts | | Use default hover options |
| hover-opts | | No hover effect |
| card-opts | ,30/ | Set opacity to 30 for first set of tags; default opacity for tag 105 |

---
Expand All @@ -196,8 +194,8 @@ You can also specify multiple ratings in a single value if you wish to target mu
| criterion | r | Rating-based |
| value | 5/4/3 | Use ratings 5, 4, and 3 |
| style | gold/hot/default | Apply gold style to ratings 5, hot style to ratings 4, and default style to ratings 3 |
| gradient-opts | | Use default gradient options |
| hover-opts | | Use default hover options |
| gradient-opts | | Use corresponding gradient options |
| hover-opts | | Use corresponding hover options |
| card-opts | //,50 | Set opacity to 50 for ratings 3; default opacity to other ratings |

---
Expand All @@ -211,9 +209,9 @@ You can also specify multiple ratings in a single value if you wish to target mu
| criterion | r | Rating-based |
| value | 96,90,88/70,60 | Use ratings 96, 90, 88 or 70, 60 |
| style | #0fff00/#000cff | Apply #0fff00 color to ratings 96, 90, 88; #000cff color to ratings 70, 60 |
| gradient-opts | | Use default gradient options |
| hover-opts | | Use default hover options |
| card-opts | | Use default card options |
| gradient-opts | | No gradient |
| hover-opts | | No hover effect |
| card-opts | | Use default values |

## Style Presets

Expand All @@ -223,16 +221,26 @@ These presets provide predefined styles for quick and easy customization.

![Default](/plugins/hotCards/assets/default.png)

You can specify '\_\_default' for the card type you want the **default** preset to be applied and it will use the configured Tag ID or Rating Threshold. You can also leave the field empty and the default style will be applied anyway.
You can specify `__default` for the card type you want the **default** preset to be applied and it will use the configured Tag ID or Rating Threshold. You can also leave the field empty and the default style will be applied anyway.

### Hot

![Hot](/plugins/hotCards/assets/hot.png)

You can specify '\_\_hot' for the card type you want the **hot** preset to be applied and it will use the configured Tag ID or Rating Threshold.
You can specify `__hot` for the card type you want the **hot** preset to be applied and it will use the configured Tag ID or Rating Threshold.

### Gold

![Gold](/plugins/hotCards/assets/gold.png)

You can specify '\_\_gold' for the card type you want the **gold** preset to be applied and it will use the configured Tag ID or Rating Threshold.
You can specify `__gold` for the card type you want the **gold** preset to be applied and it will use the configured Tag ID or Rating Threshold.

### Holo

![Holo](/plugins/hotCards/assets/holo.png)

**Important**: Currently, the Holo style preset only works well with **performer** cards. It should not be used with any other card type until a workaround is found.

You can specify `__holo` for the card type you want the **holo** preset to be applied and it will use the configured Tag ID or Rating Threshold.

**Note**: _By default, the animation of the holographic effect is disabled, you can activate it by running: `__holo___,,true`._
Binary file added plugins/hotCards/assets/holo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added plugins/hotCards/assets/illusion.webp
View file
Binary file not shown.
139 changes: 138 additions & 1 deletion plugins/hotCards/hotCards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
height: auto;
}

.hot-card::after {
.hot-card:after {
z-index: -1;
}

Expand All @@ -20,6 +20,131 @@
animation: none !important;
}

.holo {
--img: url("https://raw.githubusercontent.com/stashapp/CommunityScripts/main/plugins/hotCards/assets/illusion.webp");
--posx: 50%;
--posy: 50%;
--hyp: 0.2;
--o: 1;
--mx: 50%;
--my: 50%;
--radius: 4.55% / 3.5%;
--space: 1%; /* 5% */
--angle: 133deg;
--imgsize: 50%;

--color1: rgb(255, 119, 115) calc(var(--space) * 1);
--color2: rgba(255, 237, 95, 1) calc(var(--space) * 2);
--color3: rgba(168, 255, 95, 1) calc(var(--space) * 3);
--color4: rgba(131, 255, 247, 1) calc(var(--space) * 4);
--color5: rgba(120, 148, 255, 1) calc(var(--space) * 5);
--color6: rgb(216, 117, 255) calc(var(--space) * 6);
--color7: rgb(255, 119, 115) calc(var(--space) * 7);

display: grid;
}

.holo-img {
grid-area: 1/1;
}

.shine {
height: 100%;
aspect-ratio: 0.714;
mix-blend-mode: color-dodge;
background-image: var(--img),
repeating-linear-gradient(
0deg,
var(--color1),
var(--color2),
var(--color3),
var(--color4),
var(--color5),
var(--color6),
var(--color7)
),
repeating-linear-gradient(
var(--angle),
#0e152e 0%,
hsl(180, 10%, 60%) 3.8%,
hsl(180, 29%, 66%) 4.5%,
hsl(180, 10%, 60%) 5.2%,
#0e152e 10%,
#0e152e 12%
),
radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgba(0, 0, 0, 0.1) 12%,
rgba(0, 0, 0, 0.15) 20%,
rgba(0, 0, 0, 0.25) 120%
);
background-blend-mode: exclusion, hue, hard-light, exclusion;
background-size:
var(--imgsize),
200% 700%,
300%,
200%;
background-position:
center,
0% var(--posy),
var(--posx) var(--posy),
var(--posx) var(--posy);
filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2) saturate(1.5);
-webkit-filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2)
saturate(1.5);
display: grid;
grid-area: 1/1;
opacity: var(--o);
}

.shine:after {
content: "";
visibility: visible;
height: 100%;
aspect-ratio: 0.714;
mix-blend-mode: exclusion;
background-image: var(--img),
repeating-linear-gradient(
0deg,
var(--color1),
var(--color2),
var(--color3),
var(--color4),
var(--color5),
var(--color6),
var(--color7)
),
repeating-linear-gradient(
var(--angle),
#0e152e 0%,
hsl(180, 10%, 60%) 3.8%,
hsl(180, 29%, 66%) 4.5%,
hsl(180, 10%, 60%) 5.2%,
#0e152e 10%,
#0e152e 12%
),
radial-gradient(
farthest-corner circle at var(--mx) var(--my),
rgba(0, 0, 0, 0.1) 12%,
rgba(0, 0, 0, 0.15) 20%,
rgba(0, 0, 0, 0.25) 120%
);
background-blend-mode: exclusion, hue, hard-light, exclusion;
background-size:
var(--imgsize),
200% 400%,
195%,
200%;
background-position:
center,
0% var(--posy),
calc(var(--posx) * -1) calc(var(--posy) * -1),
var(--posx) var(--posy);
filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.6) saturate(1.4);
-webkit-filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.6)
saturate(1.4);
}

@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 36, 9, 0);
Expand All @@ -46,6 +171,18 @@
}
}

@media (max-width: 576px) {
.hot-card {
width: 100%;
}
}

@media (max-width: 576px) and (orientation: portrait) {
div[class*=" hot-performer-card"] {
width: 14rem;
}
}

@media (prefers-reduced-motion: reduce) {
.hot-card {
animation: none;
Expand Down
Loading

0 comments on commit 11042b3

Please sign in to comment.