Skip to content

Commit

Permalink
Add card_opts as new optional parameter
Browse files Browse the repository at this point in the history 
card_opts allows you to specify whether you want the card to be filled or not, and also set the opacity of the card.

Other changes:
- Adjust README to include the new option and other additions.
- Change misleading param name 'border_opts' to 'hover_opts' in the docs, code and in the configuration file.
- Update version to 1.1.2.
  • Loading branch information
@HandyRandyx
HandyRandyx committed Jul 7, 2024
1 parent 9e3f6ae commit d2819bc
Show file tree
Hide file tree
Showing 4 changed files with 157 additions and 77 deletions.
101 changes: 61 additions & 40 deletions plugins/hotCards/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,18 @@ After installation, you can configure the plugin to suit your needs. Set a desir

### Configure the field format:

_[criterion]\_[value]\_[style]\_[gradient-opts]\_[border-opts]_
_[criterion]\_[value]\_[style]\_[gradient-opts]\_[hover-opts]\_[card-opts]_

**Important**: If you have previously installed the plugin, after updating to `1.1.0`, be sure to update your settings from the old boolean format to the new string format. Refresh the page for the changes to take effect.

| Parameter | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `<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 configuration. If both options are enabled and unspecified, the Tag ID will be used by default. |
| `<value>` | Specifies the exact value for the Tag ID or Rating Threshold to be used. |
| `<style>` | Defines the styling options as a comma-separated list of colors or presets. Options include: a fixed color (e.g., #5ff2a2), a style preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... with hex color codes or color names). |
| `<gradient-opts>` | Specifies gradient options as a comma-separated list: `<gradient type>,<gradient angle>,<gradient animation>`. Example: **linear,35deg,4s alternate infinite** for a linear gradient with a 35-degree angle and a 4-second alternating infinite animation. |
| `<border-opts>` | Specifies border options as a comma-separated list: `<border color>,<border animation>`. Example: **#ff0000,2s ease infinite** for a border with a color of #ff0000 and a 2-second ease infinite animation. |
| Parameter | Description | Details |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<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** configuration. If both options are enabled and unspecified, the Tag ID will be used by default. |
| `<value>` | Specifies the exact value for the Tag ID or Rating Threshold to be used. |
| `<style>` | Defines the styling options as a comma-separated list of colors or presets. Options include: a fixed color (e.g., #5ff2a2), a Style Preset (e.g., hot), or a gradient (e.g., #ef1313,#3bd612,... with hex color codes or color names). | Defaults to **default** (basic style preset)<br><br>Style Presets available: **default**, **hot**, **gold**. |
| `<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. | `<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 info. |
| `<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. | `<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>`. | `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 />

Expand All @@ -44,27 +45,29 @@ _[criterion]\_[value]\_[style]\_[gradient-opts]\_[border-opts]_

`t_123_gold`

| Segment | Value | Meaning |
| ------------- | ----- | ----------------- |
| criterion | t | Tag-based |
| value | 123 | Use 123 as Tag ID |
| style | gold | Use Gold preset |
| gradient-opts | | No gradient |
| border-opts | | No border |
| Segment | Value | Meaning |
| ------------- | ----- | ------------------ |
| criterion | t | Tag-based |
| value | 123 | Use 123 as Tag ID |
| style | gold | Use Gold preset |
| gradient-opts | | No gradient |
| hover-opts | | No hover effect |
| card-opts | | Use default values |

---

**Modify an existing Style Preset**:

`__hot_,,none_pink,none`

| Segment | Value | Meaning |
| ------------- | --------- | ------------------------------------- |
| criterion | | Use tag or rating as configured |
| value | | Use tag or rating global value |
| style | hot | Use Hot preset |
| gradient-opts | ,,none | No gradient animation |
| border-opts | pink,none | Set border color, no border animation |
| Segment | Value | Meaning |
| ------------- | --------- | ------------------------------------------ |
| criterion | | Use tag or rating as configured |
| value | | Use global tag or rating value |
| style | hot | Use Hot preset |
| gradient-opts | ,,none | No gradient animation |
| hover-opts | pink,none | Set hover effect color, no hover animation |
| card-opts | | Use default values |

---

Expand All @@ -75,38 +78,56 @@ _[criterion]\_[value]\_[style]\_[gradient-opts]\_[border-opts]_
| Segment | Value | Meaning |
| ------------- | ------- | ----------------------- |
| criterion | r | Rating-based |
| value | | Use rating global value |
| value | | Use global rating value |
| style | #2673b8 | Set fixed color |
| gradient-opts | | No gradient |
| border-opts | | No border |
| hover-opts | | No hover effect |
| card-opts | | Use default values |

---

**Fixed Color with Border**
**Fixed Color border-only**

`r_4_white___false`

| Segment | Value | Meaning |
| ------------- | ----- | ------------------------- |
| criterion | r | Rating-based |
| value | 4 | Use 4 as Rating Threshold |
| style | white | Set fixed color |
| gradient-opts | | No gradient |
| hover-opts | | No hover effect |
| card-opts | false | No fill |

---

**Fixed Color with hover effect**

`__#5ff2a2__#5ff1a1`

| Segment | Value | Meaning |
| ------------- | ------- | ------------------------------------ |
| criterion | | Use tag or rating as configured |
| value | | Use tag or rating global value |
| style | #5ff2a2 | Set fixed color |
| gradient-opts | | No gradient |
| border-opts | #5ff1a1 | Set border color when hovering cards |
| Segment | Value | Meaning |
| ------------- | ------- | ------------------------------- |
| criterion | | Use tag or rating as configured |
| value | | Use global tag or rating value |
| style | #5ff2a2 | Set fixed color |
| gradient-opts | | No gradient |
| hover-opts | #5ff1a1 | Set hover color |
| card-opts | | Use default values |

---

**Gradient with Border**
**Gradient with hover effect**

`_67_pink,red,yellow,green,red,blue_,30deg,5s ease infinite_red,1s ease-in-out infinite`

| Segment | Value | Meaning |
| ------------- | ------------------------------ | ------------------------------------ |
| criterion | | Use tag or rating as configured |
| value | 67 | Use 67 as Tag ID or Rating Threshold |
| style | pink,red,yellow,green,red,blue | Make gradient |
| gradient-opts | ,30deg,5s ease infinite | Specify angle and animate gradient |
| border-opts | red,1s ease-in-out infinite | Set border color and animate border |
| Segment | Value | Meaning |
| ------------- | ------------------------------ | ----------------------------------------- |
| criterion | | Use tag or rating as configured |
| value | 67 | Use 67 as Tag ID or Rating Threshold |
| style | pink,red,yellow,green,red,blue | Use gradient |
| gradient-opts | ,30deg,5s ease infinite | Specify angle, and animate gradient |
| hover-opts | red,1s ease-in-out infinite | Set hover effect color, and animate hover |
| card-opts | ,100 | Use max opacity |

**Note**: _You can also skip inner values, notice the first comma in **gradient-opts**. The type is not provided, so linear gradient will be used by default._

Expand Down
3 changes: 1 addition & 2 deletions plugins/hotCards/hotCards.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@
border-radius: var(--border-width);
}

.hot-card > .card {
background-color: rgba(0, 0, 0, 0.2);
.hot-card > .hot-border {
height: auto;
}

Expand Down
Loading

0 comments on commit d2819bc

Please sign in to comment.