You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`<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. |
31
31
|`<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. |
32
-
|`<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**. |
32
+
|`<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).|
33
33
|`<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. |
34
34
|`<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. |
35
-
|`<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._|
36
-
37
-
<br>
35
+
|`<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._|
38
36
39
37
**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._
40
38
41
39
### Regarding multiple values
42
40
43
41
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.
44
42
45
-
#### 1. **Tag IDs**
43
+
1.**Tag IDs**
46
44
47
-
Corresponding styles _(style, gradient_opts, hover_opts, card_opts)_ are applied only if **ALL** tags in a set match.
45
+
Corresponding styles _(style, gradient_opts, hover_opts, card_opts)_ are applied only if **ALL** tags in a set match.
48
46
49
-
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.
47
+
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.
50
48
51
-
For example:
49
+
For example:
52
50
53
-
`t_201,202/202_red/blue`
51
+
`t_201,202/202_red/blue`
54
52
55
-
- A card with tags 201 and 202 will be painted red.
56
-
- A card with tag 202 will be painted blue (only if it does not have tag 201).
53
+
- A card with tags 201 and 202 will be painted red.
54
+
- A card with tag 202 will be painted blue (only if it does not have tag 201).
57
55
58
-
Conversely, `t_202/201,202_blue/red`
56
+
Conversely, `t_202/201,202_blue/red`
59
57
60
-
- A card with tag 202 will be painted blue, regardless of the presence of tag 201. Therefore, there will be no cards painted red.
58
+
- A card with tag 202 will be painted blue, regardless of the presence of tag 201. Therefore, there will be no cards painted red.
61
59
62
-
#### 2. **Ratings**
60
+
2.**Ratings**
63
61
64
-
The same left-to-right prioritization applies.
62
+
The same left-to-right prioritization applies.
65
63
66
-
Consider the declaration:
64
+
Consider the declaration:
67
65
68
-
`r_4/2_red/blue`
66
+
`r_4/2_red/blue`
69
67
70
-
- A card with a rating >= 4 will be painted red.
71
-
- A card with a rating >= 2 but < 4 will be painted blue.
68
+
- A card with a rating >= 4 will be painted red.
69
+
- A card with a rating >= 2 but < 4 will be painted blue.
72
70
73
-
<br>
71
+
<br>
74
72
75
-
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:
73
+
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:
76
74
77
-
`r_2,4_blue`
75
+
`r_2,4_blue`
78
76
79
-
- Targets cards with exact ratings of 4 or 2. Here, the order does not matter.
77
+
- Targets cards with exact ratings of 4 or 2. Here, the order does not matter.
80
78
81
79
## Examples
82
80
@@ -166,7 +164,7 @@ You can also specify multiple ratings in a single value if you wish to target mu
166
164
| criterion | t | Tag-based |
167
165
| value | 111,116,78,87 | Use tags 111, 116, 78, 87 |
168
166
| style | blue | Set fixed color |
169
-
| gradient-opts || No animation|
167
+
| gradient-opts || No gradient |
170
168
| hover-opts | green | Set hover effect color |
171
169
| card-opts || Use default values |
172
170
@@ -182,7 +180,7 @@ You can also specify multiple ratings in a single value if you wish to target mu
182
180
| value | 111,116,78,87/105 | Use tags 111, 116, 78, 87 or 105 |
183
181
| style | pink,red,white/orange,white | Apply pink, red, white gradient for first set of tags; orange, white for tag 105 |
184
182
| gradient-opts | /,70deg,4s alternate infinite | No animation for first set of tags; 70deg, 4s alternate infinite for tag 105 |
185
-
| hover-opts ||Use default hover options|
183
+
| hover-opts ||No hover effect |
186
184
| card-opts | ,30/ | Set opacity to 30 for first set of tags; default opacity for tag 105 |
187
185
188
186
---
@@ -196,8 +194,8 @@ You can also specify multiple ratings in a single value if you wish to target mu
196
194
| criterion | r | Rating-based |
197
195
| value | 5/4/3 | Use ratings 5, 4, and 3 |
198
196
| style | gold/hot/default | Apply gold style to ratings 5, hot style to ratings 4, and default style to ratings 3 |
199
-
| gradient-opts || Use default gradient options|
200
-
| hover-opts || Use default hover options|
197
+
| gradient-opts || Use corresponding gradient options |
198
+
| hover-opts || Use corresponding hover options |
201
199
| card-opts | //,50 | Set opacity to 50 for ratings 3; default opacity to other ratings |
202
200
203
201
---
@@ -211,9 +209,9 @@ You can also specify multiple ratings in a single value if you wish to target mu
211
209
| criterion | r | Rating-based |
212
210
| value | 96,90,88/70,60 | Use ratings 96, 90, 88 or 70, 60 |
213
211
| style | #0fff00/#000cff | Apply #0fff00 color to ratings 96, 90, 88; #000cff color to ratings 70, 60 |
214
-
| gradient-opts ||Use default gradient options|
215
-
| hover-opts ||Use default hover options|
216
-
| card-opts || Use default card options|
212
+
| gradient-opts ||No gradient |
213
+
| hover-opts ||No hover effect |
214
+
| card-opts || Use default values |
217
215
218
216
## Style Presets
219
217
@@ -223,16 +221,26 @@ These presets provide predefined styles for quick and easy customization.
223
221
224
222
225
223
226
-
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.
224
+
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.
227
225
228
226
### Hot
229
227
230
228
231
229
232
-
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.
230
+
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.
233
231
234
232
### Gold
235
233
236
234
237
235
238
-
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.
236
+
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.
237
+
238
+
### Holo
239
+
240
+
241
+
242
+
**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.
243
+
244
+
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.
245
+
246
+
**Note**: _By default, the animation of the holographic effect is disabled, you can activate it by running: `__holo___,,true`._
0 commit comments